{% extends 'admin/base_admin.html' %}

{% block title %}Escalations | {{ request.user.company.name }} | ChatLab{% endblock %}
{% block admin_dash_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Escalations</h2>
        <p class="page-subtitle">Visitor conversations waiting to be claimed by an agent.</p>
    </div>
</div>

{% if escalations %}
    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
        {% for e in escalations %}
            <div class="glass-card" style="padding: 1rem 1.25rem; border-radius: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;">
                <div style="flex: 1; min-width: 0;">
                    <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem;">
                        Visitor: <code>{{ e.visitor_id|default:"—" }}</code>
                        · {{ e.created_at|date:"M j, H:i" }}
                    </div>
                    <div style="font-size: 0.95rem;">{{ e.message }}</div>
                </div>
                <form method="post" action="{% url 'admin_claim_escalation' e.pk %}" style="margin: 0;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-primary" style="padding: 0.45rem 1rem; font-size: 0.85rem; border-radius: 0;">
                        Claim
                    </button>
                </form>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="glass-card" style="padding: 2rem; border-radius: 0; text-align: center; color: var(--text-muted);">
        No pending escalations.
    </div>
{% endif %}
{% endblock %}