{% extends 'base.html' %}

{% block main %}
<div x-data="axAdvancedForms()">


        <!-- ════════════════ 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">Advanced controls</h1>
              <p class="ax-page-head__subtitle">Sliders, toggles, tag inputs, comboboxes and rating widgets — the richer end of the form kit.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/forms/elements/">
                <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="M5 12h14"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                <span class="ax-btn__label">Basic elements</span>
              </a>
              <button type="button" class="ax-btn ax-btn--primary" @click="save()" :aria-busy="saving">
                <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="M5 12l5 5l10 -10"/></svg>
                <span class="ax-btn__label" x-text="saving ? 'Saving…' : 'Save preferences'"></span>
              </button>
            </div>
          </div>
        </div>

        <!-- toast -->
        <div x-show="toast" x-transition x-cloak style="position:fixed;bottom:24px;right:24px;z-index:60;">
          <div class="ax-cluster" style="gap:var(--ax-space-2);padding:var(--ax-space-3) var(--ax-space-4);background:var(--ax-surface-overlay);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);box-shadow:var(--ax-shadow-lg);">
            <span style="color:var(--ax-viz-emerald);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span>
            <span style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);">Preferences saved</span>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <form @submit.prevent="save()" class="ax-dash-grid">

          <!-- ───── TAGS / CHIPS INPUT ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Tags input">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Tokenized input</span>
                <h2 class="ax-card__title">Tags &amp; chips</h2>
                <p class="ax-card__subtitle">Enter, comma or Tab commits · Backspace removes the last chip.</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-field">
                <label class="ax-label" for="tag-input">Project labels</label>
                <div class="ax-tags" @click="$refs.tagField.focus()">
                  <template x-for="(t, i) in tags" :key="t">
                    <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill" style="gap:6px;">
                      <span x-text="t"></span>
                      <button type="button" @click="removeTag(i)" :aria-label="'Remove ' + t" style="display:inline-flex;background:none;border:0;color:inherit;cursor:pointer;opacity:.8;">
                        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
                      </button>
                    </span>
                  </template>
                  <input id="tag-input" x-ref="tagField" type="text" class="ax-tags__input" x-model="tagDraft"
                         @keydown.enter.prevent="commitTag()" @keydown="if(event.key===','){event.preventDefault();commitTag();}"
                         @keydown.tab="if(tagDraft.trim()){event.preventDefault();commitTag();}"
                         @keydown.backspace="if(!tagDraft && tags.length){removeTag(tags.length-1)}"
                         placeholder="Add a label…" aria-label="Add a label">
                </div>
                <span class="ax-help">Suggested: <button type="button" class="ax-link" @click="addTag('Frontend')">Frontend</button> · <button type="button" class="ax-link" @click="addTag('Urgent')">Urgent</button> · <button type="button" class="ax-link" @click="addTag('Q3')">Q3</button></span>
              </div>

              <div class="ax-field">
                <label class="ax-label" for="email-tags">Invite collaborators</label>
                <div class="ax-tags" @click="$refs.emailField.focus()">
                  <template x-for="(m, i) in emails" :key="m.value">
                    <span class="ax-badge ax-badge--soft ax-badge--pill" :class="m.valid ? 'ax-badge--neutral' : 'ax-badge--danger'" style="gap:6px;">
                      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-show="!m.valid"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0"/></svg>
                      <span x-text="m.value"></span>
                      <button type="button" @click="removeEmail(i)" :aria-label="'Remove ' + m.value" style="display:inline-flex;background:none;border:0;color:inherit;cursor:pointer;opacity:.8;">
                        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
                      </button>
                    </span>
                  </template>
                  <input id="email-tags" x-ref="emailField" type="text" class="ax-tags__input" x-model="emailDraft"
                         @keydown.enter.prevent="commitEmail()" @keydown="if(event.key===','){event.preventDefault();commitEmail();}"
                         placeholder="name@company.com" inputmode="email" aria-label="Invite by email">
                </div>
                <span class="ax-field__message ax-error" x-show="emails.some(m=>!m.valid)" x-cloak>One or more addresses look invalid — they're flagged in red.</span>
              </div>
            </div>
          </section>

          <!-- ───── COMBOBOX / ENHANCED SELECT ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Enhanced select">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Searchable</span>
                <h2 class="ax-card__title">Combobox</h2>
                <p class="ax-card__subtitle">Type to filter · single &amp; multi-select with grouped options.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <!-- single combobox -->
              <div class="ax-field">
                <label class="ax-label" id="cbx-country-lbl">Country</label>
                <div class="ax-combobox" @click.outside="cbxOpen=false">
                  <button type="button" class="ax-combobox__trigger" :aria-expanded="cbxOpen" aria-haspopup="listbox" aria-labelledby="cbx-country-lbl" @click="cbxOpen=!cbxOpen">
                    <span class="ax-combobox__value" :style="!country ? 'color:var(--ax-text-disabled);' : ''" x-text="country || 'Select a country…'"></span>
                    <svg class="ax-combobox__caret" 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>
                  <div class="ax-combobox__panel" x-show="cbxOpen" x-transition x-cloak role="listbox" aria-label="Countries">
                    <input type="text" class="ax-combobox__search" x-model="cbxSearch" placeholder="Search countries…" aria-label="Search countries" @click.stop>
                    <template x-for="c in filteredCountries" :key="c">
                      <button type="button" class="ax-combobox__option" role="option" :aria-selected="country===c" @click="country=c;cbxOpen=false;cbxSearch=''">
                        <span x-text="c"></span>
                        <svg x-show="country===c" style="margin-inline-start:auto;" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                      </button>
                    </template>
                    <div class="ax-combobox__empty" x-show="!filteredCountries.length">No matches found</div>
                  </div>
                </div>
              </div>

              <!-- multi combobox with chips -->
              <div class="ax-field">
                <label class="ax-label" id="cbx-stack-lbl">Tech stack <span style="color:var(--ax-text-subtle);font-weight:400;" x-text="'(' + stack.length + ')'"></span></label>
                <div class="ax-combobox" @click.outside="stackOpen=false">
                  <!-- role="button" on a DIV, not a real <button>: each chip carries
                       its own remove <button>, and a button inside a button is
                       invalid HTML — the parser auto-closed the trigger at the first
                       chip, dropping the chips and caret outside the control. -->
                  <div role="button" tabindex="0" class="ax-combobox__trigger" :aria-expanded="stackOpen" aria-haspopup="listbox" aria-labelledby="cbx-stack-lbl" @click="stackOpen=!stackOpen" @keydown.enter.prevent="stackOpen=!stackOpen" @keydown.space.prevent="stackOpen=!stackOpen" style="flex-wrap:wrap;min-height:42px;padding-block:5px;">
                    <span class="ax-combobox__chips" x-show="stack.length">
                      <template x-for="(s, i) in stack" :key="s">
                        <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill" style="gap:5px;" @click.stop>
                          <span x-text="s"></span>
                          <button type="button" @click="stack.splice(i,1)" :aria-label="'Remove ' + s" style="display:inline-flex;background:none;border:0;color:inherit;cursor:pointer;"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.25" 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>
                    <span class="ax-combobox__value" x-show="!stack.length" style="color:var(--ax-text-disabled);">Pick frameworks &amp; tools…</span>
                    <svg class="ax-combobox__caret" style="margin-inline-start:auto;" 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>
                  </div>
                  <div class="ax-combobox__panel" x-show="stackOpen" x-transition x-cloak role="listbox" aria-multiselectable="true" aria-label="Tech stack">
                    <input type="text" class="ax-combobox__search" x-model="stackSearch" placeholder="Search…" aria-label="Search stack" @click.stop>
                    <template x-for="group in filteredStack" :key="group.label">
                      <div>
                        <div class="ax-combobox__group-label" x-text="group.label"></div>
                        <template x-for="o in group.items" :key="o">
                          <button type="button" class="ax-combobox__option" role="option" :aria-selected="stack.includes(o)" @click="toggleStack(o)">
                            <span style="display:inline-flex;width:16px;height:16px;border-radius:5px;border:1.5px solid;align-items:center;justify-content:center;" :style="stack.includes(o) ? 'background:var(--ax-accent);border-color:var(--ax-accent);color:var(--ax-on-accent);' : 'border-color:var(--ax-border-strong);'">
                              <svg x-show="stack.includes(o)" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                            </span>
                            <span x-text="o"></span>
                          </button>
                        </template>
                      </div>
                    </template>
                    <div class="ax-combobox__empty" x-show="!filteredStack.length">No matches found</div>
                  </div>
                </div>
                <span class="ax-help">Grouped by category · selected items show as chips above.</span>
              </div>
            </div>
          </section>

          <!-- ───── AUTOCOMPLETE / TYPEAHEAD ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Autocomplete">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Typeahead</span>
                <h2 class="ax-card__title">Autocomplete</h2>
                <p class="ax-card__subtitle">Live suggestions as you type · arrow keys to navigate.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-field">
                <label class="ax-label" for="ac-input">Assign to teammate</label>
                <div class="ax-combobox" @click.outside="acOpen=false">
                  <div class="ax-field__control">
                    <span class="ax-field__affix ax-field__affix--leading"><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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg></span>
                    <input id="ac-input" type="text" class="ax-input ax-input--with-leading-icon" role="combobox" aria-autocomplete="list" :aria-expanded="acOpen" aria-controls="ac-list"
                           x-model="acQuery" @focus="acOpen=true" @input="acOpen=true" placeholder="Type a name…" autocomplete="off">
                  </div>
                  <div id="ac-list" class="ax-combobox__panel" x-show="acOpen && filteredPeople.length" x-transition x-cloak role="listbox">
                    <template x-for="p in filteredPeople" :key="p.name">
                      <button type="button" class="ax-combobox__option" role="option" @click="acQuery=p.name;acOpen=false">
                        <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" :style="'background:color-mix(in oklab,'+p.c+' 18%,transparent);color:'+p.c+';'"><b style="font-size:11px;" x-text="p.initials"></b></span>
                        <span style="display:flex;flex-direction:column;line-height:1.3;"><span style="color:var(--ax-text-strong);font-weight:500;" x-text="p.name"></span><span style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);" x-text="p.role"></span></span>
                      </button>
                    </template>
                  </div>
                </div>
                <span class="ax-help">Searches name and role. Try "design" or "eng".</span>
              </div>
            </div>
          </section>

          <!-- ───── PASSWORD STRENGTH ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Password strength">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Validated</span>
                <h2 class="ax-card__title">Password strength</h2>
                <p class="ax-card__subtitle">Live meter with a criteria checklist.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-field">
                <label class="ax-label" for="pw-input">New password</label>
                <div class="ax-field__control">
                  <input :type="pwShown ? 'text' : 'password'" id="pw-input" class="ax-input ax-input--with-trailing" x-model="pw" placeholder="••••••••••" autocomplete="new-password">
                  <button type="button" class="ax-field__affix ax-field__affix--trailing ax-field__affix--button" @click="pwShown=!pwShown" :aria-label="pwShown ? 'Hide password' : 'Show password'">
                    <svg x-show="!pwShown" 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 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
                    <svg x-show="pwShown" x-cloak 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.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"/><path d="M3 3l18 18"/></svg>
                  </button>
                </div>
                <div class="ax-strength" style="margin-top:var(--ax-space-3);">
                  <div class="ax-strength__bars" role="meter" :aria-valuenow="pwScore" aria-valuemin="0" aria-valuemax="4" aria-label="Password strength">
                    <span class="ax-strength__bar" :class="pwBarClass(0)"></span>
                    <span class="ax-strength__bar" :class="pwBarClass(1)"></span>
                    <span class="ax-strength__bar" :class="pwBarClass(2)"></span>
                    <span class="ax-strength__bar" :class="pwBarClass(3)"></span>
                  </div>
                  <span class="ax-strength__label" x-text="pwLabel"></span>
                </div>
                <ul style="list-style:none;margin:var(--ax-space-3) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-2);">
                  <template x-for="c in pwCriteria" :key="c.label">
                    <li class="ax-cluster" style="gap:var(--ax-space-2);font-size:var(--ax-text-xs);" :style="c.test ? 'color:var(--ax-success-500);' : 'color:var(--ax-text-subtle);'">
                      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="c.test ? 'M5 12l5 5l10 -10' : 'M9 12h6'"/></svg>
                      <span x-text="c.label"></span>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
          </section>

          <!-- ───── RANGE SLIDERS ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Range sliders">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Numeric</span>
                <h2 class="ax-card__title">Range sliders</h2>
                <p class="ax-card__subtitle">Single, dual and stepped — all values tabular.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-6);">
              <!-- single -->
              <div class="ax-field">
                <div class="ax-cluster" style="justify-content:space-between;">
                  <label class="ax-label" for="vol">Notification volume</label>
                  <b class="ax-num" style="color:var(--ax-text-strong);font-family:var(--ax-font-mono);" x-text="vol + '%'"></b>
                </div>
                <input id="vol" type="range" class="ax-range--native" min="0" max="100" x-model.number="vol" style="width:100%;" aria-label="Notification volume">
              </div>
              <!-- stepped -->
              <div class="ax-field">
                <div class="ax-cluster" style="justify-content:space-between;">
                  <label class="ax-label" for="team-size">Team size</label>
                  <b class="ax-num" style="color:var(--ax-text-strong);font-family:var(--ax-font-mono);" x-text="teamSize + ' seats'"></b>
                </div>
                <input id="team-size" type="range" class="ax-range--native" min="5" max="50" step="5" x-model.number="teamSize" style="width:100%;" aria-label="Team size">
                <div class="ax-cluster" style="justify-content:space-between;font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);margin-top:4px;"><span>5</span><span>25</span><span>50</span></div>
              </div>
              <!-- dual price range -->
              <div class="ax-field">
                <div class="ax-cluster" style="justify-content:space-between;">
                  <label class="ax-label">Price range</label>
                  <b class="ax-num" style="color:var(--ax-text-strong);font-family:var(--ax-font-mono);" x-text="'$' + priceMin + ' – $' + priceMax"></b>
                </div>
                <div style="position:relative;height:24px;display:flex;align-items:center;">
                  <div class="ax-range__track" style="width:100%;">
                    <div class="ax-range__fill" :style="'inset-inline-start:'+(priceMin/500*100)+'%;width:'+((priceMax-priceMin)/500*100)+'%;'"></div>
                  </div>
                  <input type="range" min="0" max="500" step="10" x-model.number="priceMin" @input="if(priceMin>priceMax)priceMin=priceMax" aria-label="Minimum price" style="position:absolute;width:100%;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none;" class="ax-range--native ax-range-dual">
                  <input type="range" min="0" max="500" step="10" x-model.number="priceMax" @input="if(priceMax<priceMin)priceMax=priceMin" aria-label="Maximum price" style="position:absolute;width:100%;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none;" class="ax-range--native ax-range-dual">
                </div>
              </div>
            </div>
          </section>

          <!-- ───── RATINGS ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Ratings">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Feedback</span>
                <h2 class="ax-card__title">Interactive rating</h2>
                <p class="ax-card__subtitle">Click or use arrow keys to set a star value.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-6);">
              <div class="ax-field">
                <label class="ax-label">How was your experience?</label>
                <div class="ax-rating ax-rating--input ax-rating--lg" role="radiogroup" aria-label="Star rating" @mouseleave="ratingHover=0">
                  <template x-for="n in 5" :key="n">
                    <button type="button" role="radio" :aria-checked="rating===n" :aria-label="n + ' star' + (n>1?'s':'')" @click="rating=n" @mouseenter="ratingHover=n" @keydown.arrow-right.prevent="rating=Math.min(5,rating+1)" @keydown.arrow-left.prevent="rating=Math.max(1,rating-1)" style="background:none;border:0;padding:2px;cursor:pointer;">
                      <svg class="ax-rating__star" :class="(ratingHover||rating)>=n ? 'is-selected' : ''" viewBox="0 0 24 24" :fill="(ratingHover||rating)>=n ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="1.75" 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>
                    </button>
                  </template>
                  <span class="ax-rating__value" x-text="['Tap to rate','Poor','Fair','Good','Great','Excellent'][ratingHover||rating]"></span>
                </div>
              </div>
              <hr class="ax-divider">
              <!-- read-only display ratings -->
              <div style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <div class="ax-cluster" style="justify-content:space-between;">
                  <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Aperture Desk Lamp</span>
                  <span class="ax-rating ax-rating--sm" aria-label="4.5 out of 5">
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--half" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 1l3.09 6.26l6.91 1l-5 4.87l1.18 6.88l-6.18 -3.25v-15.76" fill="currentColor" stroke="none"/><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>
                    <span class="ax-rating__value ax-num">4.5</span>
                  </span>
                </div>
                <div class="ax-cluster" style="justify-content:space-between;">
                  <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Matte Ceramic Mug</span>
                  <span class="ax-rating ax-rating--sm" aria-label="4 out of 5">
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star ax-rating__star--full" viewBox="0 0 24 24" fill="currentColor" 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>
                    <svg class="ax-rating__star" 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 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>
                    <span class="ax-rating__value ax-num">4.0</span>
                  </span>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── TOGGLES / SWITCHES ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Toggles and switches">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Settings</span>
                <h2 class="ax-card__title">Toggles &amp; switches</h2>
                <p class="ax-card__subtitle">Boolean preferences with descriptive helper rows.</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-3) var(--ax-space-8);">
              <template x-for="s in switches" :key="s.id">
                <label class="ax-cluster" style="justify-content:space-between;gap:var(--ax-space-4);cursor:pointer;padding:var(--ax-space-3) 0;border-bottom:1px solid var(--ax-border);">
                  <span style="min-width:0;">
                    <span style="display:block;font-weight:500;color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="s.title"></span>
                    <span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:2px;" x-text="s.desc"></span>
                  </span>
                  <input type="checkbox" class="ax-switch" role="switch" x-model="s.on" :aria-label="s.title">
                </label>
              </template>
            </div>
          </section>

        </form>


        <style>
          .ax-range-dual::-webkit-slider-thumb { pointer-events:auto; }
          .ax-range-dual::-moz-range-thumb { pointer-events:auto; }
          @media (max-width:768px){ .ax-card__body[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; } }
        </style>
      
