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

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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'vision_it_request_forms/css/it_requests.css' %}">
{% endblock %}

{% block content %}
<div class="itr-page-header">
    <h1>IT Request Forms</h1>

    {% if user_groups %}
    <div class="itr-group-selector">
        <label for="group-select">Viewing as:</label>
        <select id="group-select" onchange="window.location.href='?group_id='+this.value">
            <option value="">All universal forms</option>
            {% for group in user_groups %}
            <option value="{{ group.id }}"{% if current_group_id == group.id %} selected{% endif %}>
                {{ group.name }}
            </option>
            {% endfor %}
        </select>
    </div>
    {% endif %}
</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 user_groups %}
    {% for group in 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 %}