{% 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">Categories</h3>
             <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                <li class="breadcrumb-item active">Categories</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>Cat.No</th>
                            <th>Name</th>
                            <th>Created at</th>
                            <th>Updated at</th>
                            
                            
                            
                            
                            <th class="text-right">Action</th>
                         </tr>
                      </thead>
                      <tbody>
                        
                        {% for i in category  %}
                        
                        
                        
                         <tr>
                            <td>{{forloop.counter}}</td>
                            <td>
                               <h2 class="table-avatar">
                                
                                 <a href="#">{{i.name}}</a>
                                  
                               </h2>
                            </td>
                            
                            
                            <td>{{i.created_at}}</td>
                            <td>{{i.updated_at}}</td>
                            
                            
                            <td class="text-right">
                              <div class="actions">
                                <a href="{% url 'edit_category' i.id %}" class="btn btn-sm bg-success-light mr-2">
                                  <i class="fas fa-pen"></i>
                                </a>
                                <button class="btn btn-sm bg-danger-light" type="button" onclick="document.getElementById('delete-dialog-{{ i.id }}').showModal()">
                                  <i class="fas fa-trash"></i>
                                </button>
                              </div>
                              <dialog id="delete-dialog-{{ i.id }}">
                                <form action="{% url 'delete_category' i.id %}" method="POST">
                                  {% csrf_token %}
                                  <p>Are you sure you want to delete this category?</p>
                                  <button type="submit" class="btn btn-danger">Delete</button>
                                  <button type="button" class="btn btn-secondary" onclick="document.getElementById('delete-dialog-{{ i.id }}').close()">Cancel</button>
                                </form>
                              </dialog>
                            </td>
                            
                         </tr>
                         
                         {% endfor %}
                         
                        
                      </tbody>
                   </table>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

 

{% endblock %}