{% extends 'base.html' %}
{% load static %}


{% block content %}

<div class="content container-fluid">
    <div class="page-header">
       <div class="row align-items-center">
          <div class="col">
             <h3 class="page-title">Product Details</h3>
             <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                <li class="breadcrumb-item active">Product Details</li>
             </ul>
          </div>
          
       </div>
    </div>
    {% if messages %}
                   {% for message in messages %}
                   {% if message.tags == 'info' %}
                   <div class="alert alert-warning alert-dismissible fade show" role="alert">
                       {{message}}
                      <button type="button"  class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    {% endif %}
                    {% endfor %}
                    {% endif %}
    <div class="row">
       <div class="col-sm-12">
          <div class="card card-table">
             <div class="card-body">
                <div class="table-responsive">
                   <table id="table_id" class="table table-hover table-center mb-0 ">
                      <thead>
                         <tr>
                            
                            <th>Product Name</th>
                            <th>Product ID</th>
                            <th>Category</th>
                            <th>Brand</th>
                            <th>Quantity Received</th>
                            <th>Supplier Name</th>
                            <th>Supplier Mobile No:</th>
                            <th>Created at</th>
                            <th>Updated at</th>
                            
                            
                            
                            
                            <th class="text-right">Action</th>
                         </tr>
                      </thead>
                      <tbody>
                        
                        {% for i in product  %}
                        
                        
                        
                         <tr>
                            
                            <td>
                               <h2 class="table-avatar">
                                 
                                 <a href="#">{{i.name}}</a>
                                  
                               </h2>
                            </td>
                            <td>{{i.unique_id}}</td>
                            <td>{{i.category_id.name}}</td>
                            <td>{{i.brand_id.name}}</td>
                            <td>{{i.receive_quantity}}</td>
                            <td>{{i.supplier_id.name}}</td>
                            <td>{{i.supplier_id.mobile_sup}}</td>
                            <td>{{i.created_at}}</td>
                            <td>{{i.updated_at}}</td>
                            
                            
                            <td class="text-right">
                               <div class="actions">
                                  <a href="" class="btn btn-sm bg-success-light mr-2">
                                  <i class="fas fa-pen"></i>
                                  </a>
                                  <a href="" class="btn btn-sm bg-danger-light">
                                  <i class="fas fa-trash"></i>
                                  </a>
                               </div>
                            </td>
                         </tr>
                         
                         {% endfor %}
                         
                        
                      </tbody>
                   </table>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

{% endblock %}