{% extends "base.html" %}
{% load humanize %}

{% block title %}{{ message.sender_name }} - Inbox - {{ workspace.name }} - Redea Social{% endblock %}

{% block extra_head %}
<style>
    .inbox-detail-full { margin: -1.5rem; height: calc(100% + 3rem); }
    .badge-pill {
        display: inline-flex; align-items: center; gap: 3px;
        font-size: 10px; font-weight: 600; padding: 2px 7px;
        border-radius: 9999px; letter-spacing: 0.01em; white-space: nowrap;
    }
    .badge-sentiment-positive { background: var(--success-50); color: var(--success-700); }
    .badge-sentiment-neutral  { background: var(--surface-2); color: var(--text-tertiary); }
    .badge-sentiment-negative { background: var(--error-50); color: var(--error-700); }
    .badge-type { background: var(--surface-2); color: var(--text-secondary); }
    .badge-status-unread  { background: var(--info-50); color: var(--info-700); }
    .badge-status-open    { background: var(--warning-50); color: var(--warning-700); }
    .badge-status-resolved { background: var(--success-50); color: var(--success-700); }
    .badge-status-archived { background: var(--surface-2); color: var(--text-ghost); }
    .sla-countdown { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
    .sla-ok { color: var(--text-tertiary); }
    .sla-warn { color: var(--warning-700); }
    .sla-overdue { color: var(--error-700); }
</style>
{% endblock %}

{% block content %}
<div class="inbox-detail-full" x-data="{
    slaTarget: {{ sla_config.target_response_minutes|default:'0' }},
    getSlaClass(receivedAt) {
        if (!this.slaTarget) return '';
        const deadline = new Date(new Date(receivedAt).getTime() + this.slaTarget * 60000);
        const remaining = deadline - new Date();
        if (remaining < 0) return 'sla-overdue';
        if (remaining < this.slaTarget * 60000 * 0.25) return 'sla-warn';
        return 'sla-ok';
    },
    formatSla(receivedAt) {
        if (!this.slaTarget) return '';
        const deadline = new Date(new Date(receivedAt).getTime() + this.slaTarget * 60000);
        const diff = deadline - new Date();
        const mins = Math.floor(Math.abs(diff) / 60000);
        if (diff < 0) return mins < 60 ? mins + 'm overdue' : Math.floor(mins/60) + 'h overdue';
        return mins < 60 ? mins + 'm left' : Math.floor(mins/60) + 'h ' + (mins%60) + 'm left';
    }
}">
    <!-- Back link -->
    <div class="px-5 py-2.5 border-b border-stone-100 flex-shrink-0">
        <a href="{% url 'inbox:feed' workspace_id=workspace.id %}"
           class="inline-flex items-center gap-1.5 text-[13px] font-medium text-stone-500 hover:text-stone-700 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            Back to Inbox
        </a>
    </div>
    <div id="inbox-detail-panel" class="flex-1" style="height: calc(100% - 41px);">
        {% include "inbox/partials/_message_panel.html" %}
    </div>
</div>
{% endblock %}