{% extends "micboard/base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Assignments</h1>
        <a class="btn btn-primary" href="{% url 'micboard:create_assignment' %}">
            New Assignment
        </a>
    </div>

    <!-- Assignments Table -->
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" aria-label="Assignments">
                <thead class="table-light">
                    <tr>
                        <th scope="col">Performer</th>
                        <th scope="col">Wireless Unit</th>
                        <th scope="col">Monitoring Group</th>
                        <th scope="col">Priority</th>
                        <th scope="col">Status</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody hx-get="{% url 'micboard:assignment_rows' %}?page={{ page_obj.number|default:1 }}" hx-trigger="every 5s" hx-swap="innerHTML">
                    {% include "micboard/partials/assignment_rows.html" %}
                </tbody>
            </table>
        </div>
    </div>
    {% if page_obj.has_other_pages %}
    <nav aria-label="Assignment pagination" class="mt-3">
        <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 }}">Previous</a></li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">Previous</span></li>
            {% endif %}
            <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
            {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">Next</span></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}