{% 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 %}

    <!-- Table -->
    <div class="mini-table-responsive" id="doublescroll"  style="width: 70%; margin: auto;" >
        <!-- Tabla con la información de la rendición de cuentas -->
        <table class="table table-striped table-bordered table-hover dataTables-example mb-1 mt-1 text-center" >
            <!-- Encabezado de la tabla -->
            <thead>
                <tr>
                    <th colspan="2"><h2>Detalles del usuario</h2></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Username</th>
                    <td style="text-align: left;">{{ user.username }}</td>
                </tr>
                <tr>
                    <th>Password</th>
                    <td style="text-align: left;">{{ user.password }}</td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td style="text-align: left;">{{ user.email }}</td>
                </tr>
                <tr>
                    <th>Nombre</th>
                    <td style="text-align: left;">{{ user.first_name }}</td>
                </tr>
                <tr>
                    <th>Role</th>
                    <td style="text-align: left;">{{ group_name }}</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="#" data-toggle="modal" data-target="#confirmarModal">Editar</a>
                        <a href="#" data-toggle="modal" data-target="#confirmarEliminarModal">Eliminar</a>
                    </td>
                </tr>
            </tbody>                     
        </table>
        <!-- Display other user details as needed -->
        
    </div>

<!-- Edit Modal -->
<div class="modal fade" id="confirmarModal" tabindex="-1" role="dialog" aria-labelledby="confirmarModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmarModalLabel">Confirmar edició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 editar este usuario?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <a href="{% url 'BIF:user_update' pk=user.id %}" class="btn btn-primary">Editar</a>
            </div>
        </div>
    </div>
</div>
<!-- Delete Modal -->
<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=user.id %}" class="btn btn-danger">Eliminar</a>
            </div>
        </div>
    </div>
</div>
   
{% endblock %}