{% extends 'base.html' %}

{# utilities/spacing — faithful port of src/html/utilities/spacing.html.
   Same DOM/classes/ARIA, same demo copy and Alpine helpers. Reference hrefs
   converted to clean Django routes (# -> /x/). #}

{% 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">Spacing scale</h1>
              <p class="ax-page-head__subtitle">A single 4px-based rhythm — <code class="ax-code">--ax-space-1</code> through <code class="ax-code">--ax-space-20</code> — drives every gap, pad and margin.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/utilities/colors/">
                <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 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/><path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
                <span class="ax-btn__label">Color tokens</span>
              </a>
              <a class="ax-btn ax-btn--primary" href="/utilities/borders/">
                <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="M16 4h2a2 2 0 0 1 2 2v2"/><path d="M20 16v2a2 2 0 0 1 -2 2h-2"/><path d="M8 20h-2a2 2 0 0 1 -2 -2v-2"/><path d="M4 8v-2a2 2 0 0 1 2 -2h2"/></svg>
                <span class="ax-btn__label">Borders &amp; radius</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid"
          x-data="{ flash:null, copy(v){ navigator.clipboard?.writeText(v); this.flash=v; setTimeout(()=>{ if(this.flash===v) this.flash=null; },1300); } }">

          <!-- The ruler -->
          <section class="ax-card ax-col--8" role="region" aria-label="Spacing scale ruler">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">--ax-space-N</span>
                <h2 class="ax-card__title">The scale</h2>
                <p class="ax-card__subtitle">Geometric-ish steps tuned for dense admin UIs. Click any row to copy its token.</p>
              </div>
              <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill">base · 4px</span>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-1);">
              <template x-for="s in [
                [1,'4px','icon ↔ label, chip inner'],
                [2,'8px','cluster gap, badge pad'],
                [3,'12px','list-row gap, control pad'],
                [4,'16px','card sub-stacks, mobile gutter'],
                [5,'20px','section blocks'],
                [6,'24px','card padding · grid gutter'],
                [8,'32px','card → card vertical'],
                [10,'40px','page-section breaks'],
                [12,'48px','footer height'],
                [16,'64px','hero whitespace'],
                [20,'80px','empty-state padding']
              ]" :key="s[0]">
                <button type="button" @click="copy('--ax-space-'+s[0])"
                  class="ax-cluster"
                  style="width:100%;flex-wrap:nowrap;gap:var(--ax-space-3);padding:var(--ax-space-2) var(--ax-space-3);border:1px solid transparent;border-radius:var(--ax-radius-md);background:transparent;cursor:pointer;text-align:start;"
                  onmouseover="this.style.background='var(--ax-fill-hover)'" onmouseout="this.style.background='transparent'"
                  :aria-label="'Copy --ax-space-'+s[0]">
                  <code class="ax-num" style="flex:0 0 92px;font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-muted);" x-text="flash==='--ax-space-'+s[0] ? 'Copied!' : '--ax-space-'+s[0]"></code>
                  <span class="ax-num" style="flex:0 0 44px;font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-align:end;" x-text="s[1]"></span>
                  <span aria-hidden="true" :style="'flex:0 0 auto;height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-accent);opacity:.85;width:var(--ax-space-'+s[0]+');'"></span>
                  <span class="ax-truncate" style="flex:1 1 auto;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="s[2]"></span>
                </button>
              </template>
            </div>
          </section>

          <!-- Padding tokens live demo -->
          <section class="ax-card ax-col--4" role="region" aria-label="Padding nesting demo">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Nesting</span>
                <h2 class="ax-card__title">Padding in practice</h2>
                <p class="ax-card__subtitle">How the steps nest in a real card.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="border:1px dashed var(--ax-border-strong);border-radius:var(--ax-radius-lg);padding:var(--ax-space-6);">
                <span class="ax-eyebrow" style="display:block;margin-bottom:var(--ax-space-3);">padding: --ax-space-6</span>
                <div style="border:1px dashed var(--ax-border-strong);border-radius:var(--ax-radius-md);padding:var(--ax-space-4);background:var(--ax-surface-subtle);">
                  <span class="ax-eyebrow" style="display:block;margin-bottom:var(--ax-space-3);">padding: --ax-space-4</span>
                  <div style="border:1px dashed var(--ax-border-strong);border-radius:var(--ax-radius-sm);padding:var(--ax-space-2);background:var(--ax-accent-wash);">
                    <span class="ax-eyebrow" style="color:var(--ax-accent);">padding: --ax-space-2</span>
                  </div>
                </div>
              </div>
              <p style="margin:var(--ax-space-4) 0 0;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Step down one notch per nesting level — 6 → 4 → 2 — to keep visual rhythm tight without re-tuning per component.</p>
            </div>
          </section>

          <!-- Gap demo -->
          <section class="ax-card ax-col--6" role="region" aria-label="Gap utility demo">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Flex / grid gap</span>
                <h2 class="ax-card__title">Gaps you can feel</h2>
                <p class="ax-card__subtitle">Same six tiles, four different gap tokens.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <template x-for="g in [['--ax-space-2','8'],['--ax-space-3','12'],['--ax-space-4','16'],['--ax-space-6','24']]" :key="g[0]">
                <div>
                  <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-2);">
                    <code class="ax-code" x-text="'gap: var('+g[0]+')'"></code>
                    <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);" x-text="g[1]+'px'"></span>
                  </div>
                  <div :style="'display:flex;gap:var('+g[0]+');'">
                    <template x-for="i in 6" :key="i"><i aria-hidden="true" style="flex:1;height:24px;border-radius:var(--ax-radius-sm);background:var(--ax-accent);opacity:.8;"></i></template>
                  </div>
                </div>
              </template>
            </div>
          </section>

          <!-- Stack rhythm -->
          <section class="ax-card ax-col--6" role="region" aria-label="Vertical stack rhythm">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">.ax-stack</span>
                <h2 class="ax-card__title">Vertical rhythm</h2>
                <p class="ax-card__subtitle"><code class="ax-code">.ax-stack</code> flows children with a token gap — override via <code class="ax-code">--ax-gap</code>.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <div class="ax-stack" style="--ax-gap:var(--ax-space-2);">
                <span class="ax-eyebrow">--ax-gap: --ax-space-2 (tight)</span>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-surface-subtle);border:1px solid var(--ax-border);"></div>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-surface-subtle);border:1px solid var(--ax-border);"></div>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-surface-subtle);border:1px solid var(--ax-border);"></div>
              </div>
              <hr class="ax-divider">
              <div class="ax-stack" style="--ax-gap:var(--ax-space-6);">
                <span class="ax-eyebrow">--ax-gap: --ax-space-6 (roomy)</span>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-accent-wash);border:1px solid var(--ax-border);"></div>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-accent-wash);border:1px solid var(--ax-border);"></div>
                <div style="height:14px;border-radius:var(--ax-radius-xs);background:var(--ax-accent-wash);border:1px solid var(--ax-border);"></div>
              </div>
            </div>
          </section>

          <section class="ax-col--12">
            <div class="ax-alert ax-alert--info ax-alert--accent-edge">
              <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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 9h.01"/><path d="M11 12h1v4h1"/></svg>
              <div class="ax-alert__content">
                <p class="ax-alert__title">Snap to the scale</p>
                <p class="ax-alert__message">Reach for a <code class="ax-code">--ax-space-N</code> token before a raw px value. Card padding is <code class="ax-code">--ax-space-6</code>, the grid gutter is <code class="ax-code">--ax-space-6</code> (16 below 768px), and card-to-card stacking is <code class="ax-code">--ax-space-8</code>.</p>
              </div>
            </div>
          </section>

        </div>
{% endblock %}