{% extends "base.html" %}
{% load static %}
{% load poll_extras %}
{% block title %}BIF{% endblock %}
{% block styles %}
<link href="{% static 'css/confirm-msg.css' %}" rel="stylesheet">
<link href="{% static 'css/filters.css' %}" rel="stylesheet">
{% endblock %}
{% block sidebar %}
{% include "sidebar.html" with is_admin=is_admin %}
{% endblock sidebar %}
{% block nav %}
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
    <!-- Navbar -->
    {% include "navbar.html" %}
</nav>
{% endblock %}
{% block content %}


<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>Listado de Usuarios</h2>
        <button type="button" class="btn btn-primary">
            <a href="{% url 'BIF:user_create' %}" style="color: rgb(255, 255, 255);">Crear nuevo usuario</a>
        </button> 
    </div>
</div>

<div class="wrapper wrapper-content">
    <!-- COntenido -->
    <div class="ibox-content">
        <!-- Tabla con Usuarios -->
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover dataTables-example">
                <thead>
                    <tr>
                        <th>Nombre de Usuario</th>
                        <th>Nombres</th>
                        <th>Apellidos</th>
                        <th>Email</th>
                        <th>Grupos</th>
                        <th>Ultimo Acceso</th>
                        <th>Activo</th>
                        <th  style="text-align: center;" colspan="2">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for usuario in object_list %}
                    <tr class="gradeX">
                        <td>{{ usuario.username }}</td>
                        <td>{{ usuario.first_name }}</td>
                        <td> {{ usuario.last_name }}</td>
                        <td> {{ usuario.email }}</td>
                        <td>
                            <!-- For para recorrer el queryset producto de la relación ManytoMany de los grupos a los que pertence el usuario -->
                            {% for grupo in usuario.groups.all %}
                            {% if forloop.last %}
                            {{ grupo}}
                            {% else %}
                            {{ grupo}},
                            {% endif %}
                            {% empty %}
                            Sin Grupos
                            {% endfor %}
                        </td>
                        <td> {{ usuario.last_login }}</td>
                        <td class="center">
                            {% if usuario.is_active %}
                                <i class="fa fa-check text-navy"></i>
                            {% else %}
                                <h2 style="color:red;"><strong>&times;</strong></h2>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'BIF:user_update' pk=usuario.id %}" class="btn btn-primary">Editar <i class="fa fa-edit"></i></a>
                        </td>
                        <td>
                            <a href="{% url 'BIF:user_delete' pk=usuario.id %}" class="btn btn-danger">Eliminar <i class="fa fa-eraser"></i></a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td>No hay ningun usuario registrado en el sistema.</td>
                    </tr>
                    <!-- Delete Modal -->
                    
                    {% endfor %}
                </tbody>
            </table>
        </div> <!-- Div Table -->
    </div>
</div> <!-- Div COntenido -->


<div class="modal fade" id="confirmarEliminarModal" tabindex="-1" role="dialog" aria-labelledby="confirmarEliminarModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmarEliminarModalLabel">Confirmar eliminación</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ¿Estás seguro de que deseas eliminar este usuario?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <a href="{% url 'BIF:user_delete' pk=usuario.id %}" class="btn btn-danger">Eliminar</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}