{% extends 'base.html' %}
{% load static %}

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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'vision_it_request_forms/css/it_requests.css' %}">
<script src="{% static 'js/htmx.min.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="itr-page-header">
    <h1>Leadership Dashboard</h1>
    {% if user_groups %}
    <div class="itr-group-selector">
        <label for="group-select">Group:</label>
        <select id="group-select"
                onchange="window.location.href='?group_id='+this.value+'{% if active_status_filter %}&status={{ active_status_filter }}{% endif %}'">
            {% for group in 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 #}
<div class="itr-filters">
    <a href="?{% 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="?status={{ value }}{% if current_group_id %}&group_id={{ current_group_id }}{% endif %}"
       class="itr-filter-pill {% if active_status_filter == value %}active{% endif %}">{{ label }}</a>
    {% endfor %}
</div>

<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-swap="innerHTML"
     hx-headers='{"Authorization": "Bearer {{ api_bearer_token }}"}'>
    <div class="itr-loading">Loading&hellip;</div>
</div>
{% endblock %}