{% comment %}
HTMX partial — loaded by LeadershipListPartialView into #leadership-submissions-container.

The wrapper re-declares the frame target: the container targets itself, while
the decision forms in here navigate, so they must aim at #itr-main again
rather than swapping a whole page into the table container.

Context:
  submissions         — list of submission dicts from the API
  current_group_id    — int or None
  active_status_filter — str
{% endcomment %}
<div class="itr-leadership-submissions" hx-target="#itr-main" hx-swap="outerHTML show:none">
{% 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' %}
                    <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>
                        <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 %}
</div>