{% extends 'base.html' %}

{% block main %}
<div x-data="axSuccess()">
        <!-- ════════════════ 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">Order confirmed</h1>
              <p class="ax-page-head__subtitle">Thank you, Amelia — a receipt is on its way to your inbox.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/ecommerce/products/">
                <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.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304"/><path d="M9 11v-5a3 3 0 0 1 6 0v5"/></svg>
                <span class="ax-btn__label">Continue shopping</span>
              </a>
            </div>
          </div>
        </div>

        <div class="ax-dash-grid">

          <!-- ───── CONFIRMATION HERO ───── -->
          <section class="ax-card ax-col--8" role="region" aria-label="Order confirmation">
            <div class="ax-card__body" style="display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--ax-space-9) var(--ax-space-6) var(--ax-space-7);">
              <!-- check mark -->
              <span aria-hidden="true" style="position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--ax-success-500) 16%,transparent);margin-bottom:var(--ax-space-5);">
                <span style="position:absolute;inset:-8px;border-radius:50%;border:2px solid color-mix(in oklab,var(--ax-success-500) 28%,transparent);"></span>
                <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>
              </span>
              <h2 style="margin:0 0 var(--ax-space-2);font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:700;color:var(--ax-text-strong);">Your order is placed!</h2>
              <p style="margin:0 0 var(--ax-space-5);max-width:42ch;color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.6;">We've received your order and will email you a confirmation shortly. You can track its progress any time from your orders.</p>

              <!-- order number chip -->
              <div class="ax-cluster" style="gap:var(--ax-space-3);padding:var(--ax-space-3) var(--ax-space-4);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);background:var(--ax-surface-subtle);margin-bottom:var(--ax-space-6);">
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.05em;">Order</span>
                <b class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-md);color:var(--ax-text-strong);letter-spacing:.02em;" x-text="orderNo"></b>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="copyOrder()" :aria-label="copied ? 'Copied' : 'Copy order number'">
                  <svg x-show="!copied" 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 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"/><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"/></svg>
                  <svg x-show="copied" x-cloak class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                </button>
              </div>

              <!-- CTAs -->
              <div class="ax-cluster" style="gap:var(--ax-space-3);justify-content:center;flex-wrap:wrap;">
                <a class="ax-btn ax-btn--primary" href="/ecommerce/order-details/">
                  <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-8m0 -5h5l3 5"/></svg>
                  <span class="ax-btn__label">Track order</span>
                </a>
                <a class="ax-btn ax-btn--secondary" href="#">
                  <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 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2"/></svg>
                  <span class="ax-btn__label">View receipt</span>
                </a>
              </div>
            </div>

            <!-- delivery estimate strip -->
            <div class="ax-card__footer" style="display:flex;justify-content:center;gap:var(--ax-space-6);flex-wrap:wrap;padding:var(--ax-space-5);">
              <div class="ax-cluster" style="gap:var(--ax-space-3);">
                <span style="width:38px;height:38px;border-radius:var(--ax-radius-md);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-accent) 16%,transparent);color:var(--ax-accent);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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-8m0 -5h5l3 5"/></svg></span>
                <div style="text-align:start;"><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Estimated delivery</div><b style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Jul 2 – Jul 4, 2026</b></div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);">
                <span style="width:38px;height:38px;border-radius:var(--ax-radius-md);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);color:var(--ax-viz-cyan);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>
                <div style="text-align:start;"><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Shipping to</div><b style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Portland, OR 97201</b></div>
              </div>
            </div>
          </section>

          <!-- ───── ORDER SUMMARY RAIL ───── -->
          <aside class="ax-col--4">
            <section class="ax-card" role="region" aria-label="Order summary">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Order summary</h2><p class="ax-card__subtitle">Placed Jun 27, 2026 · 2:41 PM</p></div>
              </div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <ul class="ax-list ax-list--compact" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                  <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                    <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);color:var(--ax-viz-cyan);"><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>
                    <span style="flex:1 1 auto;min-width:0;"><span class="ax-text-truncate" style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Aperture Desk Lamp</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Brass · Qty 1</span></span>
                    <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-sm);color:var(--ax-text-strong);">$129.00</span>
                  </li>
                  <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                    <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 16%,transparent);color:var(--ax-viz-violet);"><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>
                    <span style="flex:1 1 auto;min-width:0;"><span class="ax-text-truncate" style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Matte Ceramic Mug</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Slate · Qty 2</span></span>
                    <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-sm);color:var(--ax-text-strong);">$48.00</span>
                  </li>
                  <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                    <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 16%,transparent);color:var(--ax-viz-amber);"><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>
                    <span style="flex:1 1 auto;min-width:0;"><span class="ax-text-truncate" style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Walnut Monitor Riser</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Large · Qty 1</span></span>
                    <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-sm);color:var(--ax-text-strong);">$96.00</span>
                  </li>
                </ul>
                <hr class="ax-divider" style="margin:0;">
                <div style="display:flex;flex-direction:column;gap:var(--ax-space-2);font-size:var(--ax-text-sm);">
                  <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</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);">$20.27</span></div>
                </div>
                <hr class="ax-divider" style="margin: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 paid</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="gap:var(--ax-space-2);padding:var(--ax-space-3);border-radius:var(--ax-radius-sm);background:var(--ax-surface-subtle);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">
                  <svg viewBox="0 0 24 24" width="16" height="16" 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 class="ax-num" style="font-family:var(--ax-font-mono);">Paid with Visa •••• 4242</span>
                </div>
              </div>
            </section>
          </aside>

          <!-- ───── WHAT'S NEXT ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="What happens next">
            <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">What happens next</h2></div></div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ax-space-5);">
              <div class="ax-cluster" style="gap:var(--ax-space-3);align-items:flex-start;flex-wrap:nowrap;">
                <span style="width:40px;height:40px;flex:none;border-radius:var(--ax-radius-md);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-accent) 16%,transparent);color:var(--ax-accent);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg></span>
                <div><b style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Confirmation email</b><p style="margin:2px 0 0;font-size:var(--ax-text-xs);color:var(--ax-text-muted);line-height:1.5;">Sent to amelia.hart@gmail.com with your receipt and order details.</p></div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);align-items:flex-start;flex-wrap:nowrap;">
                <span style="width:40px;height:40px;flex:none;border-radius:var(--ax-radius-md);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-viz-violet) 16%,transparent);color:var(--ax-viz-violet);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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"/><path d="M12 12l-8 -4.5"/></svg></span>
                <div><b style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Order processing</b><p style="margin:2px 0 0;font-size:var(--ax-text-xs);color:var(--ax-text-muted);line-height:1.5;">We're packing your items. You'll get a notice when they leave the warehouse.</p></div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);align-items:flex-start;flex-wrap:nowrap;">
                <span style="width:40px;height:40px;flex:none;border-radius:var(--ax-radius-md);display:grid;place-items:center;background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);color:var(--ax-viz-cyan);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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-8m0 -5h5l3 5"/></svg></span>
                <div><b style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Shipment &amp; tracking</b><p style="margin:2px 0 0;font-size:var(--ax-text-xs);color:var(--ax-text-muted);line-height:1.5;">A tracking link arrives once your parcel is on its way to Portland.</p></div>
              </div>
            </div>
          </section>
        </div>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axSuccess(){
            return {
              orderNo:'#ORD-2026-4815', copied:false,
              copyOrder(){ navigator.clipboard?.writeText(this.orderNo); this.copied=true; setTimeout(()=>this.copied=false,1600); },
            };
          }
        </script>
{% endblock %}