{# Notification list items -- HTMX partial #}
{% if notifications %}
{% for n in notifications %}
<div class="flex items-start gap-2 px-3 py-2 hover:bg-[#21262d] border-b border-[#30363d]/50 {% if not n.read %}bg-[#161b22]{% endif %}">
    <div class="mt-0.5 flex-shrink-0">
        {% if n.variant == "error" %}
        <i data-lucide="alert-circle" class="w-4 h-4 text-red-400"></i>
        {% elif n.variant == "warning" %}
        <i data-lucide="alert-triangle" class="w-4 h-4 text-yellow-400"></i>
        {% elif n.variant == "success" %}
        <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i>
        {% else %}
        <i data-lucide="{{ n.icon }}" class="w-4 h-4 text-blue-400"></i>
        {% endif %}
    </div>
    <div class="flex-1 min-w-0">
        {% if n.link %}
        <a href="{{ n.link }}" class="text-sm font-medium hover:text-blue-400 block truncate">{{ n.title }}</a>
        {% else %}
        <div class="text-sm font-medium truncate">{{ n.title }}</div>
        {% endif %}
        <div class="text-xs text-[#8b949e] truncate">{{ n.message }}</div>
    </div>
    {% if not n.read %}
    <button hx-post="/api/notifications/{{ n.id }}/read"
            hx-swap="none"
            class="flex-shrink-0 mt-0.5 w-2 h-2 rounded-full bg-blue-500 hover:bg-blue-400"
            title="Mark as read">
    </button>
    {% endif %}
</div>
{% endfor %}
{% else %}
<div class="px-3 py-8 text-center text-sm text-[#8b949e]">
    <i data-lucide="bell-off" class="w-6 h-6 mx-auto mb-2 opacity-50"></i>
    <div>No notifications</div>
</div>
{% endif %}