{% 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">Form Elements</h1>
              <p class="ax-page-head__subtitle">Every native control — text, select, choice, switch, range, file — in its Aurora glass dress.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/forms/floating-labels/">
                <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 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"/><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"/><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"/><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"/></svg>
                <span class="ax-btn__label">Floating labels</span>
              </a>
              <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="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"/><path d="M9 13l2 2l4 -4"/></svg>
                <span class="ax-btn__label">Save preset</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- ───── Text inputs ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Text inputs">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Type</span>
                <h2 class="ax-card__title">Text Inputs</h2>
                <p class="ax-card__subtitle">Plain, leading icon, trailing affordance, read-only &amp; disabled.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <div class="ax-field">
                <label class="ax-label" for="fe-name">Full name <span class="ax-field__required" aria-hidden="true">*</span></label>
                <input id="fe-name" type="text" class="ax-input" value="Camila Rossi" autocomplete="name">
                <span class="ax-help">As it appears on your billing account.</span>
              </div>

              <div class="ax-field">
                <label class="ax-label" for="fe-email">Work email</label>
                <div class="ax-field__control">
                  <span class="ax-field__affix ax-field__affix--leading" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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>
                  <input id="fe-email" type="email" class="ax-input ax-input--with-leading-icon" value="camila@northwind.io" autocomplete="email">
                </div>
              </div>

              <div class="ax-field" x-data="{ show:false }">
                <label class="ax-label" for="fe-pass">Password</label>
                <div class="ax-field__control">
                  <input id="fe-pass" :type="show ? 'text' : 'password'" class="ax-input ax-input--with-trailing" value="aurora-glass-42" autocomplete="off">
                  <button type="button" class="ax-field__affix ax-field__affix--trailing ax-field__affix--button" @click="show=!show" :aria-label="show ? 'Hide password' : 'Show password'">
                    <svg x-show="!show" 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="show" 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>
                <span class="ax-help" x-text="document.activeElement && document.activeElement.id==='fe-pass' ? 'Caps Lock check active' : 'Use 12+ characters with a symbol.'">Use 12+ characters with a symbol.</span>
              </div>

              <div class="ax-field">
                <label class="ax-label" for="fe-readonly">Account ID (read-only)</label>
                <input id="fe-readonly" type="text" class="ax-input ax-num" value="ACC-2025-04821" readonly style="font-family:var(--ax-font-mono);letter-spacing:.04em;">
              </div>

              <div class="ax-field">
                <label class="ax-label" for="fe-disabled" style="color:var(--ax-text-muted);">Legacy SSO (disabled)</label>
                <input id="fe-disabled" type="text" class="ax-input" value="Managed by Okta" disabled>
              </div>
            </div>
          </section>

          <!-- ───── Number, group & textarea ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Number, input groups and textarea">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Type</span>
                <h2 class="ax-card__title">Number, Groups &amp; Textarea</h2>
                <p class="ax-card__subtitle">Stepper, addon groups, and an auto-grow textarea with counter.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <!-- number stepper -->
              <div class="ax-field" x-data="{ qty:12 }">
                <label class="ax-label" for="fe-qty">Quantity</label>
                <div class="ax-input-group" style="max-width:180px;">
                  <button type="button" class="ax-input-group__addon" @click="qty = Math.max(0, qty-1)" aria-label="Decrease quantity" style="cursor:pointer;background:var(--ax-surface-subtle);">−</button>
                  <input id="fe-qty" type="text" class="ax-input ax-num" x-model="qty" inputmode="numeric" style="text-align:center;font-family:var(--ax-font-mono);">
                  <button type="button" class="ax-input-group__addon" @click="qty = qty+1" aria-label="Increase quantity" style="cursor:pointer;background:var(--ax-surface-subtle);">+</button>
                </div>
              </div>

              <!-- prefix addon -->
              <div class="ax-field">
                <label class="ax-label" for="fe-amount">Budget</label>
                <div class="ax-input-group">
                  <span class="ax-input-group__addon" aria-hidden="true">$</span>
                  <input id="fe-amount" type="text" class="ax-input ax-num" value="4,250.00" inputmode="decimal" style="font-family:var(--ax-font-mono);">
                  <span class="ax-input-group__addon">USD</span>
                </div>
                <span class="ax-help">Monthly cap before approval is required.</span>
              </div>

              <!-- url addon -->
              <div class="ax-field">
                <label class="ax-label" for="fe-handle">Workspace URL</label>
                <div class="ax-input-group">
                  <span class="ax-input-group__addon">vireo.app/</span>
                  <input id="fe-handle" type="text" class="ax-input" value="northwind-labs">
                </div>
              </div>

              <!-- textarea + counter -->
              <div class="ax-field" x-data="{ note:'Ship the Q3 release notes to the design channel before standup.', max:240 }">
                <label class="ax-label" for="fe-note">Internal note</label>
                <textarea id="fe-note" class="ax-textarea" rows="3" x-model="note" maxlength="240" placeholder="Add a short note…"></textarea>
                <div class="ax-cluster" style="justify-content:space-between;">
                  <span class="ax-help">Visible to teammates with editor access.</span>
                  <span class="ax-help ax-num" style="font-family:var(--ax-font-mono);" x-text="note.length + ' / ' + max">42 / 240</span>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── Checkbox & radio ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Checkboxes and radios">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Choice</span>
                <h2 class="ax-card__title">Checkbox &amp; Radio</h2>
                <p class="ax-card__subtitle">18px controls, indeterminate &amp; grouped.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <div>
                <div class="ax-label" style="margin-bottom:var(--ax-space-3);">Notifications</div>
                <div style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;" x-data="{}" x-init="$refs.indet.indeterminate = true">
                    <input type="checkbox" class="ax-checkbox" x-ref="indet">
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">All channels <span style="color:var(--ax-text-subtle);">(mixed)</span></span>
                  </label>
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;padding-inline-start:var(--ax-space-5);">
                    <input type="checkbox" class="ax-checkbox" checked>
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Product updates</span>
                  </label>
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;padding-inline-start:var(--ax-space-5);">
                    <input type="checkbox" class="ax-checkbox">
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Weekly digest</span>
                  </label>
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;opacity:.55;">
                    <input type="checkbox" class="ax-checkbox" checked disabled>
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Security alerts (locked)</span>
                  </label>
                </div>
              </div>
              <hr class="ax-divider" style="margin:0;">
              <div role="radiogroup" aria-label="Plan">
                <div class="ax-label" style="margin-bottom:var(--ax-space-3);">Billing cycle</div>
                <div style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;">
                    <input type="radio" name="fe-cycle" class="ax-radio" checked>
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Monthly — <span class="ax-num">$29</span>/mo</span>
                  </label>
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;">
                    <input type="radio" name="fe-cycle" class="ax-radio">
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Annual — <span class="ax-num">$290</span>/yr <span style="color:var(--ax-viz-emerald);">save 17%</span></span>
                  </label>
                  <label class="ax-check" style="display:flex;gap:var(--ax-space-3);align-items:center;min-height:auto;opacity:.55;">
                    <input type="radio" name="fe-cycle" class="ax-radio" disabled>
                    <span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Enterprise (contact sales)</span>
                  </label>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── Switches ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Switches">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Choice</span>
                <h2 class="ax-card__title">Switches</h2>
                <p class="ax-card__subtitle">role=switch, three sizes.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div class="ax-cluster" style="justify-content:space-between;">
                <div>
                  <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Two-factor auth</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Require a code at sign-in.</div>
                </div>
                <input type="checkbox" role="switch" class="ax-switch ax-switch--lg" checked aria-label="Two-factor auth">
              </div>
              <hr class="ax-divider" style="margin:0;">
              <div class="ax-cluster" style="justify-content:space-between;">
                <div>
                  <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Desktop push</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Default size control.</div>
                </div>
                <input type="checkbox" role="switch" class="ax-switch" aria-label="Desktop push">
              </div>
              <hr class="ax-divider" style="margin:0;">
              <div class="ax-cluster" style="justify-content:space-between;">
                <div>
                  <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);">Beta features</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Small size control.</div>
                </div>
                <input type="checkbox" role="switch" class="ax-switch ax-switch--sm" checked aria-label="Beta features">
              </div>
              <hr class="ax-divider" style="margin:0;">
              <div class="ax-cluster" style="justify-content:space-between;opacity:.55;">
                <div>
                  <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Maintenance mode</div>
                  <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Disabled (admin only).</div>
                </div>
                <input type="checkbox" role="switch" class="ax-switch" disabled aria-label="Maintenance mode">
              </div>
            </div>
          </section>

          <!-- ───── Native select ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Native select">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Type</span>
                <h2 class="ax-card__title">Native Select</h2>
                <p class="ax-card__subtitle">Single, grouped &amp; sizes.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <div class="ax-field">
                <label class="ax-label" for="fe-country">Country</label>
                <select id="fe-country" class="ax-select">
                  <option>United States</option>
                  <option>United Kingdom</option>
                  <option>Germany</option>
                  <option>Japan</option>
                  <option>Australia</option>
                </select>
              </div>
              <div class="ax-field">
                <label class="ax-label" for="fe-timezone">Timezone</label>
                <select id="fe-timezone" class="ax-select">
                  <optgroup label="Americas">
                    <option>Pacific (PST)</option>
                    <option selected>Eastern (EST)</option>
                  </optgroup>
                  <optgroup label="Europe">
                    <option>London (GMT)</option>
                    <option>Berlin (CET)</option>
                  </optgroup>
                </select>
              </div>
              <div class="ax-field">
                <label class="ax-label" for="fe-size-sm">Page size (compact)</label>
                <select id="fe-size-sm" class="ax-select ax-select--sm">
                  <option>10 rows</option><option selected>25 rows</option><option>50 rows</option>
                </select>
              </div>
              <div class="ax-field">
                <label class="ax-label" for="fe-size-lg">Density (large)</label>
                <select id="fe-size-lg" class="ax-select ax-select--lg">
                  <option>Comfortable</option><option selected>Cozy</option><option>Compact</option>
                </select>
              </div>
            </div>
          </section>

          <!-- ───── Range slider ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Range slider">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Type</span>
                <h2 class="ax-card__title">Range Slider</h2>
                <p class="ax-card__subtitle">Live value bubble bound with Alpine.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">
              <div x-data="{ v:62 }">
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-3);">
                  <label class="ax-label" for="fe-range1">Monthly budget</label>
                  <span class="ax-range__bubble ax-num" x-text="'$' + (v*50).toLocaleString()">$3,100</span>
                </div>
                <div class="ax-range">
                  <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">$0</span>
                  <input id="fe-range1" type="range" class="ax-range--native" min="0" max="100" x-model.number="v" style="flex:1;" aria-label="Monthly budget">
                  <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">$5k</span>
                </div>
              </div>
              <div x-data="{ v:35 }">
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-3);">
                  <label class="ax-label" for="fe-range2">Image quality</label>
                  <span class="ax-range__bubble ax-num" x-text="v + '%'">35%</span>
                </div>
                <input id="fe-range2" type="range" class="ax-range--native" min="0" max="100" step="5" x-model.number="v" style="width:100%;" aria-label="Image quality">
              </div>
              <div style="opacity:.55;">
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-3);">
                  <label class="ax-label" for="fe-range3" style="color:var(--ax-text-muted);">Volume (disabled)</label>
                  <span class="ax-range__bubble ax-num">—</span>
                </div>
                <input id="fe-range3" type="range" class="ax-range--native" min="0" max="100" value="40" disabled style="width:100%;" aria-label="Volume">
              </div>
            </div>
          </section>

          <!-- ───── File upload ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="File upload">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Type</span>
                <h2 class="ax-card__title">File Upload</h2>
                <p class="ax-card__subtitle">Button + filename, dropzone &amp; queued list.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);"
                 x-data="{ over:false, file:'' }">
              <!-- button + filename -->
              <div class="ax-field">
                <label class="ax-label">Profile photo</label>
                <div class="ax-cluster" style="gap:var(--ax-space-3);">
                  <label class="ax-btn ax-btn--secondary" style="cursor:pointer;">
                    <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">Choose file</span>
                    <input type="file" class="ax-visually-hidden" @change="file = $event.target.files[0] ? $event.target.files[0].name : ''" style="position:absolute;width:1px;height:1px;opacity:0;">
                  </label>
                  <span style="font-size:var(--ax-text-sm);color:var(--ax-text-subtle);" x-text="file || 'No file selected'">No file selected</span>
                </div>
              </div>
              <!-- dropzone -->
              <div class="ax-field">
                <label class="ax-label">Attachments</label>
                <div class="ax-dropzone">
                  <label class="ax-dropzone__area" :class="{ 'is-dragover': over }"
                         @dragover.prevent="over=true" @dragleave.prevent="over=false" @drop.prevent="over=false" style="cursor:pointer;">
                    <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 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>
                    <div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="over ? 'Drop to upload' : 'Drag files here, or click to browse'">Drag files here, or click to browse</div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">PNG, JPG or PDF — up to 10MB each</div>
                    <input type="file" multiple class="ax-visually-hidden" style="position:absolute;width:1px;height:1px;opacity:0;">
                  </label>
                </div>
              </div>
              <!-- queued list -->
              <ul class="ax-dropzone__list">
                <li class="ax-dropzone__file">
                  <span aria-hidden="true" style="color:var(--ax-viz-cyan);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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 class="ax-dropzone__name">brand-guidelines.pdf <span class="ax-num" style="color:var(--ax-text-subtle);">· 2.4 MB</span></span>
                  <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Done</span>
                  <button type="button" class="ax-dropzone__remove" aria-label="Remove brand-guidelines.pdf"><svg viewBox="0 0 24 24" width="18" height="18" 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>
                </li>
                <li class="ax-dropzone__file">
                  <span aria-hidden="true" style="color:var(--ax-viz-violet);"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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 -3z"/><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>
                  <span class="ax-dropzone__name">hero-mockup.png <span class="ax-num" style="color:var(--ax-text-subtle);">· 6.1 MB</span></span>
                  <div class="ax-progress ax-progress--xs" style="flex:0 0 90px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:68%;"></div></div></div>
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">68%</span>
                  <button type="button" class="ax-dropzone__remove" aria-label="Cancel hero-mockup.png"><svg viewBox="0 0 24 24" width="18" height="18" 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>
                </li>
              </ul>
            </div>
          </section>

        </div>
      
{% endblock %}