{% extends 'base.html' %}
{% block title %}Asignaciones Activas{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Asignaciones Activas</h1>
        {% if user.is_superuser or user.is_staff %}
        <a href="{% url 'gestion_equipos:lista_equipos' %}" class="btn btn-primary">Ir a Inventario para Asignar</a>
         {% endif %}
    </div>
    
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
               <table class="table table-hover table-striped align-middle table-sm">
                <thead>
                    <tr>
                        <th>Equipo</th>
                        <th>Serie</th>
                        <th>Asignado a</th>
                        <th>Fecha</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    {% for asignacion in asignaciones %}
                    <tr>
                        <td>
                            <a href="{% url 'gestion_equipos:detalle_equipo' asignacion.equipo.pk %}" class="text-decoration-none fw-semibold text-dark">
                                {{ asignacion.equipo.nombre }}
                            </a>
                        </td>
                        <td>{{ asignacion.equipo.numero_serie }}</td>
                        <td>
                            <a href="{% url 'gestion_usuarios:detalle_usuario' asignacion.usuario.pk %}" class="text-decoration-none text-dark">
                                {{ asignacion.usuario.nombre }} {{ asignacion.usuario.apellido }}
                            </a>
                        </td>
                        <td>{{ asignacion.fecha_asignacion|date:"d/m/Y" }}</td>
                        <td>
                            <a href="{% url 'gestion_equipos:detalle_equipo' asignacion.equipo.pk %}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye"></i> Ver
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No hay asignaciones activas en este momento.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
    </div>

    <!-- INICIO: Bloque de Paginación -->
    {% if is_paginated %}
    <nav aria-label="Navegación de páginas" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Anterior</a>
                </li>
            {% else %}
                <li class="page-item disabled"><span class="page-link">Anterior</span></li>
            {% endif %}

            {% for i in paginator.page_range %}
                {% if page_obj.number == i %}
                    <li class="page-item active" aria-current="page"><span class="page-link">{{ i }}</span></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">Siguiente</a>
                </li>
            {% else %}
                <li class="page-item disabled"><span class="page-link">Siguiente</span></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
    <!-- FIN: Bloque de Paginación -->

</div>
{% endblock %}