</div>
{% endblock %}

{% block scripts %}
        <script>
          function axAdvancedForms(){
            const okEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
            return {
              saving:false, toast:false,
              // tags
              tags:['Frontend','Design system','High priority'], tagDraft:'',
              commitTag(){ const v=this.tagDraft.trim().replace(/,$/,''); if(v && !this.tags.includes(v)){ this.tags.push(v); } this.tagDraft=''; },
              addTag(v){ if(!this.tags.includes(v)) this.tags.push(v); },
              removeTag(i){ this.tags.splice(i,1); },
              // email chips
              emails:[{value:'maya.chen@vireo.app',valid:true},{value:'devon.okafor@vireo.app',valid:true}], emailDraft:'',
              commitEmail(){ const v=this.emailDraft.trim().replace(/,$/,''); if(v){ this.emails.push({value:v,valid:okEmail(v)}); } this.emailDraft=''; },
              removeEmail(i){ this.emails.splice(i,1); },
              // single combobox
              cbxOpen:false, cbxSearch:'', country:'United States',
              countries:['United States','United Kingdom','Canada','Australia','Germany','France','Japan','Brazil','India','Singapore','Netherlands','Sweden'],
              get filteredCountries(){ const q=this.cbxSearch.toLowerCase(); return this.countries.filter(c=>c.toLowerCase().includes(q)); },
              // multi combobox
              stackOpen:false, stackSearch:'', stack:['React','Tailwind CSS','PostgreSQL'],
              stackGroups:[
                {label:'Frontend',items:['React','Vue','Svelte','Alpine.js','Tailwind CSS']},
                {label:'Backend',items:['Node.js','Laravel','Django','Go','Rails']},
                {label:'Data',items:['PostgreSQL','MySQL','Redis','MongoDB']},
              ],
              get filteredStack(){ const q=this.stackSearch.toLowerCase(); return this.stackGroups.map(g=>({label:g.label,items:g.items.filter(o=>o.toLowerCase().includes(q))})).filter(g=>g.items.length); },
              toggleStack(o){ const i=this.stack.indexOf(o); if(i>-1) this.stack.splice(i,1); else this.stack.push(o); },
              // autocomplete
              acOpen:false, acQuery:'',
              people:[
                {name:'Maya Chen',role:'Design lead',initials:'MC',c:'var(--ax-viz-cyan)'},
                {name:'Devon Okafor',role:'Engineering manager',initials:'DO',c:'var(--ax-viz-violet)'},
                {name:'Priya Nair',role:'Product designer',initials:'PN',c:'var(--ax-viz-pink)'},
                {name:'Tomás Herrera',role:'Frontend engineer',initials:'TH',c:'var(--ax-viz-amber)'},
                {name:'Lena Brandt',role:'Design engineer',initials:'LB',c:'var(--ax-viz-emerald)'},
              ],
              get filteredPeople(){ const q=this.acQuery.toLowerCase().trim(); if(!q) return this.people; return this.people.filter(p=>p.name.toLowerCase().includes(q)||p.role.toLowerCase().includes(q)); },
              // password
              pw:'', pwShown:false,
              get pwCriteria(){ return [
                {label:'8+ characters', test:this.pw.length>=8},
                {label:'Upper &amp; lower', test:/[a-z]/.test(this.pw)&&/[A-Z]/.test(this.pw)},
                {label:'A number', test:/\d/.test(this.pw)},
                {label:'A symbol', test:/[^A-Za-z0-9]/.test(this.pw)},
              ]; },
              get pwScore(){ return this.pwCriteria.filter(c=>c.test).length; },
              get pwLabel(){ return ['Enter a password','Weak password','Fair password','Good password','Strong password'][this.pwScore]; },
              pwBarClass(i){ if(i>=this.pwScore) return ''; if(this.pwScore<=1) return 'is-weak'; if(this.pwScore<=2) return 'is-medium'; if(this.pwScore===3) return 'is-medium'; return 'is-strong'; },
              // ranges
              vol:65, teamSize:20, priceMin:80, priceMax:340,
              // rating
              rating:4, ratingHover:0,
              // switches
              switches:[
                {id:'email-digest',title:'Weekly email digest',desc:'A Monday-morning summary of activity.',on:true},
                {id:'push',title:'Push notifications',desc:'Alerts on mentions and assignments.',on:true},
                {id:'auto-save',title:'Auto-save drafts',desc:'Persist changes every few seconds.',on:true},
                {id:'2fa',title:'Two-factor authentication',desc:'Require a code at sign-in.',on:false},
                {id:'beta',title:'Beta features',desc:'Opt into experimental UI early.',on:false},
                {id:'analytics',title:'Usage analytics',desc:'Share anonymized product metrics.',on:true},
              ],
              save(){ this.saving=true; setTimeout(()=>{ this.saving=false; this.toast=true; setTimeout(()=>this.toast=false,2600); },650); },
            };
          }
        </script>
{% endblock %}