{% extends "base.html" %}
{% load common_extras %}
{% block title %}Notifications · DemandTrail Messaging{% endblock %}

{% block page_header %}<h1 class="page-title">Notifications</h1>{% endblock %}

{% block content %}
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <p class="text-sm" style="color: var(--text-secondary);">
        {% if unread_notification_count %}{{ unread_notification_count }} unread{% else %}All caught up{% endif %}
    </p>
    <div class="flex items-center gap-3">
        {% comment %}
          The single preference issue #7 allows. It lives here rather than under
          /accounts/preferences/, which is another issue's stub ("#31
          follow-up") — and when that page is built, adopting this control is a
          one-line {% include %}.
        {% endcomment %}
        <form hx-post="{% url 'notifications:email_preference' %}" hx-trigger="change" hx-swap="none">
            <label class="switch-field">
                <span class="switch">
                    <input type="checkbox" role="switch" name="email_enabled" {% if email_enabled %}checked{% endif %}>
                    <span class="switch-track"></span>
                </span>
                <span>Email me</span>
            </label>
        </form>
        {% if unread_notification_count %}
        <button type="button" class="btn-pill-secondary btn-pill-sm"
                hx-post="{% url 'notifications:mark_all_read' %}"
                hx-swap="none">Mark all read</button>
        {% endif %}
    </div>
</div>

{% comment %}
  Read state is a view — all, unread, read — so it is the page's underline tabs;
  the type is a list, so it is the Filter popover, several at once (HANDOFF §2.2).
  One form, so the two always travel together.
{% endcomment %}
<div class="mb-4">
<form id="notification-filters" x-ref="filters" class="list-toolbar"
      x-data="{
        readState: '{{ selected_read_state|escapejs }}',
        filters: {{ filters|json_attr }},
        reload() { this.$nextTick(() => this.$refs.filters.dispatchEvent(new Event('filters-changed'))); }
      }"
      hx-get="{% url 'notifications:list' %}" hx-target="#notification-history" hx-swap="innerHTML"
      hx-trigger="filters-changed" @submit.prevent>
    <input type="hidden" name="read_state" x-model="readState">
    <div class="tabs tabs-inline" role="tablist" aria-label="Read state">
        {% for value, label in read_states %}
        <button type="button" role="tab" class="tab" aria-controls="notification-history"
                :aria-selected="readState === '{{ value }}' ? 'true' : 'false'"
                @click="readState = '{{ value }}'; reload()">{{ label }}</button>
        {% endfor %}
    </div>
    {% filter_popover groups=filter_groups onchange="reload()" noun="notification" %}
    {% filter_chips groups=filter_groups onchange="reload()" %}
</form>
</div>

{% comment %}
  The container re-fetches itself when anything is marked read, anywhere —
  including from the bell dropdown, since notificationsChanged bubbles to body.
  hx-include carries the two filter selects and the hidden page input from
  _history_list.html, so the refresh returns the list the reader was actually
  looking at rather than an unfiltered first page. That state lives here, which
  is why the write view does not try to rebuild it.
{% endcomment %}
<div id="notification-history" class="rounded-xl border overflow-hidden"
     hx-get="{% url 'notifications:list' %}"
     hx-trigger="notificationsChanged from:body"
     hx-target="this"
     hx-swap="innerHTML"
     hx-include="[name='event_type'],[name='read_state'],[name='page']"
     style="background: var(--surface-0); border-color: var(--border);">
    {% include "notifications/partials/_history_list.html" %}
</div>
{% endblock %}