{#
  ─────────────────────────────────────────────
   SPB Drive — Personal Cloud Drive
  ─────────────────────────────────────────────
   Author  : Simon-Pierre Boucher
   Contact : contact@spboucher.ai
   File    : src/web/views/app.njk
   Purpose : App shell — topbar, sidebar, main pane, info panel, overlays
   License : MIT © Simon-Pierre Boucher
  ─────────────────────────────────────────────
#}
{% extends "base.njk" %}
{% block title %}SPB Drive{% endblock %}
{% block body %}
<div class="shell" id="shell">
  <header class="topbar">
    <button class="btn icon ghost sidebar-toggle" id="sidebarToggle" aria-label="Menu"></button>
    <div class="brand"><div class="mark">SPB</div><span>SPB Drive</span></div>
    <div class="searchbox">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input id="searchInput" type="search" placeholder="Search files, tags, content…  ( / )" autocomplete="off">
    </div>
    <div class="spacer"></div>
    <button class="btn primary" id="uploadBtn">Upload</button>
    <button class="btn icon ghost" id="viewToggle" title="Toggle view (v)"></button>
    <button class="btn icon ghost" id="themeToggle" title="Toggle theme"></button>
    <button class="btn icon ghost" id="settingsBtn" title="Settings"></button>
  </header>
  <div class="body" id="body">
    <nav class="sidebar" id="sidebar">
      <button class="btn primary new-btn" id="newBtn">＋ New</button>
      <div id="navSections"></div>
      <div class="nav-section">Folders</div>
      <div class="tree" id="folderTree"></div>
      <div class="nav-section">Tags</div>
      <div id="tagList"></div>
      <div class="storage-meter" id="storageMeter"></div>
    </nav>
    <main class="main" id="main">
      <div class="toolbar" id="toolbar"></div>
      <div class="content" id="content" tabindex="0"></div>
    </main>
    <aside class="info-panel" id="infoPanel" aria-label="Details"></aside>
  </div>
</div>
<div class="drop-overlay" id="dropOverlay">
  <div class="inner">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 16V4m0 0 5 5m-5-5-5 5"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
    Drop to upload here
  </div>
</div>
<nav class="bottomnav" id="bottomNav" aria-label="Navigation">
  <button data-bn="drive" aria-label="My Drive"></button>
  <button data-bn="search" aria-label="Search"></button>
  <button class="bn-fab" data-bn="new" aria-label="New"></button>
  <button data-bn="shared" aria-label="Shares"></button>
  <button data-bn="menu" aria-label="Menu"></button>
</nav>
<div class="sidebar-scrim" id="sidebarScrim"></div>
<div class="upload-panel" id="uploadPanel"></div>
<div class="toasts" id="toasts"></div>
<input type="file" id="filePick" multiple hidden>
<input type="file" id="folderPick" webkitdirectory hidden>
<script type="module" src="/assets/js/app.js"></script>
{% endblock %}