{% extends "tasks/base.html" %}
{% block title %}Approvals — Staff Panel{% endblock %}
{% block topbar_title %}Approval Queue{% endblock %}
{% block content %}
<div class="s-card s-card-pad">
    <div class="s-card-header">
        <div><div class="s-card-title">Pending Approvals</div><div class="s-card-sub">{{ pending_count }} awaiting action</div></div>
    </div>
    <div class="s-table-wrap">
        <table class="s-table">
            <thead><tr><th>Module</th><th>Action</th><th>Summary</th><th>Requested By</th><th>Date</th><th>Status</th><th></th></tr></thead>
            <tbody>
                {% for a in approvals %}
                <tr>
                    <td style="font-size:11px;">{{ a.module }}</td>
                    <td style="font-size:11px;">{{ a.action }}</td>
                    <td style="font-size:12px;">{{ a.summary }}</td>
                    <td style="font-size:12px;">{{ a.requested_by.get_full_name|default:"System" }}</td>
                    <td style="font-size:11px;color:var(--s-text3);">{{ a.created_at|date:"d M Y" }}</td>
                    <td><span class="s-badge {% if a.status == 'approved' %}s-badge-green{% elif a.status == 'rejected' %}s-badge-red{% else %}s-badge-amber{% endif %}">{{ a.get_status_display }}</span></td>
                    <td>
                        {% if a.status == 'pending' %}
                        <div style="display:flex;gap:6px;">
                            <form method="post" action="{% url 'task_management:approval_action' a.id %}">{% csrf_token %}<input type="hidden" name="action" value="approve"><button class="s-btn s-btn-sm s-btn-success">Approve</button></form>
                            <form method="post" action="{% url 'task_management:approval_action' a.id %}">{% csrf_token %}<input type="hidden" name="action" value="reject"><button class="s-btn s-btn-sm s-btn-outline">Reject</button></form>
                        </div>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="7"><div class="s-empty"><p>No approval requests yet.</p></div></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}