{% extends 'base.html' %}

{% block main %}

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Notifications</h1>
              <p class="ax-page-head__subtitle">The notification panel &amp; item vocabulary — typed icon chips, unread rows, actionable items and a header dropdown. Distinct from transient toasts.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/pages/notifications/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/><path d="M2 12l5 5m5 -5l5 -5"/></svg>
                <span class="ax-btn__label">Full inbox</span>
              </a>
              <button type="button" class="ax-btn ax-btn--primary"
                x-data @click="$toast({ msg:'Push notification sent', tone:'success' })">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg>
                <span class="ax-btn__label">Send test push</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- Header dropdown panel -->
          <section class="ax-card ax-col--5" role="region" aria-label="Header notification panel">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Overlay</span>
                <h2 class="ax-card__title">Header panel</h2>
                <p class="ax-card__subtitle">The bell dropdown — header, tabs, list &amp; footer in one glass menu.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;" x-data="{ tab:'all', unread:2 }">
              <div class="ax-dropdown ax-notif__menu" style="position:static;inline-size:100%;max-inline-size:none;max-block-size:none;box-shadow:var(--ax-shadow-md);">
                <!-- panel header -->
                <div class="ax-cluster ax-cluster--between" style="padding:var(--ax-space-3) var(--ax-space-3) var(--ax-space-1);flex-wrap:nowrap;">
                  <b style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Notifications <span class="ax-badge ax-badge--soft ax-badge--accent ax-num" x-show="unread>0" x-text="unread"></span></b>
                  <button type="button" class="ax-notif__mark-all" @click="unread=0">Mark all read</button>
                </div>
                <!-- tabs -->
                <div class="ax-notif__tabs">
                  <button type="button" class="ax-notif__tab" :class="{ 'is-active': tab==='all' }" @click="tab='all'">All</button>
                  <button type="button" class="ax-notif__tab" :class="{ 'is-active': tab==='unread' }" @click="tab='unread'">Unread</button>
                  <button type="button" class="ax-notif__tab" :class="{ 'is-active': tab==='mentions' }" @click="tab='mentions'">Mentions</button>
                </div>
                <!-- list -->
                <ul class="ax-notif__list" style="padding:0 var(--ax-space-2) var(--ax-space-2);">
                  <li class="ax-notif__row is-unread" x-show="tab!=='mentions'">
                    <span class="ax-notif__chip" style="color:var(--ax-viz-violet);background:color-mix(in oklab,var(--ax-viz-violet) 16%,transparent);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"/><path d="M9 10h.01"/><path d="M12 10h.01"/><path d="M15 10h.01"/></svg></span>
                    <span class="ax-notif__body"><span class="ax-notif__title">Tomás Herrera</span><span class="ax-notif__text">Moved deal “Brightway Retail” to Negotiation</span><span class="ax-notif__time">12m ago</span></span>
                    <span class="ax-notif__dot" style="background:var(--ax-accent);"></span>
                  </li>
                  <li class="ax-notif__row is-unread">
                    <span class="ax-notif__chip" style="color:var(--ax-viz-cyan);background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z"/></svg></span>
                    <span class="ax-notif__body"><span class="ax-notif__title">Lena Brandt</span><span class="ax-notif__text">Mentioned you in “Design review”</span><span class="ax-notif__time">1h ago</span></span>
                    <span class="ax-notif__dot" style="background:var(--ax-accent);"></span>
                  </li>
                  <li class="ax-notif__row" x-show="tab==='all'">
                    <span class="ax-notif__chip ax-notif__chip--success"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7h13l-1.5 9a2 2 0 0 1 -2 1.5h-6a2 2 0 0 1 -2 -1.5z"/><path d="M9 11v-5a3 3 0 0 1 6 0v5"/></svg></span>
                    <span class="ax-notif__body"><span class="ax-notif__title">Order #10482</span><span class="ax-notif__text">Has shipped to Camila Rossi</span><span class="ax-notif__time">2h ago</span></span>
                  </li>
                  <li class="ax-notif__row" x-show="tab==='all'">
                    <span class="ax-notif__chip" style="color:var(--ax-text-subtle);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v5l3 3"/></svg></span>
                    <span class="ax-notif__body"><span class="ax-notif__title">Northwind Pulse</span><span class="ax-notif__text">Your weekly digest is ready</span><span class="ax-notif__time">1d ago</span></span>
                  </li>
                </ul>
                <!-- footer -->
                <div style="padding:var(--ax-space-1) var(--ax-space-2);border-block-start:1px solid var(--ax-border);">
                  <a class="ax-btn ax-btn--ghost ax-btn--block ax-btn--sm" href="/pages/notifications/"><span class="ax-btn__label">View all notifications</span></a>
                </div>
              </div>
            </div>
          </section>

          <!-- Item types -->
          <section class="ax-card ax-col--7" role="region" aria-label="Notification item types">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Anatomy</span>
                <h2 class="ax-card__title">Item types</h2>
                <p class="ax-card__subtitle">Each type pairs a tinted icon chip with a title, body &amp; timestamp.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <ul class="ax-notif__list" style="display:flex;flex-direction:column;gap:2px;">
                <li class="ax-notif__row">
                  <span class="ax-notif__chip" style="color:var(--ax-viz-cyan);background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z"/></svg></span>
                  <span class="ax-notif__body"><span class="ax-notif__title">Message <span class="ax-badge ax-badge--soft ax-badge--info" style="margin-inline-start:4px;">Message</span></span><span class="ax-notif__text">Marcus Reyes sent you a note about the deploy window</span><span class="ax-notif__time">9:42 AM</span></span>
                </li>
                <li class="ax-notif__row">
                  <span class="ax-notif__chip ax-notif__chip--success"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span>
                  <span class="ax-notif__body"><span class="ax-notif__title">Payment received <span class="ax-badge ax-badge--soft ax-badge--success" style="margin-inline-start:4px;">Billing</span></span><span class="ax-notif__text"><span class="ax-num">$312.00</span> from Camila Rossi cleared via Stripe</span><span class="ax-notif__time">8:15 AM</span></span>
                </li>
                <li class="ax-notif__row">
                  <span class="ax-notif__chip ax-notif__chip--warning"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0"/><path d="M12 16h.01"/></svg></span>
                  <span class="ax-notif__body"><span class="ax-notif__title">Low stock <span class="ax-badge ax-badge--soft ax-badge--warning" style="margin-inline-start:4px;">Inventory</span></span><span class="ax-notif__text">Brass Task Light is down to <span class="ax-num">22</span> units</span><span class="ax-notif__time">Yesterday</span></span>
                </li>
                <li class="ax-notif__row">
                  <span class="ax-notif__chip" style="color:var(--ax-danger-500);background:var(--ax-danger-50);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg></span>
                  <span class="ax-notif__body"><span class="ax-notif__title">Payment failed <span class="ax-badge ax-badge--soft ax-badge--danger" style="margin-inline-start:4px;">Alert</span></span><span class="ax-notif__text">Card charge for Daniel Cho was declined</span><span class="ax-notif__time">2d ago</span></span>
                </li>
                <li class="ax-notif__row">
                  <span class="ax-notif__chip" style="overflow:hidden;background:transparent;"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-pink) 18%,transparent);color:var(--ax-viz-pink);"><span class="ax-avatar__initials">PN</span></span></span>
                  <span class="ax-notif__body"><span class="ax-notif__title">Priya Nair <span class="ax-badge ax-badge--soft ax-badge--neutral" style="margin-inline-start:4px;">Mention</span></span><span class="ax-notif__text">Mentioned you in <span style="color:var(--ax-accent);">#analytics</span></span><span class="ax-notif__time">3d ago</span></span>
                </li>
              </ul>
            </div>
          </section>

          <!-- Actionable -->
          <section class="ax-card ax-col--6" role="region" aria-label="Actionable notifications">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Interactive</span>
                <h2 class="ax-card__title">With actions</h2>
                <p class="ax-card__subtitle">Inline accept / dismiss without leaving the panel.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);"
              x-data="{ items:[1,2], handle(i,act){ this.items=this.items.filter(x=>x!==i); $toast(act) } }">
              <template x-if="items.length===0">
                <div style="text-align:center;padding:var(--ax-space-6) 0;color:var(--ax-text-subtle);">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="margin-bottom:var(--ax-space-2);"><path d="M5 12l5 5l10 -10"/></svg>
                  <p style="margin:0;font-size:var(--ax-text-sm);">You're all caught up.</p>
                </div>
              </template>
              <div x-show="items.includes(1)" x-cloak x-transition class="ax-notif__row" style="background:var(--ax-surface-subtle);border-radius:var(--ax-radius-md);align-items:center;">
                <span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><span class="ax-avatar__initials">DO</span></span>
                <span class="ax-notif__body"><span class="ax-notif__title">Workspace invite</span><span class="ax-notif__text">Devon Okafor invited you to “Q3 Planning”</span></span>
                <span class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:nowrap;">
                  <button type="button" class="ax-btn ax-btn--primary ax-btn--sm" @click="handle(1,'Invite accepted')"><span class="ax-btn__label">Accept</span></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" @click="handle(1,'Invite declined')"><span class="ax-btn__label">Decline</span></button>
                </span>
              </div>
              <div x-show="items.includes(2)" x-cloak x-transition class="ax-notif__row" style="background:var(--ax-surface-subtle);border-radius:var(--ax-radius-md);align-items:center;">
                <span class="ax-notif__chip" style="color:var(--ax-viz-amber);background:color-mix(in oklab,var(--ax-viz-amber) 16%,transparent);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0"/><path d="M12 16h.01"/></svg></span>
                <span class="ax-notif__body"><span class="ax-notif__title">Review requested</span><span class="ax-notif__text">Hana Yılmaz needs sign-off on the June campaign</span></span>
                <span class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:nowrap;">
                  <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="handle(2,'Opened for review')"><span class="ax-btn__label">Review</span></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Dismiss" @click="handle(2,'Dismissed')"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                </span>
              </div>
            </div>
          </section>

          <!-- States: empty / unread banner -->
          <section class="ax-card ax-col--6" role="region" aria-label="Notification banners and states">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Inline</span>
                <h2 class="ax-card__title">Banners</h2>
                <p class="ax-card__subtitle">Page-level notices that aren't toasts — persistent and dismissible.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <div class="ax-alert ax-alert--accent ax-alert--accent-edge" x-data="{ open:true }" x-show="open" x-cloak>
                <span class="ax-alert__icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 9h.01"/><path d="M11 12h1v4h1"/></svg></span>
                <div class="ax-alert__content"><p class="ax-alert__title">New analytics are live</p><p class="ax-alert__message">Cohort retention has landed on the reports page.</p></div>
                <button type="button" class="ax-alert__dismiss" @click="open=false" aria-label="Dismiss banner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
              </div>
              <div class="ax-alert ax-alert--warning ax-alert--accent-edge">
                <span class="ax-alert__icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0"/><path d="M12 16h.01"/></svg></span>
                <div class="ax-alert__content"><p class="ax-alert__title">Card expiring soon</p><p class="ax-alert__message">Visa ending 7045 expires next month. Update it to avoid interruptions.</p>
                  <div class="ax-alert__actions"><button type="button" class="ax-btn ax-btn--warning ax-btn--sm ax-btn--solid"><span class="ax-btn__label">Update card</span></button></div>
                </div>
              </div>
              <div class="ax-alert ax-alert--neutral" style="align-items:center;justify-content:center;text-align:center;">
                <div class="ax-alert__content" style="text-align:center;">
                  <p class="ax-alert__message" style="margin:0;">No new system notifications.</p>
                </div>
              </div>
            </div>
          </section>

        </div>
{% endblock %}