{% extends 'vision_it_request_forms/_page.html' %}

{% block title %}Leadership Dashboard{% endblock %}

{% block itr_content %}
<div class="itr-page-header">
    <h1>Leadership Dashboard</h1>
    {% if it_requests_user_groups %}
    <div class="itr-group-selector">
        <label for="group-select">Group:</label>
        {# htmx appends the selected group_id to this URL and swaps the frame #}
        <select id="group-select"
                name="group_id"
                hx-get="{% url 'it_requests:leadership' %}{% if active_status_filter %}?status={{ active_status_filter }}{% endif %}"
                hx-trigger="change"
                hx-push-url="true">
            {% for group in it_requests_user_groups %}
            {% if 'it-forms-admin' in group.roles %}
            <option value="{{ group.id }}"{% if current_group_id == group.id %} selected{% endif %}>
                {{ group.name }}
            </option>
            {% endif %}
            {% endfor %}
        </select>
    </div>
    {% endif %}
</div>

{# Status filter pills — boosted by the frame, so they swap #itr-main #}
<div class="itr-filters">
    <a href="{% url 'it_requests:leadership' %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}"
       class="itr-filter-pill {% if not active_status_filter %}active{% endif %}">All</a>
    {% for value, label in status_choices %}
    <a href="{% url 'it_requests:leadership' %}?status={{ value }}{% if current_group_id %}&amp;group_id={{ current_group_id }}{% endif %}"
       class="itr-filter-pill {% if active_status_filter == value %}active{% endif %}">{{ label }}</a>
    {% endfor %}
</div>

{# hx-target="this": the table loads into this container, not into the frame #}
<div id="leadership-submissions-container"
     hx-get="{% url 'it_requests:leadership_partial' %}?{% if current_group_id %}group_id={{ current_group_id }}&amp;{% endif %}{% if active_status_filter %}status={{ active_status_filter }}{% endif %}"
     hx-trigger="load"
     hx-target="this"
     hx-swap="innerHTML"
     hx-headers='{"Authorization": "Bearer {{ it_requests_api_bearer_token }}"}'>
    <div class="itr-loading">Loading&hellip;</div>
</div>
{% endblock %}