{% 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">Offcanvas</h1>
              <p class="ax-page-head__subtitle">Slide-in drawers from any edge — filters, cart, notifications, settings and command bars.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/ui/modals/">
                <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 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"/><path d="M4 9h16"/></svg>
                <span class="ax-btn__label">Modals</span>
              </a>
            </div>
          </div>
        </div>

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

          <!-- ═══════ EDGES ═══════ -->
          <section class="ax-card ax-col--8" role="region" aria-label="Offcanvas edges">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Placement</span>
                <h2 class="ax-card__title">Drawer from any edge</h2>
                <p class="ax-card__subtitle">Start, end, top and bottom — each with header, scrolling body and footer.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-wrap:wrap;gap:var(--ax-space-3);">

              <!-- START (left) — filters -->
              <div x-data="axOffcanvas('start')">
                <button type="button" class="ax-btn ax-btn--secondary" @click="show()">
                  <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 6l-6 6l6 6"/></svg>
                  <span class="ax-btn__label">From start</span>
                </button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--start" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-start-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateX(0)' : 'transform:translateX(-100%)'">
                      <div class="ax-offcanvas__header">
                        <h2 class="ax-offcanvas__title" id="oc-start-title">Filters</h2>
                        <button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close filters"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                      </div>
                      <div class="ax-offcanvas__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
                        <div class="ax-field">
                          <span class="ax-label">Status</span>
                          <div style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                            <label class="ax-cluster" style="gap:var(--ax-space-2);cursor:pointer;font-size:var(--ax-text-sm);color:var(--ax-text);"><input type="checkbox" class="ax-checkbox" checked> Delivered</label>
                            <label class="ax-cluster" style="gap:var(--ax-space-2);cursor:pointer;font-size:var(--ax-text-sm);color:var(--ax-text);"><input type="checkbox" class="ax-checkbox" checked> Shipped</label>
                            <label class="ax-cluster" style="gap:var(--ax-space-2);cursor:pointer;font-size:var(--ax-text-sm);color:var(--ax-text);"><input type="checkbox" class="ax-checkbox"> Pending</label>
                            <label class="ax-cluster" style="gap:var(--ax-space-2);cursor:pointer;font-size:var(--ax-text-sm);color:var(--ax-text);"><input type="checkbox" class="ax-checkbox"> Cancelled</label>
                          </div>
                        </div>
                        <hr class="ax-divider">
                        <div class="ax-field">
                          <label class="ax-label" for="oc-min">Minimum total</label>
                          <input id="oc-min" type="text" class="ax-input ax-num" value="$0" style="font-family:var(--ax-font-mono);">
                        </div>
                        <div class="ax-field">
                          <label class="ax-label" for="oc-seg">Segment</label>
                          <select id="oc-seg" class="ax-select"><option>All segments</option><option>VIP</option><option>Returning</option><option>New</option></select>
                        </div>
                      </div>
                      <div class="ax-offcanvas__footer" style="justify-content:space-between;">
                        <button type="button" class="ax-btn ax-btn--ghost" @click="hide()">Reset</button>
                        <button type="button" class="ax-btn ax-btn--primary" @click="hide(); $toast({ msg:'Filters applied', ttl:2500 })">Apply filters</button>
                      </div>
                    </aside>
                  </div>
                </template>
              </div>

              <!-- END (right) — cart -->
              <div x-data="axOffcanvas('end')">
                <button type="button" class="ax-btn ax-btn--secondary" @click="show()">
                  <span class="ax-btn__label">From end</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="M9 6l6 6l-6 6"/></svg>
                </button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--end" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-cart-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateX(0)' : 'transform:translateX(100%)'">
                      <div class="ax-offcanvas__header">
                        <h2 class="ax-offcanvas__title" id="oc-cart-title">Your cart <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill ax-num" style="margin-inline-start:6px;">4</span></h2>
                        <button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close cart"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                      </div>
                      <div class="ax-offcanvas__body" style="padding:0;">
                        <ul class="ax-list">
                          <li class="ax-list__row">
                            <span class="ax-list__leading"><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="M8 9h8v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"/><path d="M9 6a3 3 0 0 1 6 0"/><path d="M8 9l8 0"/></svg></span></span>
                            <span class="ax-list__content"><span class="ax-list__title">Matte Ceramic Mug</span><span class="ax-list__meta">Qty 2</span></span>
                            <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$48.00</span>
                          </li>
                          <li class="ax-list__row">
                            <span class="ax-list__leading"><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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21v-16a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/></svg></span></span>
                            <span class="ax-list__content"><span class="ax-list__title">Grid Notebook A5</span><span class="ax-list__meta">Qty 1</span></span>
                            <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$16.00</span>
                          </li>
                          <li class="ax-list__row">
                            <span class="ax-list__leading"><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="M8 9h8v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"/><path d="M9 6a3 3 0 0 1 6 0"/><path d="M8 9l8 0"/></svg></span></span>
                            <span class="ax-list__content"><span class="ax-list__title">Aperture Desk Lamp</span><span class="ax-list__meta">Qty 1</span></span>
                            <span class="ax-list__trailing ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);">$129.00</span>
                          </li>
                        </ul>
                      </div>
                      <div class="ax-offcanvas__footer" style="flex-direction:column;align-items:stretch;gap:var(--ax-space-3);">
                        <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Subtotal</span><b class="ax-num" style="font-family:var(--ax-font-display);color:var(--ax-text-strong);">$193.00</b></div>
                        <button type="button" class="ax-btn ax-btn--primary ax-btn--block" @click="hide(); $toast({ msg:'Proceeding to checkout', ttl:2500 })">Checkout</button>
                      </div>
                    </aside>
                  </div>
                </template>
              </div>

              <!-- TOP — notifications -->
              <div x-data="axOffcanvas('top')">
                <button type="button" class="ax-btn ax-btn--secondary" @click="show()">
                  <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 15l6 -6l6 6"/></svg>
                  <span class="ax-btn__label">From top</span>
                </button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--top" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-top-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateY(0)' : 'transform:translateY(-100%)'">
                      <div class="ax-offcanvas__header">
                        <h2 class="ax-offcanvas__title" id="oc-top-title">Notifications</h2>
                        <button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close notifications"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                      </div>
                      <div class="ax-offcanvas__body">
                        <ul class="ax-timeline">
                          <li class="ax-timeline__item ax-timeline__item--success">
                            <span class="ax-timeline__marker"><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="M5 12l5 5l10 -10"/></svg></span>
                            <div class="ax-timeline__content"><p class="ax-timeline__title"><b style="color:var(--ax-text-strong);">Tomás Herrera</b> moved deal "Brightway Retail" to Negotiation</p><span class="ax-timeline__time">12m ago</span></div>
                          </li>
                          <li class="ax-timeline__item">
                            <span class="ax-timeline__marker" style="color:var(--ax-viz-violet);"><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="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z"/></svg></span>
                            <div class="ax-timeline__content"><p class="ax-timeline__title"><b style="color:var(--ax-text-strong);">Lena Brandt</b> mentioned you in "Design review"</p><span class="ax-timeline__time">1h ago</span></div>
                          </li>
                          <li class="ax-timeline__item">
                            <span class="ax-timeline__marker" style="color:var(--ax-viz-cyan);"><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 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M15 19a2 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>
                            <div class="ax-timeline__content"><p class="ax-timeline__title">Order <span style="color:var(--ax-accent);">#10482</span> has shipped</p><span class="ax-timeline__time">2h ago</span></div>
                          </li>
                        </ul>
                      </div>
                      <div class="ax-offcanvas__footer"><button type="button" class="ax-btn ax-btn--ghost" @click="hide(); $toast({ msg:'All marked as read', ttl:2500 })">Mark all read</button><button type="button" class="ax-btn ax-btn--secondary" @click="hide()">Close</button></div>
                    </aside>
                  </div>
                </template>
              </div>

              <!-- BOTTOM — share -->
              <div x-data="axOffcanvas('bottom')">
                <button type="button" class="ax-btn ax-btn--secondary" @click="show()">
                  <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>
                  <span class="ax-btn__label">From bottom</span>
                </button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--bottom" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-bottom-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateY(0)' : 'transform:translateY(100%)'">
                      <div class="ax-offcanvas__header">
                        <h2 class="ax-offcanvas__title" id="oc-bottom-title">Share report</h2>
                        <button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close share sheet"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                      </div>
                      <div class="ax-offcanvas__body">
                        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--ax-space-3);">
                          <button type="button" class="ax-btn ax-btn--secondary" style="flex-direction:column;height:auto;padding:var(--ax-space-5);gap:var(--ax-space-2);"><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="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg><span class="ax-btn__label">Email</span></button>
                          <button type="button" class="ax-btn ax-btn--secondary" style="flex-direction:column;height:auto;padding:var(--ax-space-5);gap:var(--ax-space-2);"><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="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M8.7 10.7l6.6 -3.4"/><path d="M8.7 13.3l6.6 3.4"/><path d="M18 6m-2 0a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M18 18m-2 0a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M6 12m-2 0a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/></svg><span class="ax-btn__label">Share link</span></button>
                          <button type="button" class="ax-btn ax-btn--secondary" style="flex-direction:column;height:auto;padding:var(--ax-space-5);gap:var(--ax-space-2);"><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 11l5 5l5 -5"/><path d="M12 4l0 12"/></svg><span class="ax-btn__label">Download</span></button>
                          <button type="button" class="ax-btn ax-btn--secondary" style="flex-direction:column;height:auto;padding:var(--ax-space-5);gap:var(--ax-space-2);"><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 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20 4l-12 12"/><path d="M14 4h6v6"/></svg><span class="ax-btn__label">Open in new tab</span></button>
                        </div>
                        <div class="ax-field" style="margin-top:var(--ax-space-5);">
                          <label class="ax-label" for="oc-link">Shareable link</label>
                          <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:nowrap;">
                            <input id="oc-link" type="text" class="ax-input" readonly value="https://app.vireo.io/r/748-2k-jun" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-sm);">
                            <button type="button" class="ax-btn ax-btn--primary" @click="$toast({ msg:'Link copied', ttl:2000 })">Copy</button>
                          </div>
                        </div>
                      </div>
                    </aside>
                  </div>
                </template>
              </div>

            </div>
          </section>

          <!-- ═══════ SIZES + SETTINGS DRAWER ═══════ -->
          <section class="ax-card ax-col--4" role="region" aria-label="Offcanvas sizes">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Sizing</span>
                <h2 class="ax-card__title">Drawer widths</h2>
                <p class="ax-card__subtitle">Compact, default and wide end-drawers.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);align-items:flex-start;">
              <!-- small -->
              <div x-data="axOffcanvas('end')">
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--block" @click="show()">Compact (320px)</button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--end ax-offcanvas__panel--sm" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-sm-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateX(0)' : 'transform:translateX(100%)'">
                      <div class="ax-offcanvas__header"><h2 class="ax-offcanvas__title" id="oc-sm-title">Quick view</h2><button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button></div>
                      <div class="ax-offcanvas__body"><p style="margin:0;color:var(--ax-text-muted);">A narrow 320px rail — for previews, quick edits and contextual help.</p></div>
                    </aside>
                  </div>
                </template>
              </div>
              <!-- large -->
              <div x-data="axOffcanvas('end')">
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--block" @click="show()">Wide (540px)</button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--end ax-offcanvas__panel--lg" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-lg-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateX(0)' : 'transform:translateX(100%)'">
                      <div class="ax-offcanvas__header"><h2 class="ax-offcanvas__title" id="oc-lg-title">Order detail</h2><button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button></div>
                      <div class="ax-offcanvas__body"><p style="margin:0;color:var(--ax-text-muted);">A roomy 540px panel — fits a detail record, an editor or a multi-field form without feeling cramped.</p></div>
                    </aside>
                  </div>
                </template>
              </div>
              <!-- settings (default end) -->
              <div x-data="axOffcanvas('end')">
                <button type="button" class="ax-btn ax-btn--primary ax-btn--block" @click="show()">
                  <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/></svg>
                  <span class="ax-btn__label">Settings panel</span>
                </button>
                <template x-teleport="body">
                  <div class="ax-offcanvas" x-show="open" x-cloak @keydown.escape.window="hide()">
                    <div class="ax-offcanvas__backdrop" x-show="open" x-transition.opacity @click="hide()"></div>
                    <aside class="ax-offcanvas__panel ax-offcanvas__panel--end" x-show="open" x-trap.inert.noscroll="open" role="dialog" aria-modal="true" aria-labelledby="oc-set-title" style="transition:transform var(--ax-motion-base) var(--ax-ease-standard);" :style="open ? 'transform:translateX(0)' : 'transform:translateX(100%)'">
                      <div class="ax-offcanvas__header"><h2 class="ax-offcanvas__title" id="oc-set-title">Notification settings</h2><button type="button" class="ax-offcanvas__close" @click="hide()" aria-label="Close settings"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button></div>
                      <div class="ax-offcanvas__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
                        <label class="ax-cluster" style="justify-content:space-between;padding:var(--ax-space-3) 0;cursor:pointer;"><span><span style="display:block;font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Email digests</span><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">A weekly summary every Monday</span></span><input type="checkbox" class="ax-switch" checked></label>
                        <hr class="ax-divider">
                        <label class="ax-cluster" style="justify-content:space-between;padding:var(--ax-space-3) 0;cursor:pointer;"><span><span style="display:block;font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Deal updates</span><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">When a deal changes stage</span></span><input type="checkbox" class="ax-switch" checked></label>
                        <hr class="ax-divider">
                        <label class="ax-cluster" style="justify-content:space-between;padding:var(--ax-space-3) 0;cursor:pointer;"><span><span style="display:block;font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Mentions</span><span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">When someone @mentions you</span></span><input type="checkbox" class="ax-switch"></label>
                      </div>
                      <div class="ax-offcanvas__footer"><button type="button" class="ax-btn ax-btn--ghost" @click="hide()">Cancel</button><button type="button" class="ax-btn ax-btn--primary" @click="hide(); $toast({ msg:'Preferences saved', ttl:2500 })">Save</button></div>
                    </aside>
                  </div>
                </template>
              </div>
            </div>
          </section>

        </div>
{% endblock %}