{% extends 'base.html' %}
{% block title %}Gestión de Usuarios{% endblock %}

{% block page_title %}Usuarios del Sistema{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <div class="d-flex align-items-center">
            <h5 class="text-secondary mb-0"><i class="fas fa-users-cog text-primary"></i> Personal y Administradores
            </h5>
        </div>
    </div>
    <div class="col-md-4 text-end">
        <a href="{% url 'usuario_crear' %}" class="btn btn-primary rounded-pill shadow-sm">
            <i class="fas fa-user-plus"></i> Nuevo Usuario
        </a>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Usuario</th>
                        <th>Nombre Completo</th>
                        <th>Rol Asignado</th>
                        <th>Estado</th>
                        <th class="text-end pe-4">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in usuarios %}
                    <tr class="{% if not user.is_active %}opacity-50{% endif %}">
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-{% if user.is_superuser %}danger{% elif user.is_staff %}primary{% else %}secondary{% endif %} text-white rounded-circle text-center me-3"
                                    style="width: 40px; height: 40px; line-height: 40px;">
                                    {{ user.username|make_list|first|upper }}
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ user.username }}</h6>
                                    <small class="text-muted">{{ user.email|default:'Sin correo' }}</small>
                                </div>
                            </div>
                        </td>
                        <td>{{ user.get_full_name|default:'-' }}</td>
                        <td>
                            {% if user.is_superuser %}
                            <span
                                class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25"><i
                                    class="fas fa-crown"></i> Administrador</span>
                            {% elif user.is_staff %}
                            <span
                                class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25"><i
                                    class="fas fa-user-md"></i> Veterinario / Staff</span>
                            {% else %}
                            <span
                                class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary border-opacity-25">Recepcionista</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if user.is_active %}
                            <span class="badge bg-success"><i class="fas fa-check-circle"></i> Activo</span>
                            {% else %}
                            <span class="badge bg-dark"><i class="fas fa-minus-circle"></i> Desactivado</span>
                            {% endif %}
                        </td>
                        <td class="text-end pe-4">
                            <form method="post" action="{% url 'usuario_estado' user.pk %}" class="d-inline">
                                {% csrf_token %}
                                {% if user.is_active %}
                                {% if request.user == user %}
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar acceso"
                                    disabled>
                                    <i class="fas fa-ban"></i>
                                </button>
                                {% else %}
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar acceso">
                                    <i class="fas fa-ban"></i>
                                </button>
                                {% endif %}
                                {% else %}
                                <button type="submit" class="btn btn-sm btn-outline-success" title="Restaurar acceso">
                                    <i class="fas fa-check"></i>
                                </button>
                                {% endif %}
                            </form>
                            <a href="{% url 'usuario_editar' user.pk %}" class="btn btn-sm btn-outline-primary"
                                title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-4 text-muted">No hay usuarios registrados.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}