{% extends 'base.html' %}

{% load static %}

{% block title %}Dashboard | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Main Dashboard</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if data %}
<div>
    <table class="table table-striped">
         <thead>
           <tr>
             <th scope="col" class="mobile__tab__heading">BLEND</th>
             <th scope="col" class="mobile__hidden">BLEND</th>
             <th scope="col" class="mobile__tab__heading">PRODUCT</th>
             <th scope="col" class="mobile__tab__heading">DATE</th>
             <th scope="col" class="mobile__hidden">TANK</th>
             <th scope="col" class="mobile__tab__heading">VOLUME</th>
             <th scope="col" class="mobile__hidden">BLENDER</th>
             <th scope="col" class="mobile__tab__heading">STATUS</th>
           </tr>
         </thead>
         <tbody>
             {% for r in data %}  
           <tr onclick="window.location.href='/blend_info/{{r.id}}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
             <td class="mobile__text">{{r.blend_number}}</td>
             <td class="mobile__hidden">{{r.blend_number_2}}</td>
             <td class="mobile__text">{{r.product}}</td>
             <td class="mobile__text">{{r.date_blended}}</td>
             <td class="mobile__hidden">{{r.tank_number}}</td>
             <td class="mobile__text">{{r.volume_in_ltr}}</td>
             <td class="mobile__hidden">{{r.blending_inspector}}</td>
             <td class="mobile__text">
               {% if r.status == 'BLENDED' %}
                   <i class="bi bi-droplet-fill"></i>
               {% elif r.status == 'CHECKED' %}
                   <i class="bi bi-droplet-fill"></i>
                   <i class="bi bi-toggles"></i>
               {% elif r.status == 'APPROVED' %}
                   <i class="bi bi-droplet-fill"></i>
                   <i class="bi bi-toggles"></i>
                     {% if r.result == 'PASS' %}
                         <i class="bi bi-person-check-fill" style="color:green;"></i>
                     {% elif r.result == 'FAIL' %}
                         <i class="bi bi-person-x-fill" style="color:red;"></i>
                     {% else %}
                         <i class="bi bi-person-fill"></i>
                     {% endif %}
               {% endif %}
               <span class="mobile__hidden"><small>{{r.status}}</small></span>
 
                 {% if r.has_dispute == True %}
                         {% if r.dispute_status == 'open' %}
                         <i class="bi bi-patch-question-fill" style="color:red;"></i>
                         {% elif r.dispute_status == 'closed' %}
                         <i class="bi bi-patch-question-fill" style="color:green;"></i> 
                         {% endif %}
                 {% endif %}
               </td>
           </tr>
           {% endfor %}
         </tbody>
       </table>
       {% if data.has_other_pages %}
           <ul class="pagination">
             {% if data.has_previous %}
               <li class="page-item"><a href="?page={{ users.previous_page_number }}"  class="page-link">&laquo;</a></li>
             {% else %}
               <li class="page-item disabled"><span>&laquo;</span></li>
             {% endif %}
             {% for i in data.paginator.page_range %}
               {% if data.number == i %}
                 <li class="active page-link">{{ i }}></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={{ users.next_page_number }}" class="page-link">&raquo;</a></li>
             {% else %}
               <li class="disabled page-item"><span>&raquo;</span></li>
             {% endif %}
           </ul>
         {% endif %}
</div>

{% else %}

<h1>dashboard</h1>

{% endif %}
 <br><br>
{% endblock %}