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

{% block title %}My Requests{% 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>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 #}
<div class="itr-filters">
    <a href="?{% 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="?status={{ value }}{% if current_group_id %}&group_id={{ current_group_id }}{% endif %}"
       class="itr-filter-pill {% if current_status == value %}active{% endif %}">{{ label }}</a>
    {% endfor %}
</div>

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