{% extends 'base.html' %}

{% block main %}
<div x-data="axCustomers()">
        <!-- ════════════════ 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">Customers</h1>
              <p class="ax-page-head__subtitle"><span class="ax-num">5,914</span> customers — <span class="ax-num">312</span> new this month, <span class="ax-num">48</span> VIP.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--ghost">
                <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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 11l5 5l5 -5"/><path d="M12 4l0 12"/></svg>
                <span class="ax-btn__label">Export</span>
              </button>
              <button type="button" class="ax-btn ax-btn--primary">
                <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 customer</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- ───── KPI STRIP ───── -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Total customers 5,914, up 6.2%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c1"><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="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>6.2%</span>
              </div>
              <div class="ax-kpi__label">Total customers</div>
              <div class="ax-kpi__value ax-num">5,914</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="New in last 30 days 312, up 11.8%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c2"><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="M8 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h3.5"/><path d="M16 19h6"/><path d="M19 16v6"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>11.8%</span>
              </div>
              <div class="ax-kpi__label">New · 30 days</div>
              <div class="ax-kpi__value ax-num">312</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Returning rate 64.5%, up 3.4%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c3"><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="M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>3.4%</span>
              </div>
              <div class="ax-kpi__label">Returning rate</div>
              <div class="ax-kpi__value ax-num">64.5%</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Average lifetime value $1,284, down 1.1%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c4"><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="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>1.1%</span>
              </div>
              <div class="ax-kpi__label">Avg. lifetime value</div>
              <div class="ax-kpi__value ax-num">$1,284</div>
            </div>
          </div>

          <!-- ───── CUSTOMERS TABLE ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Customers">

            <!-- toolbar -->
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);">
              <div style="position:relative;flex:1 1 240px;max-width:340px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ax-text-subtle);"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                <input type="search" class="ax-input" placeholder="Search name or email…" x-model="q" style="padding-inline-start:36px;" aria-label="Search customers">
              </div>
              <div class="ax-card__actions" style="flex-wrap:wrap;gap:var(--ax-space-2);">
                <select class="ax-select ax-select--sm" x-model="fStatus" aria-label="Filter by status" style="min-width:130px;">
                  <option value="">All segments</option>
                  <option value="VIP">VIP</option>
                  <option value="Active">Active</option>
                  <option value="New">New</option>
                  <option value="Blocked">Blocked</option>
                </select>
                <select class="ax-select ax-select--sm" x-model="fLocation" aria-label="Filter by location" style="min-width:140px;">
                  <option value="">All locations</option>
                  <option value="United States">United States</option>
                  <option value="United Kingdom">United Kingdom</option>
                  <option value="Brazil">Brazil</option>
                  <option value="Germany">Germany</option>
                  <option value="Sweden">Sweden</option>
                </select>
                <select class="ax-select ax-select--sm" x-model="sort" aria-label="Sort customers" style="min-width:150px;">
                  <option value="spend-desc">Top spenders</option>
                  <option value="spend-asc">Lowest spend</option>
                  <option value="orders-desc">Most orders</option>
                  <option value="recent">Most recent order</option>
                  <option value="az">Name: A–Z</option>
                </select>
              </div>
            </div>

            <!-- bulk bar -->
            <div x-show="selected.length" x-cloak x-transition
              style="display:flex;align-items:center;gap:var(--ax-space-3);margin:0 var(--ax-space-5) var(--ax-space-3);padding:var(--ax-space-2) var(--ax-space-4);background:var(--ax-accent-wash);border:1px solid var(--ax-accent);border-radius:var(--ax-radius-md);flex-wrap:wrap;">
              <b class="ax-num" style="color:var(--ax-accent);font-size:var(--ax-text-sm);"><span x-text="selected.length"></span> selected</b>
              <span style="width:1px;height:18px;background:var(--ax-border-strong);"></span>
              <button type="button" class="ax-btn ax-btn--ghost 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="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v.142c0 .538 .214 1.054 .595 1.435l6.354 6.354a2.025 2.025 0 0 0 2.864 0l3.842 -3.842a2.025 2.025 0 0 0 0 -2.864l-6.354 -6.354"/><path d="M7 10h-.01"/></svg>
                <span class="ax-btn__label">Tag</span>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost 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="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 -2z"/><path d="M3 7l9 6l9 -6"/></svg>
                <span class="ax-btn__label">Email</span>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">Export</button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" style="color:var(--ax-danger-500);">Block</button>
              <span style="flex:1 1 auto;"></span>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Clear selection" @click="selected=[]"><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>
            </div>

            <!-- table -->
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover">
                <thead class="ax-table__head">
                  <tr>
                    <th class="ax-table__th" scope="col" style="width:38px;"><input type="checkbox" class="ax-checkbox" aria-label="Select all customers" :checked="allSelected()" @change="toggleAll($event.target.checked)"></th>
                    <th class="ax-table__th" scope="col">Customer</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Orders</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Total spent</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">LTV</th>
                    <th class="ax-table__th" scope="col">Last order</th>
                    <th class="ax-table__th" scope="col">Location</th>
                    <th class="ax-table__th" scope="col">Status</th>
                    <th class="ax-table__th" scope="col" style="width:44px;"><span class="ax-visually-hidden">Actions</span></th>
                  </tr>
                </thead>
                <tbody>
                  <template x-for="c in filtered()" :key="c.id">
                    <tr class="ax-table__row" :style="selected.includes(c.id) ? 'background:var(--ax-accent-wash);' : ''">
                      <td class="ax-table__td"><input type="checkbox" class="ax-checkbox" :value="c.id" x-model="selected" :aria-label="'Select ' + c.name"></td>
                      <td class="ax-table__td">
                        <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                          <span class="ax-avatar ax-avatar--md" style="background:var(--ax-surface-subtle);color:var(--ax-text-muted);flex:none;"><span class="ax-avatar__initials" x-text="c.initials"></span></span>
                          <div style="min-width:0;">
                            <a href="/ecommerce/customer-details/" class="ax-text-truncate" style="display:block;font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);text-decoration:none;" x-text="c.name"></a>
                            <div class="ax-text-truncate" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="c.email"></div>
                          </div>
                        </div>
                      </td>
                      <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);" x-text="c.orders"></td>
                      <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);" x-text="money(c.spent)"></td>
                      <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);" x-text="money(c.ltv)"></td>
                      <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);white-space:nowrap;" x-text="c.lastOrder"></td>
                      <td class="ax-table__td" style="color:var(--ax-text-muted);white-space:nowrap;" x-text="c.city + ', ' + c.cc"></td>
                      <td class="ax-table__td"><span x-html="statusPill(c.status)"></span></td>
                      <td class="ax-table__td" style="text-align:end;">
                        <button type="button" data-menu-trigger :data-row="c.id" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="toggleMenu(c.id)" :aria-label="'Actions for ' + c.name" :aria-expanded="(menu===c.id).toString()" aria-haspopup="menu">
                          <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="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
                        </button>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>

            <!-- empty state -->
            <div x-show="!filtered().length" x-cloak style="text-align:center;padding:var(--ax-space-10) var(--ax-space-5);">
              <span class="ax-avatar ax-avatar--xl ax-avatar--squircle" style="background:var(--ax-surface-subtle);color:var(--ax-text-subtle);margin:0 auto var(--ax-space-4);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:28px;height:28px;"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span>
              <h3 style="color:var(--ax-text-strong);font-family:var(--ax-font-display);margin-bottom:var(--ax-space-2);">No customers match your search</h3>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-bottom:var(--ax-space-4);">Try a different segment, location, or search term.</p>
              <button type="button" class="ax-btn ax-btn--secondary" @click="q='';fStatus='';fLocation=''">Clear filters</button>
            </div>

            <!-- footer / pagination -->
            <div class="ax-card__footer ax-flex" style="justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--ax-space-3);" x-show="filtered().length" x-cloak>
              <span class="ax-pagination__summary ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);">Showing <span x-text="filtered().length"></span> of <span x-text="customers.length"></span> on this page · 5,914 total</span>
              <nav class="ax-pagination" aria-label="Pagination">
                <button type="button" class="ax-pagination__prev" disabled aria-disabled="true" aria-label="Previous page"><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="M15 6l-6 6l6 6"/></svg></button>
                <ul class="ax-pagination__pages">
                  <li><a href="#" class="ax-pagination__page is-active" aria-current="page">1</a></li>
                  <li><a href="#" class="ax-pagination__page">2</a></li>
                  <li><a href="#" class="ax-pagination__page">3</a></li>
                  <li><span class="ax-pagination__ellipsis">…</span></li>
                  <li><a href="#" class="ax-pagination__page">237</a></li>
                </ul>
                <button type="button" class="ax-pagination__next" aria-label="Next page"><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="M9 6l6 6l-6 6"/></svg></button>
              </nav>
            </div>
          </section>
        </div>

        <!-- ════════════════ ROW ACTIONS MENU ════════════════ -->
        <!-- Teleported to <body> so it escapes the table-wrap's overflow-x clip; a single
             shared menu positioned (fixed) at whichever 3-dots trigger is open. -->
        <template x-teleport="body">
          <div x-show="menu!==null" x-cloak x-transition class="ax-menu" role="menu"
            @click.outside="if(!$event.target.closest('[data-menu-trigger]')) menu=null"
            @keydown.escape.window="menu=null" @scroll.window.capture="positionMenu()" @resize.window="positionMenu()"
            :style="`position:fixed;top:${menuY}px;inset-inline-end:${menuX}px;z-index:60;min-width:170px;`">
            <a href="/ecommerce/customer-details/" class="ax-menu__item" role="menuitem" @click="menu=null"><span class="ax-menu__icon"><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="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg></span>View profile</a>
            <button type="button" class="ax-menu__item" role="menuitem" @click="menu=null"><span class="ax-menu__icon"><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="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 -2z"/><path d="M3 7l9 6l9 -6"/></svg></span>Email</button>
            <button type="button" class="ax-menu__item" role="menuitem" @click="menu=null"><span class="ax-menu__icon"><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="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v.142c0 .538 .214 1.054 .595 1.435l6.354 6.354a2.025 2.025 0 0 0 2.864 0l3.842 -3.842a2.025 2.025 0 0 0 0 -2.864l-6.354 -6.354"/><path d="M7 10h-.01"/></svg></span>Add tag</button>
            <div class="ax-menu__divider" role="separator"></div>
            <button type="button" class="ax-menu__item ax-menu__item--danger" role="menuitem" @click="menu=null"><span class="ax-menu__icon"><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="M5.7 5.7l12.6 12.6"/><path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"/></svg></span>Block customer</button>
          </div>
        </template>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axCustomers(){
            return {
              q:'', fStatus:'', fLocation:'', sort:'spend-desc', selected:[], menu:null, menuX:0, menuY:0,
              customers:[
                { id:1, name:'Camila Rossi', email:'camila.rossi@outlook.com', initials:'CR', orders:42, spent:8914.50, ltv:11480, lastOrder:'Jun 24, 2026', city:'São Paulo', cc:'BR', country:'Brazil', status:'VIP' },
                { id:2, name:'Henry Whitlock', email:'h.whitlock@fastmail.com', initials:'HW', orders:18, spent:3240.00, ltv:4120, lastOrder:'Jun 27, 2026', city:'Manchester', cc:'UK', country:'United Kingdom', status:'Active' },
                { id:3, name:'Amelia Hart', email:'amelia.hart@gmail.com', initials:'AH', orders:12, spent:2186.75, ltv:2980, lastOrder:'Jun 27, 2026', city:'Portland', cc:'US', country:'United States', status:'Active' },
                { id:4, name:'Marcus Lindqvist', email:'m.lindqvist@telia.se', initials:'ML', orders:27, spent:5602.30, ltv:7240, lastOrder:'Jun 18, 2026', city:'Stockholm', cc:'SE', country:'Sweden', status:'VIP' },
                { id:5, name:'Priya Nair', email:'priya.nair@proton.me', initials:'PN', orders:9, spent:1148.00, ltv:1560, lastOrder:'Jun 25, 2026', city:'Austin', cc:'US', country:'United States', status:'Active' },
                { id:6, name:'Lena Brandt', email:'lena.brandt@web.de', initials:'LB', orders:2, spent:264.40, ltv:310, lastOrder:'Jun 24, 2026', city:'Berlin', cc:'DE', country:'Germany', status:'New' },
                { id:7, name:'Daniel Cho', email:'daniel.cho@kakao.com', initials:'DC', orders:1, spent:74.00, ltv:74, lastOrder:'Jun 26, 2026', city:'Seoul', cc:'KR', country:'South Korea', status:'New' },
                { id:8, name:'Tomás Herrera', email:'t.herrera@gmail.com', initials:'TH', orders:21, spent:4318.90, ltv:5680, lastOrder:'Jun 25, 2026', city:'Madrid', cc:'ES', country:'Spain', status:'Active' },
                { id:9, name:'Ava Sutton', email:'ava.sutton@icloud.com', initials:'AS', orders:6, spent:912.20, ltv:1180, lastOrder:'Jun 23, 2026', city:'London', cc:'UK', country:'United Kingdom', status:'Active' },
                { id:10, name:'Devon Okafor', email:'devon.okafor@gmail.com', initials:'DO', orders:0, spent:0, ltv:0, lastOrder:'—', city:'Lagos', cc:'NG', country:'Nigeria', status:'Blocked' },
                { id:11, name:'Sofia Marchetti', email:'s.marchetti@libero.it', initials:'SM', orders:33, spent:6740.00, ltv:8910, lastOrder:'Jun 22, 2026', city:'Milan', cc:'IT', country:'Italy', status:'VIP' },
                { id:12, name:'Noah Bergström', email:'noah.berg@hotmail.com', initials:'NB', orders:4, spent:498.50, ltv:640, lastOrder:'Jun 22, 2026', city:'Oslo', cc:'NO', country:'Norway', status:'Active' },
              ],
              money(n){ return '$' + Number(n).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); },
              statusPill(s){
                const map={
                  VIP:['accent','<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>'],
                  Active:['success','<path d="M5 12l5 5l10 -10"/>'],
                  New:['info','<path d="M12 5l0 14"/><path d="M5 12l14 0"/>'],
                  Blocked:['danger','<path d="M5.7 5.7l12.6 12.6"/><path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"/>'],
                };
                const [v,p]=map[s]||map.Active;
                return `<span class="ax-badge ax-badge--soft ax-badge--${v} ax-badge--pill"><span class="ax-badge__dot"></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:12px;height:12px;">${p}</svg>${s}</span>`;
              },
              filtered(){
                let r=this.customers.filter(c=>{
                  const term=this.q.trim().toLowerCase();
                  if(term && !(c.name.toLowerCase().includes(term) || c.email.toLowerCase().includes(term))) return false;
                  if(this.fStatus && c.status!==this.fStatus) return false;
                  if(this.fLocation && c.country!==this.fLocation) return false;
                  return true;
                });
                const by={
                  'spend-desc':(a,b)=>b.spent-a.spent,
                  'spend-asc':(a,b)=>a.spent-b.spent,
                  'orders-desc':(a,b)=>b.orders-a.orders,
                  'recent':(a,b)=>b.id-a.id,
                  'az':(a,b)=>a.name.localeCompare(b.name),
                };
                if(by[this.sort]) r=[...r].sort(by[this.sort]);
                return r;
              },
              allSelected(){ const ids=this.filtered().map(c=>c.id); return ids.length>0 && ids.every(id=>this.selected.includes(id)); },
              toggleAll(on){ this.selected = on ? this.filtered().map(c=>c.id) : []; },
              toggleMenu(id){ this.menu = this.menu===id ? null : id; if(this.menu!==null){ this.positionMenu(); this.$nextTick(()=>this.positionMenu()); } },
              // Anchor the (teleported, fixed) menu to its trigger; re-runs on scroll/resize so it
              // tracks the row, closing only once the row scrolls out of view. menuX is the inline-end
              // offset (dir-aware, using clientWidth so the scrollbar doesn't skew it); the menu flips
              // above the trigger when it'd overflow the viewport bottom.
              positionMenu(){ if(this.menu===null) return; const el=document.querySelector('[data-menu-trigger][data-row="'+this.menu+'"]'); if(!el) return; const b=el.getBoundingClientRect(); const de=document.documentElement, vw=de.clientWidth, vh=de.clientHeight; if(b.bottom<0 || b.top>vh){ this.menu=null; return; } const rtl=de.getAttribute('dir')==='rtl'; this.menuX=Math.max(8, rtl ? b.left : (vw-b.right)); const menuEl=document.querySelector('.ax-menu[role="menu"]'); const h=menuEl?menuEl.offsetHeight:0; this.menuY=(h && (b.bottom+4+h)>vh) ? Math.max(8, b.top-4-h) : (b.bottom+4); },
            };
          }
        </script>
{% endblock %}