{% load humanize %}
{# HTMX partial - loaded into the notification drawer panel #}

<div class="flex items-center justify-between px-5 pt-5 pb-3">
    <h2 class="text-[15px] font-semibold text-stone-900 tracking-tight">Notifications</h2>
    {% if notifications %}
    <button
        hx-post="{% url 'notifications:mark_all_read' %}"
        hx-target="#notification-drawer-content"
        hx-swap="innerHTML"
        class="text-xs font-semibold text-orange-600 hover:text-orange-700 transition-colors duration-150 cursor-pointer"
    >
        Mark all read
    </button>
    {% endif %}
</div>

<div class="flex-1 overflow-y-auto overscroll-contain" style="max-height: calc(100vh - 180px);">
    {% if notifications %}
    <ul class="divide-y divide-stone-100">
        {% for n in notifications %}
        <li
            id="notif-{{ n.id }}"
            class="group relative {% if not n.is_read %}bg-orange-50/50{% endif %} hover:bg-stone-50 transition-colors duration-150"
        >
            <a
                href="{% if n.data.action_url %}{{ n.data.action_url }}{% else %}{% url 'notifications:list' %}{% endif %}"
                {% if not n.is_read %}
                hx-post="{% url 'notifications:mark_as_read' n.id %}"
                hx-target="#notif-{{ n.id }}"
                hx-swap="outerHTML"
                hx-trigger="click"
                {% endif %}
                class="flex gap-3 px-5 py-3.5 cursor-pointer"
            >
                {# Event type icon #}
                <div class="flex-shrink-0 mt-0.5">
                    {% if n.event_type == "post_approved" %}
                    <div class="w-8 h-8 rounded-lg bg-green-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    {% elif n.event_type == "post_rejected" or n.event_type == "post_failed" %}
                    <div class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </div>
                    {% elif n.event_type == "post_published" %}
                    <div class="w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                    </div>
                    {% elif n.event_type == "new_inbox_message" %}
                    <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
                    </div>
                    {% elif n.event_type == "social_account_disconnected" %}
                    <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                    </div>
                    {% elif n.event_type == "post_submitted" or n.event_type == "post_changes_requested" %}
                    <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    </div>
                    {% else %}
                    <div class="w-8 h-8 rounded-lg bg-stone-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-stone-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    </div>
                    {% endif %}
                </div>

                <div class="flex-1 min-w-0">
                    <p class="text-[13px] font-semibold text-stone-900 leading-snug truncate">{{ n.title }}</p>
                    {% if n.body %}
                    <p class="text-[12px] text-stone-500 leading-relaxed mt-0.5 line-clamp-2">{{ n.body }}</p>
                    {% endif %}
                    <p class="text-[11px] text-stone-400 mt-1 font-medium tabular-nums">{{ n.created_at|timesince }} ago</p>
                </div>

                {% if not n.is_read %}
                <div class="flex-shrink-0 mt-2">
                    <div class="w-2 h-2 rounded-full bg-orange-500"></div>
                </div>
                {% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <div class="flex flex-col items-center justify-center py-16 px-6">
        <div class="w-12 h-12 rounded-xl bg-stone-100 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
        </div>
        <p class="text-sm font-medium text-stone-500">All caught up</p>
        <p class="text-xs text-stone-400 mt-1">No notifications yet</p>
    </div>
    {% endif %}
</div>

{% if notifications %}
<div class="px-5 py-3 border-t border-stone-100 bg-white">
    <a
        href="{% url 'notifications:list' %}"
        class="block text-center text-xs font-semibold text-orange-600 hover:text-orange-700 transition-colors duration-150"
    >
        View all notifications
    </a>
</div>
{% endif %}