<% layout('layouts/customer-boilerplate')  -%>

    <div class="row">
        <input style="margin-bottom: 15px;" class="form-control" type="text" id="user_input" onkeyup="filterByProductName()" placeholder="Search by product name ...">
        <div class="row">
            <ul class="nav nav-pills nav-fill justify-content-center">
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('all')  ? 'active' : '' %>" aria-current="page" href="/admin/products">All</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('fruits') ? 'active' : '' %>" href="/admin/products?category=fruits">Fruits</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('vegetables') ? 'active' : '' %>" href="/admin/products?category=vegetables">Vegetables</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('meat') ? 'active' : '' %>" href="/admin/products?category=meat">Meat</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('spices') ? 'active' : '' %>" href="/admin/products?category=spices">Spices</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what.includes('OnSale') ? 'active' : '' %>" href="/admin/products?tags=OnSale">On Sale</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/products/add">Add new</a>
                </li>
            </ul>
        </div>
        <div class="row">
            <table id="products_table" class="table table-hover table-condensed">
                <thead>


                    <tr>
                        <th style="width:50%">Product name</th>
                        <th style="width:10%">Price</th>
                        <th style="width:8%">Quantity</th>
                        <th style="width:14%">Quantity type</th>
                        <th style="width:22%" class="text-center">
                            Category
                        </th>

                        <th style="width:10%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <% for (let product of products) {%>
                        <tr>
                            <td data-th="Product name">
                                <div class="row">
                                    <div class="col-sm-2 hidden-xs display-none-sm-screen"><img src="<%=product.images[0].tiny_thumbnail %>" alt="..." class="img-responsive" /></div>
                                    <div class="col-sm-10">
                                        <h6 class="nomargin" style="text-transform: capitalize;">
                                            <a href="/products/<%= product._id %>">
                                                <%= product.name %>
                                            </a>
                                        </h6>
                                        <span class="display-none-sm-screen">
                                            <% if(product.tags.includes('OnSale')) {%>
                                                <span class="badge bg-danger">OnSale</span>
                                        <% } %>
                                            <%= product.description %>
                                                </span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <%= product.price %> zl</td>
                            <td data-th="Quantity">
                                <input type="number" onchange="updateHiddenInput('shown<%= product._id %>', 'hidden<%= product._id %>')" id="shown<%= product._id %>" class="form-control text-center" value="<%= product.quantity %>">

                            </td>
                            <td>
                                <%= product.quantity_type %>
                            </td>
                            <td class="text-center">
                                <a href="/admin/products?category=<%= product.category %>" style="text-decoration: none;">
                                    <%= product.category %>
                                </a>
                            </td>

                            <td class="actions">
                                <form action="/admin/products/<%= product._id %>/edit?_method=PUT" method="POST">
                                    <input type="number" name="quantity" hidden id="hidden<%= product._id %>" value="<%= product.quantity %>">
                                    <button type="submit" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>
                                </form>
                                <a href="/admin/products/<%= product._id %>/edit" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>
                                <form action="/admin/products/<%= product._id %>?_method=DELETE" method="POST">
                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
                                </form>
                            </td>
                        </tr>
                        <% } %>

                </tbody>
            </table>
        </div>

    </div>