<%- include('./admin_partials/header') -%>
    <link rel="stylesheet" href="/admin/admin.css">
    <style>
        .section-t {}

        table {
            text-align: center;
        }
        .subname{
            color: unset;
        }
    </style>

    <h2 style="text-align: center;text-transform: uppercase;margin-top: 1%;">
        <%=category.name%>
    </h2>
    <br>
    <div class="sect-head">
        <h3 class="section-t" data-content="categories-content">Sub Categories:</h3>
        <form action="/new/sub_category?cat_id=<%=category._id%>" method="POST"
            onsubmit="return confirm('Do you really want to create '+this.sub_name.value+'?');">
            <input type="text" name="sub_name" id="" required>&nbsp;<button class="btn btn-success">+Add new Sub
                Category</button>
        </form>
    </div>
    <table id="sub_cats-content" class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Sub Category</th>
                <th scope="col">Delete</th>
                <th scope="col">Edit</th>
            </tr>
        </thead>
        <tbody>
            <% category.Sub_items.forEach(function(sub_Cat, indx){%>
                <tr id="tr_sub_<%=indx%>">
                    <td><%=indx+1%></td>
                    <td id="subname-<%=indx%>"><a class="subname" href="/category/<%=sub_Cat._id%>/products?admin=true"><%=sub_Cat.name%></a></td>
                    <td class="action delete" onclick="delete_sub_cat('<%=indx%>','<%=sub_Cat._id%>','<%=sub_Cat.name%>')"></td>
                    <td class="action edit" data-action="edit" onclick="edit_subCat(this,'<%=indx%>','<%=sub_Cat._id%>');"></td>
                </tr>
                    <% })%>
        </tbody>
    </table>

    <script src="/admin/sub_cat/sub_cat.js"></script>
    <%- include('./admin_partials/footer') -%>