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

        table {
            text-align: center;
        }
    </style>

    <h2 style="text-align: center;text-transform: uppercase;margin-top: 1%;">
        <%=sub_item.name%>
    </h2>
    <br>
    <div class="sect-head">
        <h3 class="section-t" data-content="categories-content">Products:</h3>
         <a class="btn btn-success" href="/new/<%=sub_item._id%>/product">+Add new Product</a>
        </form>
    </div>
    <table id="products-content" class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Product</th>
            <th>Sub Category</th>
            <th scope="col">Delete</th>
            <th scope="col">Edit</th>
          </tr>
        </thead>
        <tbody>
            <% products.forEach(function(product, indx){%>
                <tr id="tr_product_<%=indx%>">
                    <td><%=indx+1%></td>
                    <td><%=product.name%></td>
                    <td><%=product.Sub_item.name%></td>
                    <td class="action delete" onclick="delete_product('<%=indx%>','<%=product._id%>','<%=product.name%>')"></td>
                    <td class="action edit" onclick="window.location.href='/admin/product/details/<%=product._id%>'"></td>
                </tr>
                    <% })%>
        </tbody>
      </table>

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