{% extends 'base.html' %}

{% comment %}
  Ecommerce dashboard. Near-verbatim port of the HTML reference
  src/html/dashboards/ecommerce.html — same DOM, classes, ARIA and demo data.
  Only the templating shell and the chart-module import differ.
{% endcomment %}

{% block main %}
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">eCommerce</h1>
              <p class="ax-page-head__subtitle">Store performance, orders &amp; merchandising — last 30 days.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
                <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 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"/><path d="M11 15h1"/><path d="M12 15v3"/></svg>
                <span class="ax-btn__label">Last 30 days</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>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Refresh dashboard">
                <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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
              </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 product</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- ───── OPENER (P4 · ACTION-LED): quick actions (7) + target gauge (5) ───── -->
          <section class="ax-card ax-col--7" role="region" aria-label="Quick actions">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Storefront</span>
                <h2 class="ax-card__title">Quick actions</h2>
              </div>
              <a class="ax-btn ax-btn--link" href="#">Customise</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-quicktiles">
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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="M12 5l0 14"/><path d="M5 12l14 0"/></svg></span>
                  <span class="ax-quicktiles__label">Add product</span>
                </button>
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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="M6 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 17h-11v-14h-2"/><path d="M6 5l14 1l-1 7h-13"/></svg></span>
                  <span class="ax-quicktiles__label">New order</span>
                </button>
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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="M12 3l0 12"/><path d="M8 11l4 4l4 -4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/></svg></span>
                  <span class="ax-quicktiles__label">Export CSV</span>
                </button>
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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 5h10a2 2 0 0 1 2 2v10"/><path d="M15 19h-10a2 2 0 0 1 -2 -2v-10"/><path d="M12 9v6"/><path d="M9 12h6"/></svg></span>
                  <span class="ax-quicktiles__label">Discount</span>
                </button>
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M9 12l2 2l4 -4"/></svg></span>
                  <span class="ax-quicktiles__label">Fulfil</span>
                </button>
                <button type="button" class="ax-quicktiles__tile">
                  <span class="ax-quicktiles__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="M4 4h6v6h-6z"/><path d="M14 4h6v6h-6z"/><path d="M4 14h6v6h-6z"/><path d="M14 14h6v6h-6z"/></svg></span>
                  <span class="ax-quicktiles__label">Collections</span>
                </button>
              </div>
            </div>
          </section>

          <!-- Monthly target — radial gauge (W-GOAL · radial) -->
          <section class="ax-card ax-col--5" role="region" aria-label="Monthly revenue target, 68% complete">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">August</span>
                <h2 class="ax-card__title">Monthly target</h2>
              </div>
              <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Target period">
                <button type="button" class="ax-btn ax-btn--sm is-selected" role="radio" aria-checked="true">Month</button>
                <button type="button" class="ax-btn ax-btn--sm" role="radio" aria-checked="false">Quarter</button>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-gauge">
                <div class="ax-gauge__chart" id="ax-ecom-target" aria-label="Radial gauge: 68% of the monthly revenue target reached"></div>
                <p class="ax-gauge__caption">$142.8K of the $210K target — on pace to close 4 days early.</p>
                <div class="ax-gauge__rows">
                  <div class="ax-gauge__row">
                    <span class="ax-gauge__row-label">Booked</span>
                    <span class="ax-gauge__row-value ax-num">$142.8K</span>
                  </div>
                  <div class="ax-gauge__row">
                    <span class="ax-gauge__row-label">Remaining</span>
                    <span class="ax-gauge__row-value ax-num">$67.2K</span>
                  </div>
                  <div class="ax-gauge__row">
                    <span class="ax-gauge__row-label">Daily run-rate</span>
                    <span class="ax-gauge__row-value ax-num">$5.9K</span>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── KPI ROW ───── -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Total Sales $142,800, up 9.8%">
            <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.8%
                </span>
              </div>
              <div class="ax-kpi__label">Total Sales</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">$142,800</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-accent" data-ax-chart-series='[{"name":"Trend","data":[6,10,9,16,19,23,27,30]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Orders 4,612, up 4.5%">
            <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 19m-2 0a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M17 19m-2 0a2 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>
                <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>4.5%
                </span>
              </div>
              <div class="ax-kpi__label">Orders</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">4,612</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-cyan" data-ax-chart-series='[{"name":"Trend","data":[8,11,10,15,17,20,23,27]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Average Order Value $30.96, up 1.2%">
            <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="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>
                <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>1.2%
                </span>
              </div>
              <div class="ax-kpi__label">Avg. Order Value</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">$30.96</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-violet" data-ax-chart-series='[{"name":"Trend","data":[13,15,12,18,16,21,19,23]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Cart Abandonment 68.4 percent, down 1.8 percent which is an improvement">
            <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="M4 19m0 1a1 1 0 0 0 1 1h.01"/><path d="M6 5h14l-2 7h-12"/><path d="M3 3h2l.5 2"/><path d="M17 17h-11v-4"/><path d="M9 17m-1 0a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M16 17m-1 0a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/></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 9l6 6l6 -6"/></svg>1.8%
                </span>
              </div>
              <div class="ax-kpi__label">Cart Abandonment</div>
              <div class="ax-kpi__meta" style="justify-content:space-between;width:100%;">
                <div class="ax-kpi__value ax-num">68.4%</div>
                <div class="ax-kpi__spark" data-ax-chart="apex" data-ax-chart-type="line" data-ax-chart-sparkline="true" data-ax-chart-tooltip="false" data-ax-chart-height="40" data-ax-chart-color="--ax-viz-emerald" data-ax-chart-series='[{"name":"Trend","data":[25,22,23,20,18,16,12,9]}]' style="min-height:40px" aria-hidden="true"></div>
              </div>
            </div>
          </div>

          <!-- ───── HERO: Revenue & Orders (mixed) + Sales by Category (donut) ───── -->
          <section class="ax-card ax-card--chart ax-col--8" role="region" aria-label="Revenue and orders">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Performance</span>
                <h2 class="ax-card__title">Revenue &amp; Orders</h2>
                <p class="ax-card__subtitle">Monthly revenue against order volume</p>
              </div>
              <div class="ax-card__actions">
                <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Date range">
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" aria-checked="false">Week</button>
                  <button type="button" class="ax-btn ax-btn--sm is-selected" role="radio" aria-checked="true">Month</button>
                  <button type="button" class="ax-btn ax-btn--sm" role="radio" aria-checked="false">Year</button>
                </div>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-cluster" style="gap:var(--ax-space-5);margin-block-end:var(--ax-space-3);">
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-accent);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Revenue</small></span>
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-cyan);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Orders</small></span>
              </div>
              <div id="ax-revenue-mixed" aria-label="Mixed chart of monthly revenue area and order volume columns"></div>
            </div>
          </section>

          <section class="ax-card ax-card--flat ax-col--4" role="region" aria-label="Sales by category">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Sales by Category</h2>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div id="ax-category-donut" aria-label="Donut chart of sales by category: apparel 34%, electronics 27%, home 21%, beauty 12%, other 6%"></div>
              <ul class="ax-list ax-list--compact" style="margin-top:var(--ax-space-2);">
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-accent);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Apparel</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$48.6K</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-cyan);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Electronics</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$38.5K</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-violet);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Home &amp; Living</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$30.0K</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-pink);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Beauty</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$17.1K</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-amber);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Other</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$8.6K</span>
                </li>
              </ul>
            </div>
          </section>

          <!-- ───── NICHE ROW: Channels / Inventory / Top Products ───── -->
          <!-- Sales by Channel breakdown -->
          <section class="ax-card ax-col--4" role="region" aria-label="Sales by channel">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Sales by Channel</h2></div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Web store</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$71.4K · 50%</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:50%;background:var(--ax-accent);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Mobile app</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$38.6K · 27%</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:27%;background:var(--ax-viz-cyan);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Marketplace</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$22.8K · 16%</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:16%;background:var(--ax-viz-violet);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">POS / in-store</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$10.0K · 7%</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:7%;background:var(--ax-viz-pink);"></div></div></div>
              </div>
            </div>
          </section>

          <!-- Inventory Status (stacked goal) -->
          <section class="ax-card ax-col--4" role="region" aria-label="Inventory status">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Inventory Status</h2><p class="ax-card__subtitle">3,210 SKUs tracked</p></div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="display:flex;height:14px;border-radius:var(--ax-radius-pill);overflow:hidden;margin-bottom:var(--ax-space-4);">
                <span style="width:78%;background:var(--ax-viz-emerald);" aria-hidden="true"></span>
                <span style="width:15%;background:var(--ax-viz-amber);" aria-hidden="true"></span>
                <span style="width:7%;background:var(--ax-viz-red);" aria-hidden="true"></span>
              </div>
              <ul class="ax-list ax-list--compact">
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-emerald);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">In stock</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">2,504</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-amber);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Low stock</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">481</span>
                </li>
                <li class="ax-list__row" style="border:0;padding-inline:0;">
                  <span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-red);display:inline-block;"></i></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Out of stock</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">225</span>
                </li>
              </ul>
              <div class="ax-divider" style="margin:var(--ax-space-3) 0;"></div>
              <div class="ax-alert ax-alert--warning" role="status">
                <svg class="ax-alert__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 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"/><path d="M12 16h.01"/></svg>
                <div class="ax-alert__content"><p class="ax-alert__message">14 SKUs below reorder threshold.</p></div>
              </div>
            </div>
          </section>

          <!-- Top Products (with-thumb + bar) -->
          <section class="ax-card ax-col--4" role="region" aria-label="Top products">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Top Products</h2></div>
              <a class="ax-btn ax-btn--link" href="#">View all</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div 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) 18%,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="M3 9l4.5 0"/><path d="M3 6l9 0"/><path d="M3 12l9 0"/><path d="M14 6l6 0l0 13l-6 0z"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-text-truncate" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Aurora Wireless Buds</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Electronics · 1,204 sold</div>
                  <div class="ax-progress ax-progress--xs" style="margin-top:6px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:94%;"></div></div></div>
                </div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$129</div>
              </div>
              <div 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) 18%,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="M4 8a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"/><path d="M2 8l10 6l10 -6"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-text-truncate" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Linen Oversized Tee</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Apparel · 982 sold</div>
                  <div class="ax-progress ax-progress--xs" style="margin-top:6px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:77%;"></div></div></div>
                </div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$42</div>
              </div>
              <div 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-pink) 18%,transparent);color:var(--ax-viz-pink);"><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="M9 11l-4 4l4 4"/><path d="M5 15h11a4 4 0 0 0 0 -8h-1"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-text-truncate" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Hydra Glow Serum</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Beauty · 854 sold</div>
                  <div class="ax-progress ax-progress--xs" style="margin-top:6px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:66%;"></div></div></div>
                </div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$38</div>
              </div>
              <div 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) 18%,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="M4 7h16"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 11v4"/><path d="M15 11v4"/></svg></span>
                <div style="flex:1 1 auto;min-width:0;">
                  <div class="ax-text-truncate" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Matte Ceramic Planter</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Home · 611 sold</div>
                  <div class="ax-progress ax-progress--xs" style="margin-top:6px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:48%;"></div></div></div>
                </div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">$28</div>
              </div>
            </div>
          </section>

          <!-- ───── RECENT ORDERS (table) + Low-Stock Alerts ───── -->
          <section class="ax-card ax-col--8" role="region" aria-label="Recent orders">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Recent Orders</h2>
                <p class="ax-card__subtitle">Latest store orders</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">All orders</a>
            </div>
            <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">Customer</th>
                    <th class="ax-table__th" scope="col">Date</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Total</th>
                    <th class="ax-table__th" scope="col">Status</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-text-strong);">#AX-10428</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Camila Rossi</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">3 items</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 12</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$312.00</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>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">#AX-10427</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Henry Whitlock</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">1 item</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 12</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$129.00</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill"><span class="ax-badge__dot"></span>Shipped</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">#AX-10426</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Aiko Tanaka</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">5 items</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 11</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$486.40</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>Processing</span></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">#AX-10425</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Mateo Alvarez</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">2 items</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 11</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$84.00</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>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">#AX-10424</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Sofia Lindqvist</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">4 items</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 10</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$218.50</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>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">#AX-10423</td>
                    <td class="ax-table__td"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Daniel Cho</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">1 item</div></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">Jun 10</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$38.00</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>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <!-- Low-Stock Alerts + Top Customers -->
          <section class="ax-card ax-col--4" role="region" aria-label="Low stock alerts">
            <div class="ax-card__header">
              <div class="ax-card__titles"><h2 class="ax-card__title">Low-Stock Alerts</h2></div>
              <a class="ax-btn ax-btn--link" href="#">Restock</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <ul class="ax-list ax-list--compact">
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-warning-500) 20%,transparent);color:var(--ax-warning-500);"><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="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"/><path d="M12 16h.01"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Hydra Glow Serum</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU BTY-2210</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--warning">8 left</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-danger-500) 20%,transparent);color:var(--ax-danger-500);"><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="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"/><path d="M12 16h.01"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Aurora Wireless Buds</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU ELC-0042</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--danger">2 left</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-warning-500) 20%,transparent);color:var(--ax-warning-500);"><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="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"/><path d="M12 16h.01"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Linen Oversized Tee — M</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU APP-1180</span></span>
                  <span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--warning">11 left</span></span>
                </li>
              </ul>
              <div class="ax-card__header" style="border-top:1px solid var(--ax-border);">
                <div class="ax-card__titles"><h2 class="ax-card__title">Top Customers</h2></div>
              </div>
              <ul class="ax-list ax-list--compact">
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-accent) 22%,transparent);color:var(--ax-accent);font-weight:600;">CR</span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Camila Rossi</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">28 orders</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$4,210</span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-cyan) 22%,transparent);color:var(--ax-viz-cyan);font-weight:600;">AT</span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Aiko Tanaka</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">22 orders</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$3,684</span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-violet) 22%,transparent);color:var(--ax-viz-violet);font-weight:600;">SL</span></span>
                  <span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Sofia Lindqvist</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">19 orders</span></span>
                  <span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">$2,940</span>
                </li>
              </ul>
            </div>
          </section>

        </div>
{% endblock %}

