{% 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);border-radius: 5%;">
    <h3 class="p-2" style="background-color:#212529;color:white;">Welcome back, {{ user.first_name|upper}} {{ user.last_name|upper}}</h3>
    
    <div class="p-2">
        <div class="row">
            <div class="col">
                <div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
                    <div class="card-header">Line Analysis</div>
                    <div class="card-body">
                      <h5 class="card-title">
                        <p class="mb-0">{{ day_la }} <sup style="font-size: 10px;">(In last 24HRS)</sup></p>
                        <p class="mb-0">{{ month_la }} <sup style="font-size: 10px;">(In last 30 days)</sup></p>
                      </h5>
                    </div>
                  </div>
            </div>
            <div class="col">
                <div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
                    <div class="card-header">Sachet Analysis</div>
                    <div class="card-body">
                      <h5 class="card-title">
                        <p class="mb-0">{{ day_sa }} <sup style="font-size: 10px;">(In Last 24HRS)</sup></p>
                        <p class="mb-0">{{ month_sa }} <sup style="font-size: 10px;">(In Last Month)</sup></p>
                      </h5>
                    </div>
                  </div>
            </div>
            <div class="col">
                <div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header">Line Inspection</div>
                    <div class="card-body">
                      <h5 class="card-title">
                        <p class="mb-0">{{ day_li }} <sup style="font-size: 10px;">(In Last 24HRS)</sup></p>
                        <p class="mb-0">{{ month_li }} <sup style="font-size: 10px;">(In Last Month)</sup></p>
                      </h5>
                    </div>
                  </div>
            </div>
            <div class="col">
                <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                    <div class="card-header">Sachet Insp.</div>
                    <div class="card-body">
                      <h5 class="card-title">
                        <p class="mb-0">{{ day_si }} <sup style="font-size: 10px;">(In Last 24HRS)</sup></p>
                        <p class="mb-0">{{ month_si }} <sup style="font-size: 10px;">(In Last Month)</sup></p>
                      </h5>
                    </div>
                  </div>
            </div>
        </div>
    </div>

    <div class="p-2">
        <table class="table">
            <thead style="background-color:#212529;color:white;">
                <th>DESCRIPTION</th>
                <th>SHIFT</th>
                <th>PRODUCT</th>
                <th>DATE</th>
            </thead>
            <tbody>
                {% for d in data %}
                    <tr onclick="window.location.href='{{ d.link }}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                        <td>{{ d.description }}</td>
                        <td>{{ d.shift }}</td>
                        <td>{{ d.product }} ML</td>
                        <td>{{ d.datetime_created }}</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>
{% endblock %}