{% extends 'base.html' %}

{% 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">Badges</h1>
              <p class="ax-page-head__subtitle">Status tints, counters, dots, pills &amp; removable chips — every tone ships soft, solid &amp; outline styles.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 4.27c1.5 -.83 3.5 -.83 5 0l5 2.86c1.5 .83 2.5 2.5 2.5 4.27v5.73c0 1.77 -1 3.44 -2.5 4.27l-5 2.86c-1.5 .83 -3.5 .83 -5 0l-5 -2.86c-1.5 -.83 -2.5 -2.5 -2.5 -4.27v-5.73c0 -1.77 1 -3.44 2.5 -4.27z"/><path d="M9 12l2 2l4 -4"/></svg>
                <span class="ax-btn__label">Add label</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- Tones × styles -->
          <section class="ax-card ax-col--8" role="region" aria-label="Badge tones and styles">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Foundation</span>
                <h2 class="ax-card__title">Tones &amp; styles</h2>
                <p class="ax-card__subtitle">Six tones across soft, solid &amp; outline fills.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="display:grid;grid-template-columns:90px 1fr;gap:var(--ax-space-3) var(--ax-space-4);align-items:center;">
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.04em;">Soft</span>
                <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
                  <span class="ax-badge ax-badge--soft ax-badge--accent">Accent</span>
                  <span class="ax-badge ax-badge--soft ax-badge--success">Active</span>
                  <span class="ax-badge ax-badge--soft ax-badge--warning">Pending</span>
                  <span class="ax-badge ax-badge--soft ax-badge--danger">Overdue</span>
                  <span class="ax-badge ax-badge--soft ax-badge--info">Note</span>
                  <span class="ax-badge ax-badge--soft ax-badge--neutral">Draft</span>
                </div>
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.04em;">Solid</span>
                <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
                  <span class="ax-badge ax-badge--solid ax-badge--accent">Accent</span>
                  <span class="ax-badge ax-badge--solid ax-badge--success">Paid</span>
                  <span class="ax-badge ax-badge--solid ax-badge--warning">Low stock</span>
                  <span class="ax-badge ax-badge--solid ax-badge--danger">Failed</span>
                  <span class="ax-badge ax-badge--solid ax-badge--info">Beta</span>
                  <span class="ax-badge ax-badge--solid ax-badge--neutral">Archived</span>
                </div>
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.04em;">Outline</span>
                <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
                  <span class="ax-badge ax-badge--outline ax-badge--accent">Accent</span>
                  <span class="ax-badge ax-badge--outline ax-badge--success">Verified</span>
                  <span class="ax-badge ax-badge--outline ax-badge--warning">Review</span>
                  <span class="ax-badge ax-badge--outline ax-badge--danger">Blocked</span>
                  <span class="ax-badge ax-badge--outline ax-badge--info">Info</span>
                  <span class="ax-badge ax-badge--outline ax-badge--neutral">Neutral</span>
                </div>
              </div>
            </div>
          </section>

          <!-- Sizes & shapes -->
          <section class="ax-card ax-col--4" role="region" aria-label="Badge sizes and shapes">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Form</span>
                <h2 class="ax-card__title">Sizes &amp; shapes</h2>
                <p class="ax-card__subtitle">Default &amp; small, square or pill.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);align-items:center;">
                <span class="ax-badge ax-badge--soft ax-badge--accent">Default</span>
                <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--sm">Small</span>
              </div>
              <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);align-items:center;">
                <span class="ax-badge ax-badge--soft ax-badge--success">Square</span>
                <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill">Pill</span>
                <span class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill">Pill solid</span>
              </div>
            </div>
          </section>

          <!-- With dots -->
          <section class="ax-card ax-col--4" role="region" aria-label="Status dot badges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Status</span>
                <h2 class="ax-card__title">Dot badges</h2>
                <p class="ax-card__subtitle">Leading dot pairs color with a glyph-free label.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
              <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Online</span>
              <span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill"><span class="ax-badge__dot"></span>Away</span>
              <span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill"><span class="ax-badge__dot"></span>Busy</span>
              <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill"><span class="ax-badge__dot"></span>Offline</span>
              <span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill"><span class="ax-badge__dot"></span>Syncing</span>
            </div>
          </section>

          <!-- With icons -->
          <section class="ax-card ax-col--4" role="region" aria-label="Badges with icons">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Affordance</span>
                <h2 class="ax-card__title">With icons</h2>
                <p class="ax-card__subtitle">Glyph reinforces the meaning of each state.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
              <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>Approved</span>
              <span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7v5l3 3"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/></svg>Pending</span>
              <span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>Rejected</span>
              <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>Featured</span>
              <span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9h.01"/><path d="M11 12h1v4h1"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/></svg>Info</span>
            </div>
          </section>

          <!-- Trend deltas -->
          <section class="ax-card ax-col--4" role="region" aria-label="Trend delta badges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Metrics</span>
                <h2 class="ax-card__title">Trend deltas</h2>
                <p class="ax-card__subtitle">Arrow + sign so color is never the only cue.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-wrap:wrap;gap:var(--ax-space-2);">
              <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill ax-num">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>12.4%</span>
              <span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill ax-num">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>3.1%</span>
              <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill ax-num">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>8.1%</span>
              <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill ax-num">
                <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/></svg>0.0%</span>
            </div>
          </section>

          <!-- Counters -->
          <section class="ax-card ax-col--4" role="region" aria-label="Counter badges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Numeric</span>
                <h2 class="ax-card__title">Counters &amp; notifications</h2>
                <p class="ax-card__subtitle">Mono, tabular, on icons or text.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-wrap:wrap;gap:var(--ax-space-5);align-items:center;">
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Notifications, 5 unread" style="position:relative;overflow:visible;">
                <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="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg>
                <span class="ax-badge ax-badge--count ax-badge--danger" aria-hidden="true" style="position:absolute;top:-2px;inset-inline-end:-2px;">5</span>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Cart, 4 items" style="position:relative;overflow:visible;">
                <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 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 19m-2 0a2 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 class="ax-badge ax-badge--count" aria-hidden="true" style="position:absolute;top:-2px;inset-inline-end:-2px;">4</span>
              </button>
              <span style="display:inline-flex;align-items:center;gap:var(--ax-space-2);font-size:var(--ax-text-sm);color:var(--ax-text);">Inbox <span class="ax-badge ax-badge--count">128</span></span>
              <span style="display:inline-flex;align-items:center;gap:var(--ax-space-2);font-size:var(--ax-text-sm);color:var(--ax-text);">Alerts <span class="ax-badge ax-badge--count ax-badge--danger">99+</span></span>
            </div>
          </section>

          <!-- Removable chips -->
          <section class="ax-card ax-col--4" role="region" aria-label="Removable chips">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Interactive</span>
                <h2 class="ax-card__title">Removable chips</h2>
                <p class="ax-card__subtitle">Active filters you can dismiss.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;"
              x-data="{ chips:['Lighting','In stock','Under $100','Rating 4+','Aperture Goods'] }">
              <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-2);min-height:24px;">
                <template x-for="c in chips" :key="c">
                  <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--chip">
                    <span x-text="c"></span>
                    <button type="button" class="ax-badge__remove" @click="chips = chips.filter(x => x !== c)" :aria-label="'Remove ' + c">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
                    </button>
                  </span>
                </template>
                <span x-show="!chips.length" x-cloak style="font-size:var(--ax-text-sm);color:var(--ax-text-subtle);">All filters cleared.</span>
              </div>
              <button type="button" class="ax-btn ax-btn--link ax-btn--sm" style="margin-top:var(--ax-space-3);" @click="chips=['Lighting','In stock','Under $100','Rating 4+','Aperture Goods']"><span class="ax-btn__label">Reset filters</span></button>
            </div>
          </section>

          <!-- In context -->
          <section class="ax-card ax-col--12" role="region" aria-label="Badges in a table">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">In context</span>
                <h2 class="ax-card__title">Order status cells</h2>
                <p class="ax-card__subtitle">Badges as semantic status pills inside a real table.</p>
              </div>
              <a class="ax-btn ax-btn--link" href="/ecommerce/orders/">All orders</a>
            </div>
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover" style="min-width:640px;">
                <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 ax-table__th--num" scope="col">Total</th>
                    <th class="ax-table__th" scope="col">Payment</th>
                    <th class="ax-table__th" scope="col">Fulfilment</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);">#10482</td>
                    <td class="ax-table__td">Camila Rossi</td>
                    <td class="ax-table__td ax-table__td--num">$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>Paid</span></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);">#10481</td>
                    <td class="ax-table__td">Henry Whitlock</td>
                    <td class="ax-table__td ax-table__td--num">$129.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>Paid</span></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);">#10475</td>
                    <td class="ax-table__td">Yuki Tanaka</td>
                    <td class="ax-table__td ax-table__td--num">$225.00</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>Pending</span></td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill"><span class="ax-badge__dot"></span>Unfulfilled</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);">#10473</td>
                    <td class="ax-table__td">Nadia Haddad</td>
                    <td class="ax-table__td ax-table__td--num">$238.00</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill"><span class="ax-badge__dot"></span>Refunded</span></td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill"><span class="ax-badge__dot"></span>Cancelled</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

        </div>
{% endblock %}