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

{% block title %}IT Request Forms{% endblock %}

{% block itr_content %}
{% comment %}
The company selector in the dashboard sidebar chooses the group — this page has
no selector of its own.  The sidebar writes localStorage.selectedGroupId and
then fires `groupChanged` on the document; that re-renders the frame for the
newly chosen group.

The filter drops the event when it names the group already on screen: the
sidebar also replays its stored selection shortly after every page load, which
would otherwise re-fetch the page we are already looking at.
{% endcomment %}
<div hx-get="{% url 'it_requests:catalog' %}"
     hx-trigger="groupChanged[event.detail.groupId != '{{ current_group_id|default_if_none:'' }}'] from:document"
     hx-vals='js:{group_id: localStorage.getItem("selectedGroupId") || ""}'
     hx-push-url="true"></div>

<div class="itr-page-header">
    <h1>IT Request Forms</h1>
</div>

{% if forms %}
<div class="itr-catalog">
    {% for form in forms %}
    <a class="itr-form-card"
       href="{% url 'it_requests:submit' form.id %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}">
        <h3 class="itr-form-card-title">{{ form.name }}</h3>
        {% if form.description %}
        <p class="itr-form-card-desc">{{ form.description }}</p>
        {% endif %}
        <div class="itr-form-card-meta">
            {% if form.is_universal %}
            <span class="itr-badge itr-badge-universal">Universal</span>
            {% else %}
            <span class="itr-badge itr-badge-tenant">Tenant</span>
            {% endif %}
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="itr-empty-state">
    <p>No forms available{% if current_group_id %} for this group{% endif %}.</p>
</div>
{% endif %}

<div style="margin-top: 32px; display: flex; gap: 16px; font-size: 0.88rem;">
    <a class="itr-btn itr-btn-secondary itr-btn-sm"
       href="{% url 'it_requests:my_requests' %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}">
        My Requests
    </a>
    {% if it_requests_user_groups %}
    {% for group in it_requests_user_groups %}
    {% if 'it-forms-admin' in group.roles %}
    <a class="itr-btn itr-btn-secondary itr-btn-sm"
       href="{% url 'it_requests:leadership' %}?group_id={{ group.id }}">
        Leadership Dashboard
    </a>
    {% endif %}
    {% endfor %}
    {% endif %}
</div>
{% endblock %}