{% 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">Images</h1>
              <p class="ax-page-head__subtitle">Media utilities — rounded, fixed aspect ratios, thumbnails, figure &amp; caption, and object-fit. Frames carry the glass border so media sits cleanly on any surface.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/></svg>
                <span class="ax-btn__label">Media library</span>
              </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="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 9l5 -5l5 5"/><path d="M12 4l0 12"/></svg>
                <span class="ax-btn__label">Upload</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- Rounding -->
          <section class="ax-card ax-col--12" role="region" aria-label="Image rounding">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Corners</span>
                <h2 class="ax-card__title">Rounding</h2>
                <p class="ax-card__subtitle">Square through pill — every radius from the <code class="ax-code">--ax-radius-*</code> scale.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--ax-space-5);">
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-viz-cyan),var(--ax-viz-violet));border:1px solid var(--ax-border);border-radius:0;"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Square</figcaption>
              </figure>
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-viz-violet),var(--ax-viz-pink));border:1px solid var(--ax-border);border-radius:var(--ax-radius-sm);"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Radius sm</figcaption>
              </figure>
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-viz-pink),var(--ax-viz-amber));border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Radius md</figcaption>
              </figure>
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-viz-amber),var(--ax-viz-emerald));border:1px solid var(--ax-border);border-radius:var(--ax-radius-lg);"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Radius lg</figcaption>
              </figure>
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-viz-emerald),var(--ax-viz-cyan));border:1px solid var(--ax-border);border-radius:var(--ax-radius-xl);"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Radius xl</figcaption>
              </figure>
              <figure style="margin:0;text-align:center;">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,var(--ax-accent),var(--ax-viz-violet));border:1px solid var(--ax-border);border-radius:50%;"></div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Circle</figcaption>
              </figure>
            </div>
          </section>

          <!-- Aspect ratios -->
          <section class="ax-card ax-col--8" role="region" aria-label="Aspect ratios">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Framing</span>
                <h2 class="ax-card__title">Aspect ratios</h2>
                <p class="ax-card__subtitle">The <code class="ax-code">.ax-ratio</code> frame crops media to a fixed shape via <code class="ax-code">--ax-ratio</code>.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--ax-space-5);">
              <figure style="margin:0;">
                <div class="ax-ratio" style="--ax-ratio:16/9;border:1px solid var(--ax-border);">
                  <img alt="Aperture Goods storefront banner" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%23A78BFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='320' height='180' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">16 : 9 — banners</figcaption>
              </figure>
              <figure style="margin:0;">
                <div class="ax-ratio" style="--ax-ratio:4/3;border:1px solid var(--ax-border);">
                  <img alt="Product hero, 4 by 3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F472B6'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='240' height='180' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">4 : 3 — content</figcaption>
              </figure>
              <figure style="margin:0;">
                <div class="ax-ratio" style="--ax-ratio:1/1;border:1px solid var(--ax-border);">
                  <img alt="Square product thumbnail" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%2338BDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">1 : 1 — avatars</figcaption>
              </figure>
              <figure style="margin:0;">
                <div class="ax-ratio" style="--ax-ratio:3/4;border:1px solid var(--ax-border);">
                  <img alt="Portrait, 3 by 4" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%23F472B6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='180' height='240' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">3 : 4 — portrait</figcaption>
              </figure>
            </div>
          </section>

          <!-- Thumbnails -->
          <section class="ax-card ax-col--4" role="region" aria-label="Thumbnail strip">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Gallery</span>
                <h2 class="ax-card__title">Thumbnails</h2>
                <p class="ax-card__subtitle">Selectable tiles with an active ring.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;" x-data="{ active: 1 }">
              <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ax-space-3);">
                <template x-for="i in 6" :key="i">
                  <button type="button" class="ax-thumb" :class="{ 'is-active': active===i }" @click="active=i"
                    :style="`background:linear-gradient(135deg,var(--ax-viz-${['cyan','violet','pink','amber','emerald','cyan'][i-1]}),var(--ax-accent));`"
                    :aria-pressed="active===i" :aria-label="`Select image ${i}`"></button>
                </template>
              </div>
              <p style="margin:var(--ax-space-4) 0 0;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Selected: image <span class="ax-num" x-text="active"></span> of 6</p>
            </div>
          </section>

          <!-- Object-fit -->
          <section class="ax-card ax-col--8" role="region" aria-label="Object-fit behavior">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Sizing</span>
                <h2 class="ax-card__title">Object-fit</h2>
                <p class="ax-card__subtitle">Same source, same 4:3 frame — three fit strategies.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--ax-space-5);">
              <figure style="margin:0;">
                <div style="aspect-ratio:4/3;border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);overflow:hidden;background:var(--ax-surface-subtle);">
                  <img alt="Cover fit demo" style="width:100%;height:100%;object-fit:cover;display:block;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='320'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2338BDF8'/%3E%3Cstop offset='1' stop-color='%23A78BFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='320' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);"><code class="ax-code">cover</code> — fills, crops</figcaption>
              </figure>
              <figure style="margin:0;">
                <div style="aspect-ratio:4/3;border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);overflow:hidden;background:var(--ax-surface-subtle);">
                  <img alt="Contain fit demo" style="width:100%;height:100%;object-fit:contain;display:block;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='320'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F472B6'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='320' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);"><code class="ax-code">contain</code> — fits, letterboxed</figcaption>
              </figure>
              <figure style="margin:0;">
                <div style="aspect-ratio:4/3;border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);overflow:hidden;background:var(--ax-surface-subtle);">
                  <img alt="Fill stretch demo" style="width:100%;height:100%;object-fit:fill;display:block;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='320'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2334D399'/%3E%3Cstop offset='1' stop-color='%2338BDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='320' fill='url(%23g)'/%3E%3C/svg%3E" />
                </div>
                <figcaption style="margin-top:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-muted);"><code class="ax-code">fill</code> — stretched</figcaption>
              </figure>
            </div>
          </section>

          <!-- Figure with caption & overlay -->
          <section class="ax-card ax-col--6" role="region" aria-label="Figure with caption">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Editorial</span>
                <h2 class="ax-card__title">Figure &amp; caption</h2>
                <p class="ax-card__subtitle">A captioned figure with a gradient scrim title.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <figure style="margin:0;">
                <div style="position:relative;aspect-ratio:16/9;border-radius:var(--ax-radius-lg);overflow:hidden;border:1px solid var(--ax-border);background:linear-gradient(135deg,var(--ax-viz-violet),var(--ax-viz-cyan));">
                  <span aria-hidden="true" style="position:absolute;inset-block-end:0;inset-inline:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);"></span>
                  <span class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill" style="position:absolute;inset-block-start:var(--ax-space-3);inset-inline-start:var(--ax-space-3);">New</span>
                  <div style="position:absolute;inset-block-end:var(--ax-space-4);inset-inline-start:var(--ax-space-4);color:#fff;">
                    <div style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);font-weight:var(--ax-weight-bold);">Brass Task Light</div>
                    <div style="font-size:var(--ax-text-xs);opacity:.9;">Lighting · <span class="ax-num">$182</span></div>
                  </div>
                </div>
                <figcaption style="margin-top:var(--ax-space-3);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
                  Our best-selling task light, photographed for the Summer ’26 lookbook.
                </figcaption>
              </figure>
            </div>
          </section>

          <!-- Avatars & badge overlay -->
          <section class="ax-card ax-col--6" role="region" aria-label="Avatar images">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">People</span>
                <h2 class="ax-card__title">Avatars &amp; status</h2>
                <p class="ax-card__subtitle">Circular &amp; squircle crops with status dots and a stacked group.</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-cluster" style="gap:var(--ax-space-4);align-items:flex-end;">
                <span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><span class="ax-avatar__initials">AS</span><span class="ax-avatar__status ax-avatar__status--online"></span></span>
                <span class="ax-avatar ax-avatar--md" style="background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><span class="ax-avatar__initials">MR</span></span>
                <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-pink) 18%,transparent);color:var(--ax-viz-pink);"><span class="ax-avatar__initials">LB</span></span>
                <span class="ax-avatar ax-avatar--xl ax-avatar--ringed" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);"><span class="ax-avatar__initials">DO</span></span>
              </div>
              <div class="ax-divider"></div>
              <div>
                <div class="ax-eyebrow" style="margin-bottom:var(--ax-space-3);">Stacked group</div>
                <div style="display:flex;align-items:center;">
                  <span class="ax-avatar ax-avatar--md ax-avatar--ringed" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><span class="ax-avatar__initials">AS</span></span>
                  <span class="ax-avatar ax-avatar--md ax-avatar--ringed" style="margin-inline-start:-10px;background:color-mix(in oklab,var(--ax-viz-violet) 18%,transparent);color:var(--ax-viz-violet);"><span class="ax-avatar__initials">MR</span></span>
                  <span class="ax-avatar ax-avatar--md ax-avatar--ringed" style="margin-inline-start:-10px;background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><span class="ax-avatar__initials">PN</span></span>
                  <span class="ax-avatar ax-avatar--md ax-avatar--ringed" style="margin-inline-start:-10px;background:var(--ax-surface-subtle);color:var(--ax-text-muted);font-size:var(--ax-text-xs);">+5</span>
                </div>
              </div>
            </div>
          </section>

        </div>
{% endblock %}