{% extends 'base-app.html' %}

{% block appmain_attrs %} x-data="axFiles()"{% endblock %}

{% block main %}

        <!-- ════════════════ APP HEAD · status + actions (the app bar names the app) ════════════════ -->
        <div class="ax-apphead">
          <p class="ax-apphead__status">Workspace drive — 1,284 files across 9 folders, 187.4 GB of 256 GB used.</p>
          <div class="ax-apphead__actions">
            <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
              <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"/><path d="M12 3a9 9 0 1 0 9 9"/></svg>
              <span class="ax-btn__label">New folder</span>
            </button>
            <button type="button" class="ax-btn ax-btn--primary" @click="uploadOpen = true">
              <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 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"/><path d="M9 15l3 -3l3 3"/><path d="M12 12l0 9"/></svg>
              <span class="ax-btn__label">Upload</span>
            </button>
          </div>
        </div>

        <!-- ════════════════ THREE-PANE WORKSPACE ════════════════ -->
        <div class="ax-fm">

          <!-- ───── LEFT RAIL: quick filters + tree + storage ───── -->
          <aside class="ax-card ax-fm__rail" role="region" aria-label="Drive navigation">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);height:100%;">

              <!-- quick filters -->
              <nav aria-label="Quick filters">
                <ul class="ax-list ax-list--compact" style="gap:2px;display:flex;flex-direction:column;">
                  <template x-for="f in quickFilters" :key="f.id">
                    <li>
                      <button type="button" class="ax-fm__quick" :class="{ 'is-active': filter === f.id }" @click="filter = f.id">
                        <span class="ax-fm__quick-ico" :style="`color:${f.color}`" x-html="f.icon"></span>
                        <span class="ax-fm__quick-label" x-text="f.label"></span>
                        <span class="ax-num ax-fm__quick-count" x-text="f.count"></span>
                      </button>
                    </li>
                  </template>
                </ul>
              </nav>

              <div class="ax-divider" role="separator"></div>

              <!-- folder tree -->
              <div style="flex:1 1 auto;min-height:0;overflow-y:auto;">
                <p class="ax-fm__rail-label">Folders</p>
                <ul class="ax-fm__tree" role="tree" aria-label="Folder tree">
                  <template x-for="node in tree" :key="node.id">
                    <li role="treeitem" :aria-expanded="node.children ? (node.open ? 'true' : 'false') : null">
                      <div class="ax-fm__tree-row" :class="{ 'is-active': activeFolder === node.id }">
                        <button type="button" class="ax-fm__tree-toggle" x-show="node.children" @click="node.open = !node.open" :aria-label="(node.open ? 'Collapse ' : 'Expand ') + node.name">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" :style="node.open ? 'transform:rotate(90deg)' : ''" style="transition:transform var(--ax-motion-fast);width:15px;height:15px;"><path d="M9 6l6 6l-6 6"/></svg>
                        </button>
                        <span x-show="!node.children" style="width:15px;flex:0 0 15px;" aria-hidden="true"></span>
                        <button type="button" class="ax-fm__tree-name" @click="activeFolder = node.id">
                          <svg viewBox="0 0 24 24" :fill="node.open ? 'var(--ax-accent)' : 'none'" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:17px;height:17px;color:var(--ax-accent);flex:0 0 17px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"/></svg>
                          <span class="ax-truncate" x-text="node.name"></span>
                          <span class="ax-num ax-fm__tree-count" x-text="node.count"></span>
                        </button>
                      </div>
                      <ul x-show="node.open && node.children" x-collapse role="group" style="list-style:none;">
                        <template x-for="child in node.children" :key="child.id">
                          <li role="treeitem">
                            <div class="ax-fm__tree-row" :class="{ 'is-active': activeFolder === child.id }" style="padding-inline-start:var(--ax-space-5);">
                              <span style="width:15px;flex:0 0 15px;" aria-hidden="true"></span>
                              <button type="button" class="ax-fm__tree-name" @click="activeFolder = child.id">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:17px;height:17px;color:var(--ax-text-muted);flex:0 0 17px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"/></svg>
                                <span class="ax-truncate" x-text="child.name"></span>
                                <span class="ax-num ax-fm__tree-count" x-text="child.count"></span>
                              </button>
                            </div>
                          </li>
                        </template>
                      </ul>
                    </li>
                  </template>
                </ul>
              </div>

              <!-- storage meter -->
              <div class="ax-fm__storage">
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-2);">
                  <span class="ax-cluster" style="gap:var(--ax-space-2);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);font-size:var(--ax-text-sm);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:16px;height:16px;color:var(--ax-accent);"><path d="M5 7a7 3 0 1 0 14 0a7 3 0 0 0 -14 0"/><path d="M5 7v5a7 3 0 0 0 14 0v-5"/><path d="M5 12v5a7 3 0 0 0 14 0v-5"/></svg>
                    Storage
                  </span>
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">73%</span>
                </div>
                <!-- segmented bar -->
                <div class="ax-fm__meter" role="img" aria-label="187.4 GB of 256 GB used: documents 64 GB, images 52 GB, video 48 GB, other 23.4 GB">
                  <span style="width:25%;background:var(--ax-accent);"></span>
                  <span style="width:20.3%;background:var(--ax-viz-cyan);"></span>
                  <span style="width:18.7%;background:var(--ax-viz-violet);"></span>
                  <span style="width:9.1%;background:var(--ax-viz-amber);"></span>
                </div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-2);">
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-strong);">187.4 GB</span>
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">of 256 GB</span>
                </div>
                <ul class="ax-fm__legend">
                  <li><i style="background:var(--ax-accent)"></i>Documents <b class="ax-num">64 GB</b></li>
                  <li><i style="background:var(--ax-viz-cyan)"></i>Images <b class="ax-num">52 GB</b></li>
                  <li><i style="background:var(--ax-viz-violet)"></i>Video <b class="ax-num">48 GB</b></li>
                  <li><i style="background:var(--ax-viz-amber)"></i>Other <b class="ax-num">23.4 GB</b></li>
                </ul>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm ax-btn--block" style="margin-top:var(--ax-space-3);">
                  <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 5l0 14"/><path d="M5 12l14 0"/></svg>
                  <span class="ax-btn__label">Upgrade storage</span>
                </button>
              </div>
            </div>
          </aside>

          <!-- ───── MAIN: breadcrumb + toolbar + grid/list ───── -->
          <section class="ax-card ax-fm__main" role="region" aria-label="File browser">
            <!-- breadcrumb path + toolbar -->
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);">
              <nav class="ax-fm__path" aria-label="Folder path">
                <button type="button" class="ax-fm__crumb" @click="activeFolder = 'workspace'">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:16px;height:16px;"><path d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                  Workspace
                </button>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="ax-fm__path-sep"><path d="M9 6l6 6l-6 6"/></svg>
                <button type="button" class="ax-fm__crumb">Design</button>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="ax-fm__path-sep"><path d="M9 6l6 6l-6 6"/></svg>
                <span class="ax-fm__crumb is-current" aria-current="page">Brand Assets</span>
              </nav>
              <div class="ax-card__actions">
                <div style="position:relative;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ax-text-subtle);"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input type="search" class="ax-input ax-input--sm" placeholder="Search this folder…" x-model="q" style="padding-inline-start:34px;width:200px;" aria-label="Search files">
                </div>
                <div class="ax-segment" role="radiogroup" aria-label="View mode">
                  <button type="button" class="ax-segment__option" :class="{ 'is-active': view === 'grid' }" role="radio" :aria-checked="view === 'grid'" @click="view = 'grid'" aria-label="Grid view">
                    <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 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4"/><path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4"/><path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4"/><path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4"/></svg>
                  </button>
                  <button type="button" class="ax-segment__option" :class="{ 'is-active': view === 'list' }" role="radio" :aria-checked="view === 'list'" @click="view = 'list'" aria-label="List view">
                    <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="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>
                  </button>
                </div>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Sort files">
                  <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 9l4 -4l4 4m-4 -4v14"/><path d="M21 15l-4 4l-4 -4m4 4v-14"/></svg>
                </button>
              </div>
            </div>

            <!-- bulk bar (multi-select) -->
            <div x-show="selected.length" x-cloak x-transition class="ax-fm__bulk">
              <span class="ax-num" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);"><span x-text="selected.length"></span> selected</span>
              <span class="ax-divider ax-divider--vertical" style="height:18px;" role="separator"></span>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm"><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--ghost ax-btn--sm"><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 9l14 0a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2"/><path d="M11 5h2a2 2 0 0 1 2 2v2h-6v-2a2 2 0 0 1 2 -2"/></svg><span class="ax-btn__label">Move</span></button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" style="color:var(--ax-danger-500);"><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 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg><span class="ax-btn__label">Delete</span></button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" style="margin-inline-start:auto;" aria-label="Clear selection" @click="selected = []"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
            </div>

            <div class="ax-card__body" style="padding-top:var(--ax-space-4);">
              <!-- folders section -->
              <p class="ax-fm__section">Folders <span class="ax-num" style="color:var(--ax-text-subtle);">4</span></p>
              <div class="ax-fm__folders">
                <template x-for="folder in folders" :key="folder.id">
                  <button type="button" class="ax-fm__folder" @click="activeFolder = folder.id">
                    <span class="ax-fm__folder-ico" :style="`color:${folder.color}`">
                      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="width:22px;height:22px;"><path d="M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.707h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.005h4z"/></svg>
                    </span>
                    <span class="ax-fm__folder-meta">
                      <span class="ax-truncate" x-text="folder.name"></span>
                      <span class="ax-num ax-fm__folder-sub"><span x-text="folder.items"></span> items · <span x-text="folder.size"></span></span>
                    </span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="ax-fm__folder-more"><path d="M5 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M11 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M17 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/></svg>
                  </button>
                </template>
              </div>

              <!-- files section -->
              <p class="ax-fm__section" style="margin-top:var(--ax-space-6);">Files <span class="ax-num" style="color:var(--ax-text-subtle);" x-text="visibleFiles.length"></span></p>

              <!-- GRID VIEW -->
              <div x-show="view === 'grid'" class="ax-fm__grid">
                <template x-for="file in visibleFiles" :key="file.id">
                  <article class="ax-fm__tile" :class="{ 'is-selected': selected.includes(file.id) }" @click="openPreview(file)" tabindex="0" @keydown.enter="openPreview(file)" role="button" :aria-label="file.name">
                    <label class="ax-fm__check" @click.stop>
                      <input type="checkbox" class="ax-checkbox" :checked="selected.includes(file.id)" @change="toggle(file.id)" :aria-label="'Select ' + file.name">
                    </label>
                    <button type="button" class="ax-fm__tile-more" @click.stop aria-label="File actions">
                      <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 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M11 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M17 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/></svg>
                    </button>
                    <!-- thumbnail / glyph -->
                    <template x-if="file.kind === 'image'">
                      <span class="ax-fm__thumb" :style="`background:linear-gradient(135deg, color-mix(in oklab,${file.color} 36%,var(--ax-surface-solid)), color-mix(in oklab,${file.color} 12%,var(--ax-surface-solid)))`">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:30px;height:30px;opacity:.92;"><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-12"/><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>
                    </template>
                    <template x-if="file.kind !== 'image'">
                      <span class="ax-fm__thumb" style="background:var(--ax-surface-subtle);">
                        <span :style="`color:${file.color}`" x-html="file.icon" class="ax-fm__thumb-glyph"></span>
                      </span>
                    </template>
                    <div class="ax-fm__tile-body">
                      <p class="ax-fm__tile-name ax-clamp" x-text="file.name"></p>
                      <p class="ax-num ax-fm__tile-sub"><span x-text="file.size"></span> · <span x-text="file.date"></span></p>
                    </div>
                    <svg x-show="file.starred" viewBox="0 0 24 24" fill="var(--ax-warning-500)" stroke="var(--ax-warning-500)" stroke-width="1.5" aria-hidden="true" class="ax-fm__tile-star"><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>
                  </article>
                </template>
              </div>

              <!-- LIST VIEW -->
              <div x-show="view === 'list'" x-cloak class="ax-table-wrap">
                <table class="ax-table ax-table--hover">
                  <thead class="ax-table__head">
                    <tr>
                      <th class="ax-table__th" scope="col" style="width:36px;"><input type="checkbox" class="ax-checkbox" @change="$event.target.checked ? selected = visibleFiles.map(f=>f.id) : selected = []" aria-label="Select all files"></th>
                      <th class="ax-table__th" scope="col">Name</th>
                      <th class="ax-table__th" scope="col">Owner</th>
                      <th class="ax-table__th" scope="col">Modified</th>
                      <th class="ax-table__th ax-table__th--num" scope="col">Size</th>
                      <th class="ax-table__th" scope="col" style="width:44px;"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="file in visibleFiles" :key="file.id">
                      <tr class="ax-table__row" :class="{ 'is-selected': selected.includes(file.id) }" @click="openPreview(file)" style="cursor:pointer;">
                        <td class="ax-table__td" @click.stop><input type="checkbox" class="ax-checkbox" :checked="selected.includes(file.id)" @change="toggle(file.id)" :aria-label="'Select ' + file.name"></td>
                        <td class="ax-table__td">
                          <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                            <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" :style="`background:color-mix(in oklab,${file.color} 16%,transparent);color:${file.color};`" x-html="file.icon"></span>
                            <div style="min-width:0;">
                              <div class="ax-truncate" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);max-width:280px;" x-text="file.name"></div>
                              <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="file.type"></div>
                            </div>
                          </div>
                        </td>
                        <td class="ax-table__td" style="color:var(--ax-text-muted);" x-text="file.owner"></td>
                        <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);" x-text="file.date"></td>
                        <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);" x-text="file.size"></td>
                        <td class="ax-table__td" @click.stop>
                          <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="File actions"><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 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M11 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M17 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/></svg></button>
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </div>

        <!-- ════════════════ PREVIEW DRAWER ════════════════ -->
        <div x-show="previewOpen" x-cloak class="ax-fm__drawer-backdrop" @click="previewOpen = false" x-transition.opacity>
          <aside class="ax-card ax-fm__drawer" role="dialog" aria-modal="true" aria-label="File preview" @click.stop x-transition:enter="ax-fm-slide">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow" x-text="active.type"></span>
                <h2 class="ax-card__title ax-truncate" style="max-width:340px;" x-text="active.name"></h2>
              </div>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Close preview" @click="previewOpen = false"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);overflow-y:auto;">
              <!-- large preview -->
              <div class="ax-fm__preview" :style="active.kind === 'image' ? `background:linear-gradient(135deg, color-mix(in oklab,${active.color} 40%,var(--ax-surface-solid)), color-mix(in oklab,${active.color} 14%,var(--ax-surface-solid)))` : 'background:var(--ax-surface-subtle)'">
                <template x-if="active.kind === 'image'">
                  <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:48px;height:48px;opacity:.9;"><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-12"/><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>
                </template>
                <template x-if="active.kind !== 'image'">
                  <span :style="`color:${active.color}`" x-html="active.icon" style="display:inline-flex;width:54px;height:54px;"></span>
                </template>
              </div>

              <!-- quick actions -->
              <div class="ax-fm__drawer-actions">
                <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 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"><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 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="M14 5.5a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M14 18.5a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/></svg><span class="ax-btn__label">Share</span></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Star file"><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 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>
              </div>

              <!-- metadata -->
              <div>
                <p class="ax-fm__rail-label">Details</p>
                <ul class="ax-fm__meta-list">
                  <li><span>Type</span><b x-text="active.type"></b></li>
                  <li><span>Size</span><b class="ax-num" x-text="active.size"></b></li>
                  <li><span>Modified</span><b class="ax-num" x-text="active.date + ', 2026'"></b></li>
                  <li><span>Owner</span><b x-text="active.owner"></b></li>
                  <li><span>Location</span><b>Workspace / Design / Brand Assets</b></li>
                </ul>
              </div>

              <!-- shared with -->
              <div>
                <p class="ax-fm__rail-label">Shared with</p>
                <div class="ax-cluster" style="gap:var(--ax-space-3);justify-content:space-between;">
                  <div class="ax-avatar-group" aria-label="Shared with 3 people">
                    <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 20%,transparent);color:var(--ax-viz-cyan);font-weight:600;" title="Maya Okonkwo">MO</span>
                    <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-violet) 20%,transparent);color:var(--ax-viz-violet);font-weight:600;" title="Tom Reyes">TR</span>
                    <span class="ax-avatar ax-avatar--sm ax-avatar--squircle ax-avatar__overflow" style="font-weight:600;">+1</span>
                  </div>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm"><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 5l0 14"/><path d="M5 12l14 0"/></svg><span class="ax-btn__label">Invite</span></button>
                </div>
              </div>
            </div>
            <div class="ax-card__footer" style="display:flex;gap:var(--ax-space-3);">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block" @click="previewOpen = false">Close</button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" style="color:var(--ax-danger-500);" aria-label="Delete file"><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 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg></button>
            </div>
          </aside>
        </div>

        <!-- ════════════════ UPLOAD MODAL ════════════════ -->
        <div x-show="uploadOpen" x-cloak class="ax-fm__drawer-backdrop" style="align-items:center;justify-content:center;" @click="uploadOpen = false" x-transition.opacity>
          <div class="ax-card" role="dialog" aria-modal="true" aria-label="Upload files" @click.stop style="width:min(520px,100%);" x-transition>
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Upload files</h2>
                <p class="ax-card__subtitle">To Workspace / Design / Brand Assets</p>
              </div>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Close upload" @click="uploadOpen = false"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
            </div>
            <div class="ax-card__body">
              <div class="ax-fm__dropzone">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:38px;height:38px;color:var(--ax-accent);"><path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"/><path d="M9 15l3 -3l3 3"/><path d="M12 12l0 9"/></svg>
                <p style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);margin-top:var(--ax-space-3);">Drag &amp; drop files here</p>
                <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">or <span style="color:var(--ax-accent);font-weight:var(--ax-weight-medium);">browse</span> from your device</p>
                <p class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);margin-top:var(--ax-space-2);">Max 2 GB per file · PDF, PNG, JPG, FIG, MP4, ZIP</p>
              </div>
              <!-- in-progress demo file -->
              <div style="margin-top:var(--ax-space-4);display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <div class="ax-fm__upload-row">
                  <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 16%,transparent);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" style="width:18px;height:18px;"><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-12"/><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>
                  <div style="flex:1 1 auto;min-width:0;">
                    <div class="ax-cluster" style="justify-content:space-between;"><span class="ax-truncate" style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);max-width:220px;">hero-banner-final.png</span><span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-muted);">68%</span></div>
                    <div class="ax-progress ax-progress--xs" style="margin-top:5px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:68%;"></div></div></div>
                  </div>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Cancel upload"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                </div>
                <div class="ax-fm__upload-row">
                  <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 16%,transparent);color:var(--ax-viz-emerald);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:18px;height:18px;"><path d="M5 12l5 5l10 -10"/></svg></span>
                  <div style="flex:1 1 auto;min-width:0;">
                    <div class="ax-cluster" style="justify-content:space-between;"><span class="ax-truncate" style="font-size:var(--ax-text-sm);color:var(--ax-text-strong);max-width:220px;">brand-guidelines.pdf</span><span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-viz-emerald);">Done</span></div>
                    <div class="ax-progress ax-progress--xs ax-progress--success" style="margin-top:5px;"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:100%;"></div></div></div>
                  </div>
                  <span style="width:30px;" aria-hidden="true"></span>
                </div>
              </div>
            </div>
            <div class="ax-card__footer" style="display:flex;gap:var(--ax-space-3);justify-content:flex-end;">
              <button type="button" class="ax-btn ax-btn--secondary" @click="uploadOpen = false">Cancel</button>
              <button type="button" class="ax-btn ax-btn--primary" @click="uploadOpen = false">Upload 2 files</button>
            </div>
          </div>
        </div>

        <style>
          .ax-fm { display:grid; grid-template-columns:288px minmax(0,1fr); gap:var(--ax-space-6); align-items:start; }
          .ax-fm__rail { position:sticky; top:var(--ax-space-6); align-self:start; height:calc(100vh - var(--ax-header-h, 64px) - var(--ax-space-10)); }
          .ax-fm__rail .ax-card__body { padding:var(--ax-space-4); }
          .ax-fm__quick { display:flex; align-items:center; gap:var(--ax-space-3); width:100%; padding:var(--ax-space-2) var(--ax-space-3); border:0; background:transparent; border-radius:var(--ax-radius-md); cursor:pointer; color:var(--ax-text); font-size:var(--ax-text-sm); transition:background var(--ax-motion-fast); }
          .ax-fm__quick:hover { background:var(--ax-fill-hover); }
          .ax-fm__quick.is-active { background:var(--ax-accent-wash); color:var(--ax-accent); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ax-accent) 22%,transparent); }
          .ax-fm__quick-ico { display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
          .ax-fm__quick-ico svg { width:18px; height:18px; }
          .ax-fm__quick-label { flex:1 1 auto; text-align:start; font-weight:var(--ax-weight-medium); }
          .ax-fm__quick-count { font-family:var(--ax-font-mono); font-size:var(--ax-text-xs); color:var(--ax-text-subtle); }
          .ax-fm__rail-label { font-size:var(--ax-text-2xs); font-weight:var(--ax-weight-semibold); letter-spacing:.05em; text-transform:uppercase; color:var(--ax-text-subtle); margin-bottom:var(--ax-space-2); }
          .ax-fm__tree { list-style:none; display:flex; flex-direction:column; gap:1px; }
          .ax-fm__tree ul { display:flex; flex-direction:column; gap:1px; margin-top:1px; }
          .ax-fm__tree-row { display:flex; align-items:center; border-radius:var(--ax-radius-sm); transition:background var(--ax-motion-fast); }
          .ax-fm__tree-row:hover { background:var(--ax-fill-hover); }
          .ax-fm__tree-row.is-active { background:var(--ax-accent-wash); }
          .ax-fm__tree-row.is-active .ax-fm__tree-name { color:var(--ax-accent); }
          .ax-fm__tree-toggle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:30px; border:0; background:transparent; color:var(--ax-text-subtle); cursor:pointer; flex:0 0 22px; }
          .ax-fm__tree-name { display:flex; align-items:center; gap:var(--ax-space-2); flex:1 1 auto; min-width:0; padding:var(--ax-space-2) var(--ax-space-2) var(--ax-space-2) 0; border:0; background:transparent; color:var(--ax-text); font-size:var(--ax-text-sm); cursor:pointer; text-align:start; }
          .ax-fm__tree-count { margin-inline-start:auto; font-family:var(--ax-font-mono); font-size:var(--ax-text-2xs); color:var(--ax-text-subtle); }
          .ax-fm__storage { background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-radius:var(--ax-radius-lg); padding:var(--ax-space-4); }
          .ax-fm__meter { display:flex; gap:2px; height:8px; border-radius:var(--ax-radius-pill); overflow:hidden; background:var(--ax-fill-hover); }
          .ax-fm__meter span { display:block; height:100%; }
          .ax-fm__legend { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-2) var(--ax-space-3); margin-top:var(--ax-space-3); }
          .ax-fm__legend li { display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); color:var(--ax-text-muted); }
          .ax-fm__legend i { width:8px; height:8px; border-radius:2px; flex:0 0 8px; }
          .ax-fm__legend b { margin-inline-start:auto; font-family:var(--ax-font-mono); color:var(--ax-text-strong); }
          .ax-fm__main { min-height:520px; }
          .ax-fm__path { display:flex; align-items:center; gap:var(--ax-space-1); flex-wrap:wrap; min-width:0; }
          .ax-fm__crumb { display:inline-flex; align-items:center; gap:var(--ax-space-2); padding:4px var(--ax-space-2); border:0; background:transparent; border-radius:var(--ax-radius-sm); color:var(--ax-text-muted); font-size:var(--ax-text-sm); font-weight:var(--ax-weight-medium); cursor:pointer; }
          .ax-fm__crumb:hover:not(.is-current) { background:var(--ax-fill-hover); color:var(--ax-text-strong); }
          .ax-fm__crumb.is-current { color:var(--ax-text-strong); font-weight:var(--ax-weight-semibold); cursor:default; }
          .ax-fm__path-sep { width:14px; height:14px; color:var(--ax-text-subtle); flex:0 0 14px; }
          .ax-fm__bulk { display:flex; align-items:center; gap:var(--ax-space-3); padding:var(--ax-space-2) var(--ax-space-5); background:var(--ax-accent-wash); border-block:1px solid var(--ax-border); }
          .ax-fm__section { font-size:var(--ax-text-sm); font-weight:var(--ax-weight-semibold); color:var(--ax-text-strong); margin-bottom:var(--ax-space-3); display:flex; align-items:center; gap:var(--ax-space-2); }
          .ax-fm__folders { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--ax-space-3); }
          .ax-fm__folder { display:flex; align-items:center; gap:var(--ax-space-3); padding:var(--ax-space-3); background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); cursor:pointer; text-align:start; transition:border-color var(--ax-motion-fast), box-shadow var(--ax-motion-fast); }
          .ax-fm__folder:hover { border-color:var(--ax-border-strong); box-shadow:var(--ax-shadow-sm); }
          .ax-fm__folder-ico { display:inline-flex; flex:0 0 auto; }
          .ax-fm__folder-meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
          .ax-fm__folder-meta > span:first-child { font-weight:var(--ax-weight-medium); color:var(--ax-text-strong); font-size:var(--ax-text-sm); }
          .ax-fm__folder-sub { font-family:var(--ax-font-mono); font-size:var(--ax-text-2xs); color:var(--ax-text-subtle); }
          .ax-fm__folder-more { width:18px; height:18px; color:var(--ax-text-subtle); flex:0 0 18px; opacity:0; transition:opacity var(--ax-motion-fast); }
          .ax-fm__folder:hover .ax-fm__folder-more { opacity:1; }
          .ax-fm__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:var(--ax-space-4); }
          .ax-fm__tile { position:relative; display:flex; flex-direction:column; gap:var(--ax-space-3); padding:var(--ax-space-3); background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); cursor:pointer; text-align:start; transition:border-color var(--ax-motion-fast), box-shadow var(--ax-motion-fast); }
          .ax-fm__tile:hover { border-color:var(--ax-border-strong); box-shadow:var(--ax-shadow-sm); }
          .ax-fm__tile:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ax-canvas), 0 0 0 4px var(--ax-focus-ring); }
          .ax-fm__tile.is-selected { border-color:var(--ax-accent); box-shadow:0 0 0 1px var(--ax-accent); background:var(--ax-accent-wash); }
          .ax-fm__check { position:absolute; top:var(--ax-space-3); left:var(--ax-space-3); z-index:2; opacity:0; transition:opacity var(--ax-motion-fast); }
          .ax-fm__tile:hover .ax-fm__check, .ax-fm__tile.is-selected .ax-fm__check { opacity:1; }
          .ax-fm__tile-more { position:absolute; top:var(--ax-space-3); right:var(--ax-space-3); z-index:2; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:0; border-radius:var(--ax-radius-sm); background:var(--ax-surface-overlay); color:var(--ax-text-muted); cursor:pointer; opacity:0; transition:opacity var(--ax-motion-fast); }
          .ax-fm__tile-more svg { width:16px; height:16px; }
          .ax-fm__tile:hover .ax-fm__tile-more { opacity:1; }
          .ax-fm__thumb { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; border-radius:var(--ax-radius-sm); overflow:hidden; }
          .ax-fm__thumb-glyph { display:inline-flex; width:34px; height:34px; }
          .ax-fm__thumb-glyph svg { width:34px; height:34px; }
          .ax-fm__tile-body { min-width:0; }
          .ax-fm__tile-name { font-size:var(--ax-text-sm); font-weight:var(--ax-weight-medium); color:var(--ax-text-strong); line-height:1.35; }
          .ax-fm__tile-sub { font-family:var(--ax-font-mono); font-size:var(--ax-text-2xs); color:var(--ax-text-subtle); margin-top:2px; }
          .ax-fm__tile-star { position:absolute; bottom:var(--ax-space-3); right:var(--ax-space-3); width:15px; height:15px; }
          .ax-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
          /* drawer + modal */
          .ax-fm__drawer-backdrop { position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
          .ax-fm__drawer { width:min(420px,100%); height:100%; border-radius:0; display:flex; flex-direction:column; }
          .ax-fm__drawer .ax-card__body { flex:1 1 auto; }
          .ax-fm__preview { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; border-radius:var(--ax-radius-lg); box-shadow:var(--ax-shadow-sm); }
          .ax-fm__drawer-actions { display:flex; gap:var(--ax-space-3); }
          .ax-fm__drawer-actions > .ax-btn:first-child { flex:1 1 auto; }
          .ax-fm__meta-list { list-style:none; display:flex; flex-direction:column; gap:var(--ax-space-3); }
          .ax-fm__meta-list li { display:flex; align-items:center; justify-content:space-between; gap:var(--ax-space-4); font-size:var(--ax-text-sm); }
          .ax-fm__meta-list span { color:var(--ax-text-subtle); }
          .ax-fm__meta-list b { color:var(--ax-text-strong); font-weight:var(--ax-weight-medium); text-align:end; }
          .ax-fm__dropzone { display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--ax-space-7) var(--ax-space-5); border:2px dashed var(--ax-border-strong); border-radius:var(--ax-radius-md); background:var(--ax-surface-subtle); }
          .ax-fm__upload-row { display:flex; align-items:center; gap:var(--ax-space-3); padding:var(--ax-space-2) var(--ax-space-3); background:var(--ax-surface-subtle); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); }
          .ax-fm-slide { animation:axFmSlide .2s var(--ax-ease-standard); }
          @keyframes axFmSlide { from { transform:translateX(28px); opacity:0; } to { transform:translateX(0); opacity:1; } }
          @media (max-width:992px){ .ax-fm { grid-template-columns:1fr; } .ax-fm__rail { position:static; height:auto; } }
          @media (prefers-reduced-motion: reduce){ .ax-fm-slide, .ax-fm__tile, .ax-fm__folder { animation:none; transition:none; } }
        </style>

        <script>
          function axFiles(){
            const ic = {
              pdf:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M17 18h2"/><path d="M20 15h-3v6"/><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"/></svg>',
              img:'<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="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-12"/><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>',
              fig:'<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="M15 12a3 3 0 1 0 -6 0a3 3 0 0 0 6 0"/><path d="M6 15a3 3 0 1 0 6 0v-3h-3a3 3 0 0 0 -3 3"/><path d="M9 9a3 3 0 0 0 0 -6h3v6h-3"/><path d="M12 3h3a3 3 0 0 1 0 6h-3v-6"/><path d="M9 21a3 3 0 0 1 -3 -3v0a3 3 0 0 1 3 -3h3"/></svg>',
              zip:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M16 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M12 15v6"/><path d="M5 15h3l-3 6h3"/></svg>',
              vid:'<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="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4"/><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"/></svg>',
              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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5"/><path d="M3 19l4 -4"/><path d="M3 15l4 4"/></svg>',
              doc:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/><path d="M9 17l6 0"/></svg>',
              code:'<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="M7 8l-4 4l4 4"/><path d="M17 8l4 4l-4 4"/><path d="M14 4l-4 16"/></svg>',
            };
            const C = { accent:'var(--ax-accent)', cyan:'var(--ax-viz-cyan)', violet:'var(--ax-viz-violet)', pink:'var(--ax-viz-pink)', amber:'var(--ax-viz-amber)', emerald:'var(--ax-viz-emerald)', red:'var(--ax-danger-500)' };
            return {
              q:'', view:'grid', filter:'all', activeFolder:'brand', selected:[], previewOpen:false, uploadOpen:false, active:{},
              quickFilters:[
                { id:'all', label:'All files', count:'1,284', color:'var(--ax-accent)', icon:ic.doc },
                { id:'recent', label:'Recent', count:'24', color:'var(--ax-viz-cyan)', icon:'<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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v5l3 3"/></svg>' },
                { id:'starred', label:'Starred', count:'12', color:'var(--ax-warning-500)', icon:'<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="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>' },
                { id:'shared', label:'Shared with me', count:'38', color:'var(--ax-viz-violet)', icon:'<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 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>' },
                { id:'trash', label:'Trash', count:'7', color:'var(--ax-text-subtle)', icon:'<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 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>' },
              ],
              tree:[
                { id:'workspace', name:'Workspace', count:1284, open:true, children:[
                  { id:'design', name:'Design', count:312 },
                  { id:'brand', name:'Brand Assets', count:48 },
                  { id:'eng', name:'Engineering', count:506 },
                  { id:'marketing', name:'Marketing', count:174 },
                ]},
                { id:'shared-root', name:'Shared drives', count:380, open:false, children:[
                  { id:'finance', name:'Finance', count:91 },
                  { id:'legal', name:'Legal', count:64 },
                ]},
                { id:'archive', name:'Archive', count:842, open:false },
              ],
              folders:[
                { id:'logos', name:'Logos', items:18, size:'42 MB', color:'var(--ax-accent)' },
                { id:'typefaces', name:'Typefaces', items:6, size:'88 MB', color:'var(--ax-viz-violet)' },
                { id:'photography', name:'Photography', items:124, size:'2.1 GB', color:'var(--ax-viz-cyan)' },
                { id:'guidelines', name:'Guidelines', items:9, size:'164 MB', color:'var(--ax-viz-amber)' },
              ],
              files:[
                { id:1, name:'brand-guidelines-2026.pdf', type:'PDF document', kind:'pdf', size:'8.4 MB', date:'Jun 24', owner:'Lena Brandt', color:C.red, icon:ic.pdf, starred:true },
                { id:2, name:'hero-banner-final.png', type:'PNG image · 2400×1200', kind:'image', size:'4.1 MB', date:'Jun 23', owner:'You', color:C.cyan, icon:ic.img, starred:false },
                { id:3, name:'product-shot-03.jpg', type:'JPEG image · 3000×2000', kind:'image', size:'6.7 MB', date:'Jun 22', owner:'Maya Okonkwo', color:C.violet, icon:ic.img, starred:true },
                { id:4, name:'aurora-ui-kit.fig', type:'Figma file', kind:'fig', size:'12.3 MB', date:'Jun 21', owner:'Tom Reyes', color:C.accent, icon:ic.fig, starred:false },
                { id:5, name:'launch-teaser.mp4', type:'MP4 video · 0:48', kind:'video', size:'128 MB', date:'Jun 20', owner:'Priya Nair', color:C.pink, icon:ic.vid, starred:false },
                { id:6, name:'icon-set-export.zip', type:'ZIP archive', kind:'zip', size:'2.9 MB', date:'Jun 19', owner:'You', color:C.amber, icon:ic.zip, starred:false },
                { id:7, name:'q2-campaign-budget.xlsx', type:'Spreadsheet', kind:'sheet', size:'612 KB', date:'Jun 18', owner:'Daniel Cho', color:C.emerald, icon:ic.sheet, starred:false },
                { id:8, name:'press-release-draft.docx', type:'Word document', kind:'doc', size:'248 KB', date:'Jun 17', owner:'Ava Sutton', color:C.cyan, icon:ic.doc, starred:false },
                { id:9, name:'theme-tokens.css', type:'Stylesheet', kind:'code', size:'34 KB', date:'Jun 16', owner:'Tom Reyes', color:C.violet, icon:ic.code, starred:false },
                { id:10, name:'social-cover-set.png', type:'PNG image · 1600×900', kind:'image', size:'3.3 MB', date:'Jun 15', owner:'You', color:C.amber, icon:ic.img, starred:false },
              ],
              get visibleFiles(){ const t=this.q.trim().toLowerCase(); return this.files.filter(f=>!t || f.name.toLowerCase().includes(t)); },
              toggle(id){ const i=this.selected.indexOf(id); if(i>-1){ this.selected.splice(i,1); } else { this.selected.push(id); } },
              openPreview(f){ this.active=f; this.previewOpen=true; },
            };
          }
        </script>

      
{% endblock %}

