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

{% block page_title %}Notifications{% endblock %}

{% block content %}
<div class="">

    {# Page header #}
    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div>
            <h2 class="text-xl font-semibold text-stone-900 tracking-tight">Notifications</h2>
            <p class="text-sm text-stone-500 mt-1">{{ total }} notification{{ total|pluralize }} total</p>
        </div>
        <div class="flex items-center gap-2">
            <a
                href="{% url 'notifications:preferences' %}"
                class="inline-flex items-center gap-1.5 px-4 py-2 text-[13px] font-semibold text-stone-700 bg-white border border-stone-200 rounded-full hover:border-stone-300 hover:bg-stone-50 transition-all duration-150 shadow-[0_1px_2px_rgba(23,20,18,0.05)]"
            >
                <svg class="w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Preferences
            </a>
            <button
                hx-post="{% url 'notifications:mark_all_read' %}"
                hx-target="#notification-history-list"
                hx-swap="innerHTML"
                hx-confirm="Mark all notifications as read?"
                class="inline-flex items-center gap-1.5 px-4 py-1.5 text-[13px] font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150 cursor-pointer"
            >
                <svg class="w-4 h-4" 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>
                Mark all read
            </button>
        </div>
    </div>

    {# Filters bar #}
    <div class="bg-white border border-stone-200 rounded-xl p-4 mb-4 shadow-[0_1px_2px_rgba(23,20,18,0.05)]">
        <form
            hx-get="{% url 'notifications:list' %}"
            hx-target="#notification-history-list"
            hx-swap="innerHTML"
            hx-push-url="true"
            class="flex items-center gap-3 flex-wrap"
        >
            <div class="flex items-center gap-2">
                <label for="filter-event-type" class="text-xs font-semibold text-stone-500 uppercase tracking-wider">Type</label>
                <select
                    name="event_type"
                    id="filter-event-type"
                    class="text-[13px] text-stone-700 bg-stone-50 border border-stone-200 rounded-lg pl-3 pr-7 py-1.5 focus:outline-none focus:ring-2 focus:ring-orange-200 focus:border-orange-500 transition-all duration-150 appearance-none"
                    style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2378716C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right 8px center;"
                    hx-get="{% url 'notifications:list' %}"
                    hx-target="#notification-history-list"
                    hx-swap="innerHTML"
                    hx-include="[name='read_status']"
                    hx-push-url="true"
                >
                    <option value="">All types</option>
                    {% for value, label in event_types %}
                    <option value="{{ value }}" {% if value == selected_event_type %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-center gap-2">
                <label for="filter-read-status" class="text-xs font-semibold text-stone-500 uppercase tracking-wider">Status</label>
                <select
                    name="read_status"
                    id="filter-read-status"
                    class="text-[13px] text-stone-700 bg-stone-50 border border-stone-200 rounded-lg pl-3 pr-7 py-1.5 focus:outline-none focus:ring-2 focus:ring-orange-200 focus:border-orange-500 transition-all duration-150 appearance-none"
                    style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2378716C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right 8px center;"
                    hx-get="{% url 'notifications:list' %}"
                    hx-target="#notification-history-list"
                    hx-swap="innerHTML"
                    hx-include="[name='event_type']"
                    hx-push-url="true"
                >
                    <option value="" {% if not selected_read_status %}selected{% endif %}>All</option>
                    <option value="unread" {% if selected_read_status == "unread" %}selected{% endif %}>Unread</option>
                    <option value="read" {% if selected_read_status == "read" %}selected{% endif %}>Read</option>
                </select>
            </div>
            {% if selected_event_type or selected_read_status %}
            <a
                href="{% url 'notifications:list' %}"
                class="text-xs font-semibold text-orange-600 hover:text-orange-700 transition-colors duration-150 ml-1"
            >
                Clear filters
            </a>
            {% endif %}
        </form>
    </div>

    {# Notification list container #}
    <div id="notification-history-list" class="bg-white border border-stone-200 rounded-xl overflow-hidden shadow-[0_1px_2px_rgba(23,20,18,0.05)]">
        {% include "notifications/partials/history_list.html" %}
    </div>

</div>
{% endblock %}