{% 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">List Groups</h1>
              <p class="ax-page-head__subtitle">Hairline-separated rows — bordered, flush, with badges, linked and actionable with controls.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/ui/pagination/">
                <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="M4 6h6"/><path d="M14 6h6"/><path d="M4 12h6"/><path d="M14 12h6"/><path d="M4 18h6"/><path d="M14 18h6"/></svg>
                <span class="ax-btn__label">Pagination</span>
              </a>
            </div>
          </div>
        </div>

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

          <!-- ═══════ BORDERED + WITH BADGES ═══════ -->
          <section class="ax-card ax-col--6" role="region" aria-label="Bordered list with badges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Bordered · badges</span>
                <h2 class="ax-card__title">Project statuses</h2>
                <p class="ax-card__subtitle">Trailing badges carry the state of each row.</p>
              </div>
            </div>
            <ul class="ax-list" style="border-top:1px solid var(--ax-border);">
              <li class="ax-list__row">
                <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);">BR</span></span>
                <span class="ax-list__content"><span class="ax-list__title">Brightway Retail rollout</span><span class="ax-list__meta">Due in 4 days · Marcus Reyes</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--success"><span class="ax-badge__dot"></span>On track</span></span>
              </li>
              <li class="ax-list__row">
                <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);">CC</span></span>
                <span class="ax-list__content"><span class="ax-list__title">Cedar &amp; Co. onboarding</span><span class="ax-list__meta">Due tomorrow · Lena Brandt</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--warning"><span class="ax-badge__dot"></span>At risk</span></span>
              </li>
              <li class="ax-list__row">
                <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-pink) 18%,transparent);color:var(--ax-viz-pink);">MH</span></span>
                <span class="ax-list__content"><span class="ax-list__title">Meridian Health migration</span><span class="ax-list__meta">Overdue 2 days · Devon Okafor</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--danger"><span class="ax-badge__dot"></span>Blocked</span></span>
              </li>
              <li class="ax-list__row">
                <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);">TS</span></span>
                <span class="ax-list__content"><span class="ax-list__title">Tidepool Studios refresh</span><span class="ax-list__meta">Shipped Jun 8 · Hana Yılmaz</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--neutral">Done</span></span>
              </li>
            </ul>
          </section>

          <!-- ═══════ WITH COUNT BADGES (navigation flavour) ═══════ -->
          <section class="ax-card ax-col--6" role="region" aria-label="List with count badges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Count badges · linked</span>
                <h2 class="ax-card__title">Inbox folders</h2>
                <p class="ax-card__subtitle">Linked rows highlight on hover; counts sit in pill badges.</p>
              </div>
            </div>
            <ul class="ax-list ax-list--linked" style="border-top:1px solid var(--ax-border);">
              <li><a class="ax-list__row is-active" href="#" aria-current="page">
                <span class="ax-list__leading" style="color:var(--ax-accent);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title" style="color:var(--ax-accent);">Inbox</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill ax-num">24</span></span>
              </a></li>
              <li><a class="ax-list__row" href="#">
                <span class="ax-list__leading"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9 6l9 -6l-9 -6z"/><path d="M21 9v6a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-6"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title">Starred</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill ax-num">6</span></span>
              </a></li>
              <li><a class="ax-list__row" href="#">
                <span class="ax-list__leading"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7l9 6l9 -6"/><path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2v-10"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title">Sent</span></span>
              </a></li>
              <li><a class="ax-list__row" href="#">
                <span class="ax-list__leading"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21v-16a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title">Drafts</span></span>
                <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill ax-num">2</span></span>
              </a></li>
              <li><a class="ax-list__row" href="#">
                <span class="ax-list__leading" style="color:var(--ax-danger-500);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title">Trash</span></span>
              </a></li>
            </ul>
          </section>

          <!-- ═══════ FLUSH + GROUPED ═══════ -->
          <section class="ax-card ax-col--6" role="region" aria-label="Flush grouped list">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Flush · grouped</span>
                <h2 class="ax-card__title">Team directory</h2>
                <p class="ax-card__subtitle">Section labels separate the roster; rows run edge to edge.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-block:0;">
              <ul class="ax-list">
                <li class="ax-list__group-label" role="presentation" style="padding-inline:0;">Leadership</li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:var(--ax-accent-wash);color:var(--ax-accent);">AS</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Ava Sutton</span><span class="ax-list__meta">Operations Lead</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--success"><span class="ax-badge__dot"></span>Online</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-pink) 18%,transparent);color:var(--ax-viz-pink);">TH</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Tomás Herrera</span><span class="ax-list__meta">Sales Director</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--danger"><span class="ax-badge__dot"></span>Busy</span></span>
                </li>
                <li class="ax-list__group-label" role="presentation" style="padding-inline:0;">Engineering</li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);">MR</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Marcus Reyes</span><span class="ax-list__meta">Engineering Manager</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--success"><span class="ax-badge__dot"></span>Online</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);">DO</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Devon Okafor</span><span class="ax-list__meta">Backend Engineer</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--warning"><span class="ax-badge__dot"></span>Away</span></span>
                </li>
              </ul>
            </div>
          </section>

          <!-- ═══════ ACTIONABLE (controls + selection) ═══════ -->
          <section class="ax-card ax-col--6" role="region" aria-label="Actionable task list"
            x-data="{ tasks:[
              {id:1, t:'Review empty-state illustrations', m:'Design · Lena Brandt', done:true},
              {id:2, t:'Ship invoice export to CSV', m:'Finance · Jonas Falk', done:false},
              {id:3, t:'Patch sidebar focus trap', m:'Engineering · Devon Okafor', done:false},
              {id:4, t:'Draft Q3 customer digest', m:'Marketing · Hana Yılmaz', done:false}
            ] }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Actionable · controls</span>
                <h2 class="ax-card__title">Today's tasks</h2>
                <p class="ax-card__subtitle"><span class="ax-num" x-text="tasks.filter(t=>t.done).length"></span> of <span class="ax-num" x-text="tasks.length"></span> complete</p>
              </div>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm">
                <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="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">Add</span>
              </button>
            </div>
            <ul class="ax-list ax-list--actionable" style="border-top:1px solid var(--ax-border);">
              <template x-for="task in tasks" :key="task.id">
                <li class="ax-list__row">
                  <span class="ax-list__leading">
                    <input type="checkbox" class="ax-checkbox" x-model="task.done" :aria-label="'Mark ' + task.t + ' complete'">
                  </span>
                  <span class="ax-list__content">
                    <span class="ax-list__title" :style="task.done ? 'text-decoration:line-through;color:var(--ax-text-subtle);' : ''" x-text="task.t"></span>
                    <span class="ax-list__meta" x-text="task.m"></span>
                  </span>
                  <span class="ax-list__trailing">
                    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" :aria-label="'Edit ' + task.t">
                      <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="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"/><path d="M13.5 6.5l4 4"/></svg>
                    </button>
                    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="tasks = tasks.filter(t => t.id !== task.id)" :aria-label="'Remove ' + task.t">
                      <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="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
                    </button>
                  </span>
                </li>
              </template>
              <li class="ax-list__row" x-show="tasks.length === 0" style="justify-content:center;color:var(--ax-text-subtle);">All clear — no tasks left.</li>
            </ul>
          </section>

          <!-- ═══════ SELECTABLE (single-select roving) ═══════ -->
          <section class="ax-card ax-col--12" role="region" aria-label="Selectable currency list">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Selectable · trailing meta</span>
                <h2 class="ax-card__title">Account balances</h2>
                <p class="ax-card__subtitle">Click a row to select it; the active currency is accent-washed.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;" x-data="{ sel:'USD' }">
              <ul class="ax-list ax-list--selectable" style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-lg);overflow:hidden;">
                <li class="ax-list__row" role="button" tabindex="0" :aria-selected="sel==='USD'" :class="{'is-selected':sel==='USD'}" @click="sel='USD'" @keydown.enter="sel='USD'" @keydown.space.prevent="sel='USD'">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);font-family:var(--ax-font-mono);">$</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">US Dollar</span><span class="ax-list__meta">USD · Primary</span></span>
                  <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$48,210.00</span>
                </li>
                <li class="ax-list__row" role="button" tabindex="0" :aria-selected="sel==='GBP'" :class="{'is-selected':sel==='GBP'}" @click="sel='GBP'" @keydown.enter="sel='GBP'" @keydown.space.prevent="sel='GBP'">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);font-family:var(--ax-font-mono);">£</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">British Pound</span><span class="ax-list__meta">GBP · Secondary</span></span>
                  <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">£21,540.00</span>
                </li>
                <li class="ax-list__row" role="button" tabindex="0" :aria-selected="sel==='EUR'" :class="{'is-selected':sel==='EUR'}" @click="sel='EUR'" @keydown.enter="sel='EUR'" @keydown.space.prevent="sel='EUR'">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);font-family:var(--ax-font-mono);">€</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Euro</span><span class="ax-list__meta">EUR · Secondary</span></span>
                  <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">€33,120.00</span>
                </li>
                <li class="ax-list__row" role="button" tabindex="0" :aria-selected="sel==='AUD'" :class="{'is-selected':sel==='AUD'}" @click="sel='AUD'" @keydown.enter="sel='AUD'" @keydown.space.prevent="sel='AUD'">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);font-family:var(--ax-font-mono);">A$</span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Australian Dollar</span><span class="ax-list__meta">AUD · Secondary</span></span>
                  <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">A$15,980.00</span>
                </li>
              </ul>
              <p style="margin:var(--ax-space-3) 0 0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Selected: <b class="ax-num" style="color:var(--ax-text-strong);" x-text="sel"></b></p>
            </div>
          </section>

        </div>
{% endblock %}