{% block scripts %}
<script>
          function axFiles(){
            const ic = {
              pdf:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M17 18h2"/><path d="M20 15h-3v6"/><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"/></svg>',
              img:'<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="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-12"/><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>',
              fig:'<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="M15 12a3 3 0 1 0 -6 0a3 3 0 0 0 6 0"/><path d="M6 15a3 3 0 1 0 6 0v-3h-3a3 3 0 0 0 -3 3"/><path d="M9 9a3 3 0 0 0 0 -6h3v6h-3"/><path d="M12 3h3a3 3 0 0 1 0 6h-3v-6"/><path d="M9 21a3 3 0 0 1 -3 -3v0a3 3 0 0 1 3 -3h3"/></svg>',
              zip:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M16 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M12 15v6"/><path d="M5 15h3l-3 6h3"/></svg>',
              vid:'<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="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4"/><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"/></svg>',
              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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5"/><path d="M3 19l4 -4"/><path d="M3 15l4 4"/></svg>',
              doc:'<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="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/><path d="M9 17l6 0"/></svg>',
              code:'<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="M7 8l-4 4l4 4"/><path d="M17 8l4 4l-4 4"/><path d="M14 4l-4 16"/></svg>',
            };
            const C = { accent:'var(--ax-accent)', cyan:'var(--ax-viz-cyan)', violet:'var(--ax-viz-violet)', pink:'var(--ax-viz-pink)', amber:'var(--ax-viz-amber)', emerald:'var(--ax-viz-emerald)', red:'var(--ax-danger-500)' };
            return {
              q:'', view:'grid', filter:'all', activeFolder:'brand', selected:[], previewOpen:false, uploadOpen:false, active:{},
              quickFilters:[
                { id:'all', label:'All files', count:'1,284', color:'var(--ax-accent)', icon:ic.doc },
                { id:'recent', label:'Recent', count:'24', color:'var(--ax-viz-cyan)', icon:'<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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v5l3 3"/></svg>' },
                { id:'starred', label:'Starred', count:'12', color:'var(--ax-warning-500)', icon:'<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="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>' },
                { id:'shared', label:'Shared with me', count:'38', color:'var(--ax-viz-violet)', icon:'<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 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>' },
                { id:'trash', label:'Trash', count:'7', color:'var(--ax-text-subtle)', icon:'<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 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>' },
              ],
              tree:[
                { id:'workspace', name:'Workspace', count:1284, open:true, children:[
                  { id:'design', name:'Design', count:312 },
                  { id:'brand', name:'Brand Assets', count:48 },
                  { id:'eng', name:'Engineering', count:506 },
                  { id:'marketing', name:'Marketing', count:174 },
                ]},
                { id:'shared-root', name:'Shared drives', count:380, open:false, children:[
                  { id:'finance', name:'Finance', count:91 },
                  { id:'legal', name:'Legal', count:64 },
                ]},
                { id:'archive', name:'Archive', count:842, open:false },
              ],
              folders:[
                { id:'logos', name:'Logos', items:18, size:'42 MB', color:'var(--ax-accent)' },
                { id:'typefaces', name:'Typefaces', items:6, size:'88 MB', color:'var(--ax-viz-violet)' },
                { id:'photography', name:'Photography', items:124, size:'2.1 GB', color:'var(--ax-viz-cyan)' },
                { id:'guidelines', name:'Guidelines', items:9, size:'164 MB', color:'var(--ax-viz-amber)' },
              ],
              files:[
                { id:1, name:'brand-guidelines-2026.pdf', type:'PDF document', kind:'pdf', size:'8.4 MB', date:'Jun 24', owner:'Lena Brandt', color:C.red, icon:ic.pdf, starred:true },
                { id:2, name:'hero-banner-final.png', type:'PNG image · 2400×1200', kind:'image', size:'4.1 MB', date:'Jun 23', owner:'You', color:C.cyan, icon:ic.img, starred:false },
                { id:3, name:'product-shot-03.jpg', type:'JPEG image · 3000×2000', kind:'image', size:'6.7 MB', date:'Jun 22', owner:'Maya Okonkwo', color:C.violet, icon:ic.img, starred:true },
                { id:4, name:'aurora-ui-kit.fig', type:'Figma file', kind:'fig', size:'12.3 MB', date:'Jun 21', owner:'Tom Reyes', color:C.accent, icon:ic.fig, starred:false },
                { id:5, name:'launch-teaser.mp4', type:'MP4 video · 0:48', kind:'video', size:'128 MB', date:'Jun 20', owner:'Priya Nair', color:C.pink, icon:ic.vid, starred:false },
                { id:6, name:'icon-set-export.zip', type:'ZIP archive', kind:'zip', size:'2.9 MB', date:'Jun 19', owner:'You', color:C.amber, icon:ic.zip, starred:false },
                { id:7, name:'q2-campaign-budget.xlsx', type:'Spreadsheet', kind:'sheet', size:'612 KB', date:'Jun 18', owner:'Daniel Cho', color:C.emerald, icon:ic.sheet, starred:false },
                { id:8, name:'press-release-draft.docx', type:'Word document', kind:'doc', size:'248 KB', date:'Jun 17', owner:'Ava Sutton', color:C.cyan, icon:ic.doc, starred:false },
                { id:9, name:'theme-tokens.css', type:'Stylesheet', kind:'code', size:'34 KB', date:'Jun 16', owner:'Tom Reyes', color:C.violet, icon:ic.code, starred:false },
                { id:10, name:'social-cover-set.png', type:'PNG image · 1600×900', kind:'image', size:'3.3 MB', date:'Jun 15', owner:'You', color:C.amber, icon:ic.img, starred:false },
              ],
              get visibleFiles(){ const t=this.q.trim().toLowerCase(); return this.files.filter(f=>!t || f.name.toLowerCase().includes(t)); },
              toggle(id){ const i=this.selected.indexOf(id); if(i>-1){ this.selected.splice(i,1); } else { this.selected.push(id); } },
              openPreview(f){ this.active=f; this.previewOpen=true; },
            };
          }
        </script>
{% endblock %}