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

{% block title %}My Requests{% endblock %}

{% block itr_content %}
<div class="itr-page-header">
    <h1>My Requests</h1>
    <a href="{% url 'it_requests:catalog' %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}"
       class="itr-btn itr-btn-secondary itr-btn-sm">New Request</a>
</div>

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

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