{% 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' %}">
{% 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>

{% if submissions %}
<div class="itr-table-wrapper">
    <table class="itr-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Requester</th>
                <th>Form</th>
                <th>Group</th>
                <th>Status</th>
                <th>Submitted</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for sub in submissions %}
            <tr>
                <td style="color:#aab4bf;font-size:0.8rem;">{{ sub.id }}</td>
                <td>
                    {{ sub.user_display_name }}
                    {% if sub.user_email %}
                    <br><span style="font-size:0.78rem;color:#8a96a3;">{{ sub.user_email }}</span>
                    {% endif %}
                </td>
                <td>{{ sub.form_template_name }}</td>
                <td>{{ sub.group_name }}</td>
                <td>
                    <span class="itr-status itr-status-{{ sub.status }}">
                        {{ sub.status_display }}
                    </span>
                </td>
                <td>
                    {% if sub.submitted_at %}
                        {{ sub.submitted_at|date:"M j, Y" }}
                    {% else %}
                        <span style="color:#aab4bf">Draft</span>
                    {% endif %}
                </td>
                <td>
                    {% if sub.status == 'pending_approval' %}
                    {# Inline approve/reject form — standard POST, no JS required #}
                    <div class="itr-decision-row">
                        <form method="post"
                              action="{% url 'it_requests:leadership_decide' sub.id %}"
                              style="display:inline;">
                            {% csrf_token %}
                            <input type="hidden" name="decision" value="approved">
                            <button type="submit" class="itr-btn itr-btn-sm itr-btn-approve"
                                    title="Approve this request">
                                Approve
                            </button>
                        </form>
                        <button type="button"
                                class="itr-btn itr-btn-sm itr-btn-reject"
                                onclick="document.getElementById('reject-form-{{ sub.id }}').style.display='block';this.style.display='none';">
                            Reject
                        </button>
                        {# Reject panel (hidden by default, requires a comment) #}
                        <div id="reject-form-{{ sub.id }}"
                             class="itr-reject-panel"
                             style="display:none; margin-top:8px;">
                            <form method="post"
                                  action="{% url 'it_requests:leadership_decide' sub.id %}">
                                {% csrf_token %}
                                <input type="hidden" name="decision" value="rejected">
                                <textarea name="comment"
                                          rows="2"
                                          placeholder="Reason for rejection (optional)"
                                          class="itr-reject-comment"></textarea>
                                <div style="display:flex;gap:8px;margin-top:6px;">
                                    <button type="submit" class="itr-btn itr-btn-sm itr-btn-reject">
                                        Confirm Reject
                                    </button>
                                    <button type="button"
                                            class="itr-btn itr-btn-sm itr-btn-secondary"
                                            onclick="document.getElementById('reject-form-{{ sub.id }}').style.display='none';">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="itr-empty-state">
    <p>No submissions{% if active_status_filter %} with status "{{ active_status_filter }}"{% endif %} found.</p>
</div>
{% endif %}
{% endblock %}