{% extends 'base.html' %}

{% load static %}

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

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Joined Blends 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">AREA</th>
             <th scope="col" class="mobile__tab__heading">BLEND</th>
             <th scope="col" class="mobile__tab__heading">PRODUCT</th>
             <th scope="col" class="mobile__hidden">COMMENT</th>
             <th scope="col" class="mobile__heading">RECORDED BY</th>
             <th scope="col" class="mobile__tab__heading">RECORDED AT</th>
           </tr>
         </thead>
         <tbody>
             {% for r in data %}  
           <tr onmouseover="bigImg(this)" onmouseout="normalImg(this)">
             <td class="mobile__text">{{r.line_sachet_area}} {{r.line_sachet}}</td>
             <td class="mobile__text">{{r.blend_number}}</td>
             <td class="mobile__text">{{r.blend.product}}</td>
             <td class="mobile__hidden">{{r.comment}}</td>
             <td class="mobile__text">{{r.created_by}}</td>
             <td class="mobile__text">{{r.datetime_created}}</td>
           </tr>
           {% endfor %}
         </tbody>
       </table>
       {% if R.has_other_pages %}
           <ul class="pagination">
             {% if R.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 R.paginator.page_range %}
               {% if R.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 R.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>No Data in the Blend File</h1>

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