{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}

<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
    <h3 class="p-2" style="background-color:#212529;color:white;">PRODUCT DASHBOARD</h3>
    <div class="px-3 pb-3">
        <div class="mb-3">
            
              <div class="input-group mb-3">
                <input type="text" class="form-control shadowed" id="myInput" placeholder="Search.." aria-label="Recipient's username" aria-describedby="button-addon2">
                <a href="/utils/products/create/" class="btn btn-primary shadowed">Create Form</a>
              </div>

            <table class="table" id="dtBasicExample">
                <thead>
                  <tr style="background-color:#212529;color:white;">
                    <th scope="col">PRODUCT</th>
                    <th scope="col">PRODUCT</th>
                    <th scope="col">SIZE</th>
                    <th scope="col">TYPE</th>
                    <th scope="col">SECTION</th>
                  </tr>
                </thead>
                <tbody id="myTable">
            {% for d in data %}
                    <tr onclick="window.location.href='/utils/products/detail/{{d.id}}/'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                        <td>{{ d.product_name}}</td>
                        <td>{{ d.product_name_short }}</td>
                        <td>{{ d.product_size }}</td>
                        <td>{{ d.product_type }}</td>
                        <td>{{ d.product_section }}</td>
                    </tr>
            {% endfor %}
                </tbody>
            </table>

            <!-- PAGINATION -->
            {% if data.has_other_pages %}
              <ul class="pagination">
                {% if data.has_previous %}
                  <li class="page-item"><a href="?page={{ data.previous_page_number }}" class="page-link">&laquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                {% endif %}
                {% for i in data.paginator.page_range %}
                  {% if data.number == i %}
                    <li class="page-item active"><span class="page-link">{{ i }} <span class="sr-only">(current)</span></span></li>
                  {% else %}
                    <li class="page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                  {% endif %}
                {% endfor %}
                {% if data.has_next %}
                  <li class="page-item"><a href="?page={{ data.next_page_number }}" class="page-link">&raquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}
              </ul>
            {% endif %}
            <!-- PAGINATION -->
        </div>
    </div>
</div>
{% endblock %}