{% block scripts %}
<script type="module">
  const { renderChart } = window.Vireo.charts;
  const cv = (n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim();

  // Monthly revenue target — radial gauge (opener, P4)
  const target = document.getElementById('ax-ecom-target');
  if (target) renderChart(target, 'radialBar', [68], {
    height: 220, legend: 'none', accent: true,
    apex: {
      plotOptions: { radialBar: {
        hollow: { size: '64%' },
        track: { background: cv('--ax-border') },
        dataLabels: {
          name: { show: true, fontFamily: cv('--ax-font-sans'), color: cv('--ax-text-muted'), offsetY: 22, fontSize: '12px' },
          value: { show: true, fontFamily: cv('--ax-font-mono'), color: cv('--ax-text-strong'), fontSize: '28px', fontWeight: 700, offsetY: -12, formatter: (v) => v + '%' },
        },
      } },
      labels: ['of target'],
    },
  });

  const mixed = document.getElementById('ax-revenue-mixed');
  if (mixed) renderChart(mixed, 'line', [
    { name: 'Revenue', type: 'line', data: [82000,91000,88000,99000,108000,104000,118000,124000,121000,132000,138000,142800] },
    { name: 'Orders', type: 'column', data: [2900,3200,3100,3500,3800,3700,4100,4300,4200,4500,4600,4612] },
  ], {
    height: 320, legend: 'none',
    apex: {
      colors: [cv('--ax-accent'), cv('--ax-viz-cyan')],
      stroke: { width: [2.5, 0], curve: 'smooth' },
      fill: { type: ['solid','solid'], opacity: [1, 1] },
      plotOptions: { bar: { borderRadius: 4, columnWidth: '46%' } },
      yaxis: [
        { labels: { formatter: (v) => '$' + (v/1000).toFixed(0) + 'K' } },
        { opposite: true, labels: { formatter: (v) => (v/1000).toFixed(1) + 'K' } },
      ],
      xaxis: { categories: ['Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun'] },
    },
  });

  const el = document.getElementById('ax-category-donut');
  if (el) renderChart(el, 'donut', [34,27,21,12,6], {
    height: 230, legend: 'none',
    apex: {
      labels: ['Apparel','Electronics','Home','Beauty','Other'],
      colors: [cv('--ax-accent'), cv('--ax-viz-cyan'), cv('--ax-viz-violet'), cv('--ax-viz-pink'), cv('--ax-viz-amber')],
      stroke: { width: 0 },
      plotOptions: { pie: { donut: { size: '72%', labels: {
        show: true, name: { fontFamily: cv('--ax-font-sans') },
        value: { fontFamily: cv('--ax-font-mono'), fontWeight: 600 },
        total: { show: true, label: 'Net sales', formatter: () => '$142.8K' } } } } },
    },
  });
</script>
{% endblock %}