{% extends 'base.html' %}

{% block main %}
<div x-data="axOrderDetails()">
        <!-- ════════════════ 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>
              <div class="ax-cluster" style="gap:var(--ax-space-3);align-items:center;">
                <h1 class="ax-page-head__title ax-num" style="font-family:var(--ax-font-mono);">#ORD-8042</h1>
                <span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill" style="text-transform:uppercase;letter-spacing:.04em;font-size:var(--ax-text-2xs);"><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;"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2"/></svg>Processing</span>
              </div>
              <p class="ax-page-head__subtitle">Placed <span class="ax-num" style="font-family:var(--ax-font-mono);">Jun 27, 2026 · 2:41 PM</span> by Amelia Hart.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/ecommerce/orders/">
                <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 orders</span>
              </a>
              <button type="button" class="ax-btn ax-btn--secondary">
                <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="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/><path d="M9 17a2 2 0 1 0 0 -4"/></svg>
                <span class="ax-btn__label">Print invoice</span>
              </button>
              <div style="position:relative;" @click.outside="menu=false">
                <button type="button" class="ax-btn ax-btn--primary" @click="menu=!menu" :aria-expanded="menu.toString()">
                  <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 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8"/></svg>
                  <span class="ax-btn__label">Fulfill</span>
                  <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="M6 9l6 6l6 -6"/></svg>
                </button>
                <div x-show="menu" x-cloak x-transition class="ax-dropdown" role="menu" style="position:absolute;inset-inline-end:0;top:100%;z-index:30;min-width:200px;">
                  <button type="button" class="ax-menu__item" role="menuitem"><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 12l5 5l10 -10"/></svg></span>Fulfill all items</button>
                  <button type="button" class="ax-menu__item" role="menuitem"><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="M9 11l3 3l8 -8"/><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"/></svg></span>Fulfill selected</button>
                  <div class="ax-menu__divider" role="separator"></div>
                  <button type="button" class="ax-menu__item" role="menuitem"><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>Resend confirmation</button>
                  <button type="button" class="ax-menu__item ax-menu__item--danger" role="menuitem"><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="M9 14l-4 -4l4 -4"/><path d="M5 10h11a4 4 0 0 1 0 8h-1"/></svg></span>Refund order</button>
                  <button type="button" class="ax-menu__item ax-menu__item--danger" role="menuitem"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></span>Cancel order</button>
                </div>
              </div>
            </div>
          </div>
        </div>

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

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

            <!-- ░░ STATUS TIMELINE ░░ -->
            <section class="ax-card" role="region" aria-label="Order timeline">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Order timeline</h2><p class="ax-card__subtitle">Estimated delivery Jul 2 – Jul 4, 2026</p></div>
                <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill ax-num" style="font-family:var(--ax-font-mono);">Step 3 of 5</span>
              </div>
              <div class="ax-card__body" style="padding-top:0;">
                <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"><b style="color:var(--ax-text-strong);">Order placed</b> — confirmation sent to amelia.hart@gmail.com</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 27, 2026 · 2:41 PM</span></div>
                  </li>
                  <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"><b style="color:var(--ax-text-strong);">Payment confirmed</b> — Visa •••• 4242, <span class="ax-num" style="font-family:var(--ax-font-mono);">$265.97</span></p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 27, 2026 · 2:41 PM</span></div>
                  </li>
                  <li class="ax-timeline__item">
                    <span class="ax-timeline__marker" style="color:var(--ax-info-500);"><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 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title"><b style="color:var(--ax-text-strong);">Processing</b> — items being picked &amp; packed at Portland warehouse</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Jun 27, 2026 · 4:10 PM</span></div>
                  </li>
                  <li class="ax-timeline__item" style="opacity:.55;">
                    <span class="ax-timeline__marker" style="color:var(--ax-text-subtle);"><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 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title"><b style="color:var(--ax-text);">Shipped</b> — tracking link will appear here</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Expected Jun 28</span></div>
                  </li>
                  <li class="ax-timeline__item" style="opacity:.55;">
                    <span class="ax-timeline__marker" style="color:var(--ax-text-subtle);"><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 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/><path d="M12 12l8 -4.5"/><path d="M12 12l0 9"/></svg></span>
                    <div class="ax-timeline__content"><p class="ax-timeline__title"><b style="color:var(--ax-text);">Delivered</b> — to 1820 NW Glisan St, Portland</p><span class="ax-timeline__time ax-num" style="font-family:var(--ax-font-mono);">Est. Jul 2 – Jul 4</span></div>
                  </li>
                </ul>
              </div>
            </section>

            <!-- ░░ ITEMS TABLE ░░ -->
            <section class="ax-card" role="region" aria-label="Order items">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Items</h2><p class="ax-card__subtitle"><span class="ax-num">4</span> products · <span class="ax-num">5</span> units</p></div>
                <label class="ax-check" style="display:flex;gap:var(--ax-space-2);align-items:center;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
                  <input type="checkbox" class="ax-checkbox" :checked="allItems()" @change="toggleAllItems($event.target.checked)" aria-label="Select all items for fulfillment">
                  Select all
                </label>
              </div>
              <div class="ax-table-wrap">
                <table class="ax-table">
                  <thead class="ax-table__head">
                    <tr>
                      <th class="ax-table__th" scope="col" style="width:38px;"><span class="ax-visually-hidden">Fulfill</span></th>
                      <th class="ax-table__th" scope="col">Product</th>
                      <th class="ax-table__th ax-table__th--num" scope="col">Unit price</th>
                      <th class="ax-table__th ax-table__th--num" scope="col">Qty</th>
                      <th class="ax-table__th ax-table__th--num" scope="col">Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="it in items" :key="it.id">
                      <tr class="ax-table__row" :style="it.refunded ? 'opacity:.6;' : ''">
                        <td class="ax-table__td"><input type="checkbox" class="ax-checkbox" :value="it.id" x-model="fulfill" :disabled="it.refunded" :aria-label="'Fulfill ' + it.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 ax-avatar--squircle" :style="`background:color-mix(in oklab,${it.c} 18%,transparent);color:${it.c};`"><svg class="ax-avatar__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="M8 9h8v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"/><path d="M9 6a3 3 0 0 1 6 0"/><path d="M8 9l8 0"/></svg></span>
                            <div style="min-width:0;">
                              <div class="ax-cluster" style="gap:var(--ax-space-2);">
                                <span style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);" :style="it.refunded ? 'text-decoration:line-through;' : ''" x-text="it.name"></span>
                                <span x-show="it.refunded" class="ax-badge ax-badge--soft ax-badge--danger" style="border-radius:var(--ax-radius-xs);">Refunded</span>
                              </div>
                              <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="it.variant"></div>
                              <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);" x-text="it.sku"></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="money(it.price)"></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="it.qty"></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(it.price * it.qty)"></td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
              <div class="ax-card__footer" style="display:flex;justify-content:space-between;align-items:center;gap:var(--ax-space-3);flex-wrap:wrap;">
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);"><span class="ax-num" x-text="fulfill.length"></span> selected for fulfillment</span>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" :disabled="!fulfill.length">
                  <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 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8"/></svg>
                  <span class="ax-btn__label">Mark selected as fulfilled</span>
                </button>
              </div>
            </section>

            <!-- ░░ FULFILLMENT / SHIPPING PANEL ░░ -->
            <section class="ax-card" role="region" aria-label="Fulfillment">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Fulfillment &amp; shipping</h2></div>
                <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Unfulfilled</span>
              </div>
              <div class="ax-card__body ax-od-ship" style="padding-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ax-space-5);">
                <div>
                  <div class="ax-card__eyebrow" style="margin-bottom:var(--ax-space-1);">Carrier</div>
                  <div class="ax-cluster" style="gap:var(--ax-space-2);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-accent)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8"/></svg><span style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">UPS Ground</span></div>
                </div>
                <div>
                  <div class="ax-card__eyebrow" style="margin-bottom:var(--ax-space-1);">Tracking</div>
                  <div class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Not yet assigned</div>
                </div>
                <div>
                  <div class="ax-card__eyebrow" style="margin-bottom:var(--ax-space-1);">Method</div>
                  <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Free standard (5–7 days)</div>
                </div>
              </div>
            </section>

            <!-- ░░ TOTALS ░░ -->
            <section class="ax-card" role="region" aria-label="Order totals">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Payment summary</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-2);font-size:var(--ax-text-sm);max-width:420px;margin-inline-start:auto;">
                <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Subtotal</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$273.00</span></div>
                <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Discount (WELCOME10)</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-danger-500);">−$27.30</span></div>
                <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Shipping</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-emerald);">Free</span></div>
                <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Tax (8.25%)</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$20.27</span></div>
                <hr class="ax-divider" style="margin:var(--ax-space-2) 0;">
                <div class="ax-cluster" style="justify-content:space-between;align-items:baseline;"><span style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Total</span><span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:700;color:var(--ax-text-strong);">$265.97</span></div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-2);"><span style="color:var(--ax-viz-emerald);">Amount paid</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-viz-emerald);">$265.97</span></div>
                <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Balance</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">$0.00</span></div>
              </div>
            </section>

            <!-- ░░ INTERNAL NOTES ░░ -->
            <section class="ax-card" role="region" aria-label="Internal notes"
                     x-data="{ notes:[
                       {who:'Priya Nair', when:'Jun 27, 2026 · 4:12 PM', body:'Customer requested gift wrapping — added a note for the packing team.'},
                       {who:'System', when:'Jun 27, 2026 · 2:41 PM', body:'Discount code WELCOME10 applied automatically (first order).'}
                     ], draft:'', add(){ if(!this.draft.trim())return; this.notes.unshift({who:'You', when:'Just now', body:this.draft.trim()}); this.draft=''; } }">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Internal notes</h2><p class="ax-card__subtitle">Only visible to your team</p></div></div>
              <div class="ax-card__body" style="padding-top:0;">
                <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);flex:none;"><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 order…" x-model="draft" style="min-height:56px;"></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>
            </section>
          </div>

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

            <!-- customer card -->
            <section class="ax-card" role="region" aria-label="Customer">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Customer</h2></div>
                <a class="ax-btn ax-btn--link ax-btn--sm" href="/ecommerce/customer-details/">View profile</a>
              </div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <div class="ax-cluster" style="gap:var(--ax-space-3);">
                  <span class="ax-avatar ax-avatar--lg" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,var(--ax-surface-solid));color:var(--ax-viz-cyan);flex:none;"><span class="ax-avatar__initials">AH</span></span>
                  <div style="min-width:0;">
                    <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Amelia Hart</div>
                    <div class="ax-cluster" style="gap:var(--ax-space-2);margin-top:2px;"><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--sm ax-badge--pill">Returning</span><span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">12 orders</span></div>
                  </div>
                </div>
                <hr class="ax-divider" style="margin:var(--ax-space-1) 0;">
                <a class="ax-list__row ax-list--linked" href="mailto:amelia.hart@gmail.com" style="border:0;padding: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);">amelia.hart@gmail.com</span></span>
                </a>
                <a class="ax-list__row ax-list--linked" href="tel:+15035550142" style="border:0;padding: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);">+1 (503) 555-0142</span></span>
                </a>
              </div>
            </section>

            <!-- shipping address -->
            <section class="ax-card" role="region" aria-label="Shipping address">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Shipping address</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;">
                <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);margin-bottom:4px;">Amelia Hart</div>
                <address style="font-style:normal;color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.7;">
                  1820 NW Glisan St, Apt 4B<br>Portland · OR · <span class="ax-num" style="font-family:var(--ax-font-mono);">97201</span><br>United States<br><span class="ax-num" style="font-family:var(--ax-font-mono);">+1 (503) 555-0142</span>
                </address>
              </div>
            </section>

            <!-- billing address -->
            <section class="ax-card" role="region" aria-label="Billing address">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Billing address</h2></div><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--sm ax-badge--pill">Same as shipping</span></div>
              <div class="ax-card__body" style="padding-top:0;">
                <address style="font-style:normal;color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.7;">
                  Amelia Hart<br>1820 NW Glisan St, Apt 4B<br>Portland · OR · <span class="ax-num" style="font-family:var(--ax-font-mono);">97201</span><br>United States
                </address>
              </div>
            </section>

            <!-- payment summary -->
            <section class="ax-card" role="region" aria-label="Payment method">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Payment</h2></div><span class="ax-badge ax-badge--soft ax-badge--success" style="border-radius:var(--ax-radius-xs);">Paid</span></div>
              <div class="ax-card__body" style="padding-top:0;">
                <div class="ax-cluster" style="gap:var(--ax-space-3);padding:var(--ax-space-3);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);background:var(--ax-surface-subtle);">
                  <span style="width:38px;height:26px;border-radius:var(--ax-radius-xs);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);flex:none;"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8"/><path d="M3 10l18 0"/></svg></span>
                  <div><div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Visa •••• 4242</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Expires 08/28</div></div>
                </div>
              </div>
            </section>

            <!-- tags -->
            <section class="ax-card" role="region" aria-label="Tags">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Tags</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;">
                <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);">First order</span>
                  <span class="ax-badge ax-badge--soft ax-badge--neutral" style="border-radius:var(--ax-radius-xs);">Gift</span>
                  <button type="button" class="ax-badge ax-badge--outline" style="border-radius:var(--ax-radius-xs);cursor:pointer;">+ Add</button>
                </div>
              </div>
            </section>
          </aside>
        </div>

        <!-- responsive: 3-col fulfillment + totals collapse on small screens -->
        <style>
          @media (max-width: 768px) {
            .ax-od-ship { grid-template-columns: 1fr !important; }
          }
        </style>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axOrderDetails(){
            const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',amber:'var(--ax-viz-amber)',pink:'var(--ax-viz-pink)'};
            return {
              menu:false, fulfill:[],
              items:[
                { id:1, name:'Aperture Desk Lamp', variant:'Brass / Warm white', sku:'SKU APG-0001', price:129.00, qty:1, c:C.cyan, refunded:false },
                { id:2, name:'Matte Ceramic Mug', variant:'Slate · 12 oz', sku:'SKU APG-0003', price:24.00, qty:2, c:C.violet, refunded:false },
                { id:3, name:'Walnut Monitor Riser', variant:'Walnut / Large', sku:'SKU APG-0004', price:96.00, qty:1, c:C.amber, refunded:false },
                { id:4, name:'Leather Cable Wrap', variant:'Tan', sku:'SKU APG-0012', price:18.00, qty:1, c:C.pink, refunded:true },
              ],
              money(v){ return '$' + v.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); },
              allItems(){ const ids=this.items.filter(i=>!i.refunded).map(i=>i.id); return ids.length>0 && ids.every(id=>this.fulfill.includes(id)); },
              toggleAllItems(on){ this.fulfill = on ? this.items.filter(i=>!i.refunded).map(i=>i.id) : []; },
            };
          }
        </script>
{% endblock %}