{% extends 'base.html' %}

{% block main %}
<div x-data="{ tab:'overview', emailed:false, blocked:false }">
        <!-- ════════════════ 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">Camila Rossi</h1>
              <p class="ax-page-head__subtitle">Customer since Mar 2022 · <span class="ax-num">42</span> orders · <span class="ax-num">$8,914.50</span> lifetime spend.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/ecommerce/customers/">
                <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 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                <span class="ax-btn__label">Back to customers</span>
              </a>
              <button type="button" class="ax-btn ax-btn--secondary" @click="emailed=true;setTimeout(()=>emailed=false,2200)">
                <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 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg>
                <span class="ax-btn__label" x-text="emailed ? 'Email sent' : 'Email'"></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="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z"/><path d="M16 5l3 3"/></svg>
                <span class="ax-btn__label">Edit customer</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- ───────────────── LEFT PROFILE CARD (4) ───────────────── -->
          <aside class="ax-card ax-col--4" role="region" aria-label="Customer profile" style="align-self:start;">
            <div class="ax-card__body" style="text-align:center;">
              <span class="ax-avatar ax-avatar--2xl ax-avatar--ringed" style="margin-inline:auto;box-shadow:0 0 0 4px var(--ax-surface-raised),0 0 0 6px var(--ax-accent);background:color-mix(in oklab,var(--ax-accent) 16%,var(--ax-surface-solid));color:var(--ax-accent);">
                <span class="ax-avatar__initials" style="font-size:var(--ax-text-2xl);">CR</span>
                <span class="ax-avatar__status ax-avatar__status--online" aria-hidden="true"></span>
              </span>
              <h2 style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:700;color:var(--ax-text-strong);margin-top:var(--ax-space-4);line-height:1.2;">Camila Rossi</h2>
              <div class="ax-cluster" style="justify-content:center;gap:var(--ax-space-2);margin-top:var(--ax-space-2);">
                <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill"><span class="ax-badge__dot"></span>VIP</span>
                <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill" x-show="!blocked"><span class="ax-badge__dot"></span>Active</span>
                <span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill" x-show="blocked" x-cloak><span class="ax-badge__dot"></span>Blocked</span>
              </div>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-top:var(--ax-space-3);">Repeat buyer · Lighting &amp; Home</p>
            </div>

            <!-- contact rows -->
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-1);">
              <a class="ax-list__row ax-list--linked" href="mailto:camila.rossi@outlook.com" style="border:0;padding:var(--ax-space-2) var(--ax-space-2);border-radius:var(--ax-radius-sm);text-decoration:none;">
                <span class="ax-list__leading" style="color:var(--ax-text-subtle);"><svg width="18" height="18" 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 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title" style="color:var(--ax-text);font-weight:var(--ax-weight-medium);">camila.rossi@outlook.com</span></span>
              </a>
              <a class="ax-list__row ax-list--linked" href="tel:+551199870212" style="border:0;padding:var(--ax-space-2) var(--ax-space-2);border-radius:var(--ax-radius-sm);text-decoration:none;">
                <span class="ax-list__leading" style="color:var(--ax-text-subtle);"><svg width="18" height="18" 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 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title ax-num" style="color:var(--ax-text);font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);">+55 11 99870-0212</span></span>
              </a>
              <div class="ax-list__row" style="border:0;padding:var(--ax-space-2) var(--ax-space-2);">
                <span class="ax-list__leading" style="color:var(--ax-text-subtle);"><svg width="18" height="18" 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 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title" style="color:var(--ax-text);">São Paulo, Brazil</span></span>
              </div>
              <div class="ax-list__row" style="border:0;padding:var(--ax-space-2) var(--ax-space-2);">
                <span class="ax-list__leading" style="color:var(--ax-text-subtle);"><svg width="18" height="18" 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 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/></svg></span>
                <span class="ax-list__content"><span class="ax-list__title" style="color:var(--ax-text);">Joined <span class="ax-num" style="font-family:var(--ax-font-mono);">Mar 14, 2022</span></span></span>
              </div>
            </div>

            <!-- tags -->
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-label" style="margin-bottom:var(--ax-space-2);">Tags</div>
              <div class="ax-cluster" style="gap:var(--ax-space-2);">
                <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Wholesale</span>
                <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Newsletter</span>
                <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Early access</span>
                <button type="button" class="ax-badge ax-badge--outline" style="border-radius:var(--ax-radius-xs);cursor:pointer;">+ Add</button>
              </div>
            </div>

            <!-- actions -->
            <div class="ax-card__footer" style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-2);">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block" @click="emailed=true;setTimeout(()=>emailed=false,2200)">
                <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 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg>
                <span class="ax-btn__label">Message</span>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--block" :class="blocked ? 'ax-btn--soft-success' : 'ax-btn--soft-danger'" @click="blocked=!blocked">
                <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.7 5.7l12.6 12.6"/><path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"/></svg>
                <span class="ax-btn__label" x-text="blocked ? 'Unblock' : 'Block'"></span>
              </button>
            </div>
          </aside>

          <!-- ───────────────── RIGHT CONTENT (8) ───────────────── -->
          <div class="ax-col--8" style="display:flex;flex-direction:column;gap:var(--ax-space-6);min-width:0;">

            <!-- ───── KPI TILES ───── -->
            <div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ax-space-4);" class="ax-cd-kpis">
              <div class="ax-card ax-kpi" role="region" aria-label="Total spent $8,914.50, up 9.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="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--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>9.2%</span>
                  </div>
                  <div class="ax-kpi__label">Total spent</div>
                  <div class="ax-kpi__value ax-num">$8,914.50</div>
                </div>
              </div>
              <div class="ax-card ax-kpi" role="region" aria-label="Orders 42">
                <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="M6 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg></span>
                  </div>
                  <div class="ax-kpi__label">Orders</div>
                  <div class="ax-kpi__value ax-num">42</div>
                </div>
              </div>
              <div class="ax-card ax-kpi" role="region" aria-label="Average order value $212.25">
                <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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v1m0 8v1"/><path d="M14.5 9.5a2.5 2 0 0 0 -2.5 -1.5h-1a2 2 0 1 0 0 4h1a2 2 0 1 1 0 4h-1a2.5 2 0 0 1 -2.5 -1.5"/></svg></span>
                  </div>
                  <div class="ax-kpi__label">Avg. order</div>
                  <div class="ax-kpi__value ax-num">$212.25</div>
                </div>
              </div>
              <div class="ax-card ax-kpi" role="region" aria-label="Lifetime value $11,480, up 14.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="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"/></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>14.1%</span>
                  </div>
                  <div class="ax-kpi__label">Lifetime value</div>
                  <div class="ax-kpi__value ax-num">$11,480</div>
                </div>
              </div>
            </div>

            <!-- ───── TABBED CONTENT ───── -->
            <section class="ax-card" role="region" aria-label="Customer detail tabs">
              <div class="ax-card__body" style="padding-bottom:0;">
                <div class="ax-tabs">
                  <div class="ax-tabs__list" role="tablist" aria-label="Customer sections">
                    <button type="button" class="ax-tabs__tab" role="tab" id="cd-tab-overview" :aria-selected="tab==='overview'" :class="{ 'is-active': tab==='overview' }" @click="tab='overview'">Overview</button>
                    <button type="button" class="ax-tabs__tab" role="tab" id="cd-tab-orders" :aria-selected="tab==='orders'" :class="{ 'is-active': tab==='orders' }" @click="tab='orders'">Orders<span class="ax-tabs__badge ax-badge ax-badge--soft ax-badge--neutral">42</span></button>
                    <button type="button" class="ax-tabs__tab" role="tab" id="cd-tab-addresses" :aria-selected="tab==='addresses'" :class="{ 'is-active': tab==='addresses' }" @click="tab='addresses'">Addresses</button>
                    <button type="button" class="ax-tabs__tab" role="tab" id="cd-tab-notes" :aria-selected="tab==='notes'" :class="{ 'is-active': tab==='notes' }" @click="tab='notes'">Notes</button>
                    <button type="button" class="ax-tabs__tab" role="tab" id="cd-tab-activity" :aria-selected="tab==='activity'" :class="{ 'is-active': tab==='activity' }" @click="tab='activity'">Activity</button>
                  </div>
                </div>
              </div>

              <!-- ░░ OVERVIEW ░░ -->
              <div class="ax-card__body" role="tabpanel" aria-labelledby="cd-tab-overview" x-show="tab==='overview'" x-cloak style="padding-top:var(--ax-space-5);">
                <!-- spend chart -->
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-2);">
                  <div><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Spend over time</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Last 12 months</div></div>
                  <span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-emerald);font-size:var(--ax-text-sm);">+$1,240 vs prev. period</span>
                </div>
                <div data-ax-chart="apex" data-ax-chart-type="area" data-ax-chart-height="200" data-ax-chart-legend="none" data-ax-chart-accent="true"
                     data-ax-chart-series='[{"name":"Spend","data":[420,610,380,540,720,650,810,690,920,1040,880,1120]}]'
                     aria-label="Area chart of monthly spend over the last twelve months"></div>

                <hr class="ax-divider" style="margin-block:var(--ax-space-5);">

                <!-- activity timeline -->
                <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);margin-bottom:var(--ax-space-4);">Recent activity</div>
                <ul class="ax-timeline">
                  <li class="ax-timeline__item ax-timeline__item--success">
                    <span class="ax-timeline__marker"><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 12l5 5l10 -10"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Order <span style="color:var(--ax-accent);">#ORD-7841</span> delivered — <span class="ax-num" style="font-family:var(--ax-font-mono);">$248.00</span></p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">2h ago</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-cyan);"><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="M6 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Placed order <span style="color:var(--ax-accent);">#ORD-7841</span> — 3 items</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 24</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-violet);"><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 14c1.49 -1.46 3 -3.21 3 -5.5a5.5 5.5 0 0 0 -9.5 -3.77a5.5 5.5 0 0 0 -9.5 3.77c0 2.29 1.5 4.04 3 5.5l6.5 6.5z"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Added <span style="color:var(--ax-text);">Brass Task Light</span> to wishlist</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 21</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-amber);"><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="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"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Refund issued on <span style="color:var(--ax-accent);">#ORD-7702</span> — <span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-danger-500);">−$54.00</span></p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 12</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-pink);"><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"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Promoted to <b style="color:var(--ax-text-strong);">VIP</b> tier</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">May 30</span></div>
                  </li>
                </ul>
              </div>

              <!-- ░░ ORDERS ░░ -->
              <div role="tabpanel" aria-labelledby="cd-tab-orders" x-show="tab==='orders'" x-cloak>
                <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">Order</th>
                        <th class="ax-table__th" scope="col">Date</th>
                        <th class="ax-table__th" scope="col">Items</th>
                        <th class="ax-table__th" scope="col">Status</th>
                        <th class="ax-table__th ax-table__th--num" scope="col">Total</th>
                        <th class="ax-table__th" scope="col"><span class="ax-visually-hidden">Actions</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="ax-table__row">
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);">#ORD-7841</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 24, 2026</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">3</td>
                        <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Delivered</span></td>
                        <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$248.00</td>
                        <td class="ax-table__td" style="text-align:right;"><a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/order-details/">View</a></td>
                      </tr>
                      <tr class="ax-table__row">
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);">#ORD-7702</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 09, 2026</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">2</td>
                        <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill"><span class="ax-badge__dot"></span>Refunded</span></td>
                        <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$132.00</td>
                        <td class="ax-table__td" style="text-align:right;"><a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/order-details/">View</a></td>
                      </tr>
                      <tr class="ax-table__row">
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);">#ORD-7588</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">May 28, 2026</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">5</td>
                        <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Delivered</span></td>
                        <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$486.50</td>
                        <td class="ax-table__td" style="text-align:right;"><a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/order-details/">View</a></td>
                      </tr>
                      <tr class="ax-table__row">
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);">#ORD-7412</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">May 11, 2026</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">1</td>
                        <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill"><span class="ax-badge__dot"></span>Shipped</span></td>
                        <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$96.00</td>
                        <td class="ax-table__td" style="text-align:right;"><a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/order-details/">View</a></td>
                      </tr>
                      <tr class="ax-table__row">
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);">#ORD-7195</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Apr 22, 2026</td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">4</td>
                        <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill"><span class="ax-badge__dot"></span>On hold</span></td>
                        <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$318.75</td>
                        <td class="ax-table__td" style="text-align:right;"><a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/order-details/">View</a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="ax-card__footer"><a class="ax-link" href="/ecommerce/orders/">View all 42 orders →</a></div>
              </div>

              <!-- ░░ ADDRESSES ░░ -->
              <div class="ax-card__body" role="tabpanel" aria-labelledby="cd-tab-addresses" x-show="tab==='addresses'" x-cloak style="padding-top:var(--ax-space-5);">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-4);" class="ax-cd-addr">
                  <!-- shipping default -->
                  <article style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:var(--ax-space-4);position:relative;">
                    <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-3);">
                      <div class="ax-cluster" style="gap:var(--ax-space-2);">
                        <span class="ax-badge ax-badge--soft ax-badge--accent" style="border-radius:var(--ax-radius-xs);">Default</span>
                        <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Shipping</span>
                      </div>
                      <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Edit shipping address"><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 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z"/><path d="M16 5l3 3"/></svg></button>
                    </div>
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Camila Rossi</div>
                    <address style="font-style:normal;color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.7;margin-top:4px;">
                      Rua Augusta 1240, Apt 72<br>Consolação<br>São Paulo · SP · <span class="ax-num" style="font-family:var(--ax-font-mono);">01304-001</span><br>Brazil<br><span class="ax-num" style="font-family:var(--ax-font-mono);">+55 11 99870-0212</span>
                    </address>
                  </article>
                  <!-- billing -->
                  <article style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:var(--ax-space-4);position:relative;">
                    <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-3);">
                      <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Billing</span>
                      <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Edit billing address"><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 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z"/><path d="M16 5l3 3"/></svg></button>
                    </div>
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Rossi Atelier Ltda.</div>
                    <address style="font-style:normal;color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.7;margin-top:4px;">
                      Av. Paulista 2100, Sala 14<br>Bela Vista<br>São Paulo · SP · <span class="ax-num" style="font-family:var(--ax-font-mono);">01310-930</span><br>Brazil<br>CNPJ <span class="ax-num" style="font-family:var(--ax-font-mono);">28.114.902/0001-55</span>
                    </address>
                  </article>
                </div>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill" style="margin-top:var(--ax-space-4);">
                  <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 address</span>
                </button>
              </div>

              <!-- ░░ NOTES ░░ -->
              <div class="ax-card__body" role="tabpanel" aria-labelledby="cd-tab-notes" x-show="tab==='notes'" x-cloak style="padding-top:var(--ax-space-5);"
                   x-data="{ notes:[
                     {who:'Priya Nair', when:'Jun 18, 2026 · 10:24 AM', body:'Requested invoice copies for orders #ORD-7588 and #ORD-7412 for accounting. Emailed PDFs.'},
                     {who:'Marcus Lindqvist', when:'May 30, 2026 · 4:02 PM', body:'Upgraded to VIP after 40th order. Eligible for free express shipping going forward.'},
                     {who:'Priya Nair', when:'May 12, 2026 · 9:11 AM', body:'Partial refund of $54.00 on #ORD-7702 — one lamp arrived with a cracked shade.'}
                   ], draft:'', add(){ if(!this.draft.trim())return; this.notes.unshift({who:'You', when:'Just now', body:this.draft.trim()}); this.draft=''; } }">
                <form @submit.prevent="add()" style="display:flex;gap:var(--ax-space-3);align-items:flex-start;margin-bottom:var(--ax-space-5);">
                  <span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-accent) 16%,transparent);color:var(--ax-accent);"><span class="ax-avatar__initials">YO</span></span>
                  <div style="flex:1 1 auto;">
                    <textarea class="ax-textarea" rows="2" placeholder="Add an internal note about this customer…" x-model="draft" style="min-height:60px;"></textarea>
                    <div class="ax-cluster" style="justify-content:flex-end;margin-top:var(--ax-space-2);">
                      <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm" :disabled="!draft.trim()">Add note</button>
                    </div>
                  </div>
                </form>
                <ul class="ax-list" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                  <template x-for="(n,i) in notes" :key="i">
                    <li style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:var(--ax-space-4);">
                      <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;">
                        <span style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="n.who"></span>
                        <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="n.when"></span>
                      </div>
                      <p style="color:var(--ax-text);font-size:var(--ax-text-sm);line-height:1.6;" x-text="n.body"></p>
                    </li>
                  </template>
                </ul>
              </div>

              <!-- ░░ ACTIVITY ░░ -->
              <div class="ax-card__body" role="tabpanel" aria-labelledby="cd-tab-activity" x-show="tab==='activity'" x-cloak style="padding-top:var(--ax-space-5);">
                <ul class="ax-timeline">
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-cyan);"><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 12a7 7 0 0 1 14 0a7 7 0 0 1 -14 0"/><path d="M12 9v3l1.5 1.5"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Signed in from <span style="color:var(--ax-text);">São Paulo, BR</span> · Chrome on macOS</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Today · 08:41</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-violet);"><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="M6 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Added <span style="color:var(--ax-text);">2 items</span> to cart</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Today · 08:38</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-amber);"><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>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Browsed <span style="color:var(--ax-text);">Lighting</span> collection — 11 products viewed</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Yesterday · 21:14</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-cyan);"><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 12a7 7 0 0 1 14 0a7 7 0 0 1 -14 0"/><path d="M12 9v3l1.5 1.5"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Signed in from <span style="color:var(--ax-text);">São Paulo, BR</span> · Safari on iOS</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 25 · 19:02</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-viz-emerald);"><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 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title">Opened campaign email <span style="color:var(--ax-text);">“Summer lighting — up to 30% off”</span></p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 24 · 11:50</span></div>
                  </li>
                </ul>
              </div>
            </section>
          </div>
        </div>

        <!-- responsive: KPI tiles + address grid collapse on small screens -->
        <style>
          @media (max-width: 640px) {
            .ax-cd-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
            .ax-cd-addr { grid-template-columns: 1fr !important; }
          }
        </style>
</div>
{% endblock %}