<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="appsite-module-id" content="-appsitetm_gallery">
  <title>AppSite Gallery</title>
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="https://gallery-appsite.web.app/shared/layout.css" crossorigin="anonymous">
  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="theme-color" content="#090c11" />
</head>
<body>

<!-- Loading screen -->
<div id="loadingScreen" style="display:flex;align-items:center;justify-content:center;min-height:100dvh;font-size:14px;color:#94a3b8">Loading…</div>

<!-- App shell -->
<div id="app" style="display:none">

  <header class="topbar">
    <h1>Gallery</h1>
    <div class="actions">
      <button id="signOutButton" type="button" class="btn btn-ghost btn-sm">Sign out</button>
    </div>
  </header>

  <main class="workspace">
    <div id="statusGalleryBar" class="gallery-status-bar"></div>

    <div class="gallery-body">

      <!-- Left sidebar nav -->
      <nav id="galleryNav" class="hub-sidebar">
        <button class="filter-chip active" data-tab="browse">Browse</button>
        <button class="filter-chip" data-tab="create">Generate</button>
        <button class="filter-chip" data-tab="themes">Themes</button>
        <button class="filter-chip" data-tab="webapps">Sites</button>
        <button class="filter-chip" data-tab="appearance">Brand Theme</button>
        <span class="sidebar-rail-label">Gallery</span>
        <button id="gallerySidebarToggle" class="sidebar-toggle-btn" style="display:none" title="Collapse menu" aria-label="Toggle sidebar">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
      </nav>

      <!-- Content area -->
      <div class="gallery-content">

    <!-- ══ Browse Tab ══ -->
    <div id="tab-browse">
      <div class="browse-toolbar">
        <input id="searchInput" type="search" placeholder="Search images…" class="field-input" style="min-width:200px">
        <select id="usageFilter" class="field-input" style="width:140px">
          <option value="all">All uses</option>
          <option value="general">General</option>
          <option value="hero">Hero</option>
          <option value="thumbnail">Thumbnail</option>
          <option value="background">Background</option>
          <option value="logo">Logo</option>
          <option value="product">Product</option>
        </select>
        <button id="gridBtn" class="btn btn-surface btn-sm active" title="Grid view">⊞</button>
        <button id="listBtn" class="btn btn-surface btn-sm" title="List view">☰</button>
        <button id="addImageBtn" class="btn btn-primary btn-sm">+ Add Image</button>
      </div>

      <!-- Usage filter pills -->
      <div id="usagePills" class="pill-row"></div>
      <!-- Webapp filter pills injected here by JS -->

      <!-- Upload form -->
      <div id="uploadForm" class="card hidden" style="margin:12px 0;padding:16px">
        <h3 style="margin:0 0 12px;font-size:14px;font-weight:700">Add Image</h3>
        <div class="form-grid two">
          <label class="field">URL <input id="urlInput" type="url" placeholder="https://… (or pick a file below)" class="field-input"></label>
          <label class="field">Name <input id="nameInput" type="text" placeholder="Image name" class="field-input"></label>
          <label class="field">Alt text <input id="altInput" type="text" placeholder="Describe the image" class="field-input"></label>
          <label class="field">Tags (comma-separated) <input id="tagsInput" type="text" placeholder="e.g. hero, outdoor, blue" class="field-input"></label>
        </div>
        <div style="margin:10px 0">
          <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">Usage</div>
          <div id="uploadUsageChips" class="chip-row"></div>
        </div>
        <div style="display:flex;gap:8px;align-items:center;margin-top:10px">
          <button id="filePickerBtn" class="btn btn-surface btn-sm">Choose file…</button>
          <span id="filePickerLabel" style="font-size:12px;color:var(--text-muted)">No file chosen</span>
          <input id="fileInput" type="file" accept="image/*" style="display:none">
        </div>
        <div style="display:flex;gap:8px;margin-top:12px">
          <button id="saveUploadBtn" class="btn btn-primary btn-sm">Save</button>
          <button id="cancelUploadBtn" class="btn btn-surface btn-sm">Cancel</button>
        </div>
      </div>

      <!-- Image grid/list -->
      <div id="imageContainer"></div>
    </div>

    <!-- ══ Generate Tab ══ -->
    <div id="tab-create" class="hidden">
      <div class="card" style="max-width:640px;padding:20px">
        <h2 style="font-size:16px;font-weight:700;margin:0 0 14px">AI Image Generation</h2>

        <!-- Credit bar -->
        <div id="creditBar" class="credit-bar hidden" style="display:flex;justify-content:space-between;padding:8px 12px;border-radius:7px;background:var(--surface-raised);border:1px solid var(--border);font-size:12px;margin-bottom:14px"></div>

        <!-- API selector -->
        <div style="display:flex;gap:8px;margin-bottom:14px">
          <button class="api-opt on btn btn-surface btn-sm" data-api="dalle">DALL-E 3</button>
          <button class="api-opt btn btn-surface btn-sm" data-api="imagen">Imagen 3</button>
        </div>

        <!-- API keys -->
        <div id="apiKeysList" style="margin-bottom:14px"></div>
        <button id="setupApiKeyBtn" class="btn btn-surface btn-sm" style="margin-bottom:14px;display:none">Set up API key</button>

        <!-- Prompt -->
        <label class="field" style="margin-bottom:10px">
          Prompt
          <textarea id="genPrompt" rows="3" class="field-input" placeholder="Describe the image you want to generate…"></textarea>
        </label>

        <!-- Theme selector -->
        <div style="margin-bottom:10px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
            <span style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em">Visual Theme</span>
            <button id="clearThemeBtn" class="btn btn-ghost btn-sm">Clear</button>
          </div>
          <div id="themeChipList" class="chip-row"></div>
          <div id="themeHint" class="hidden" style="font-size:11px;color:var(--text-muted);margin-top:6px"></div>
        </div>

        <!-- Name + usage -->
        <label class="field" style="margin-bottom:10px">Name (optional) <input id="genName" type="text" class="field-input" placeholder="e.g. Summer hero banner"></label>
        <div style="margin-bottom:14px">
          <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">Usage</div>
          <div id="genUsageChips" class="chip-row"></div>
        </div>

        <div style="display:flex;gap:8px">
          <button id="generateBtn" class="btn btn-primary" disabled>Generate</button>
        </div>

        <div id="genError" class="hidden" style="margin-top:10px;font-size:13px;color:var(--danger)"></div>

        <!-- Preview -->
        <div id="previewSection" class="hidden" style="margin-top:16px">
          <div id="previewContent" style="margin-bottom:12px"></div>
          <div style="display:flex;gap:8px">
            <button id="saveGeneratedBtn" class="btn btn-primary btn-sm">
              <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
              Save to gallery
            </button>
            <button id="discardBtn" class="btn btn-surface btn-sm">Discard</button>
          </div>
        </div>
      </div>
    </div>

    <!-- ══ Themes Tab ══ -->
    <div id="tab-themes" class="hidden">
      <div class="card" style="max-width:720px;padding:20px">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
          <h2 style="font-size:16px;font-weight:700;margin:0">Visual Themes <span id="themeCount" style="font-size:12px;color:var(--text-muted);font-weight:400"></span></h2>
          <div style="display:flex;gap:8px">
            <button id="seedDefaultsBtn" class="btn btn-surface btn-sm">Seed defaults</button>
            <button id="newThemeBtn" class="btn btn-primary btn-sm">+ New Theme</button>
          </div>
        </div>

        <!-- Theme form (hidden by default) -->
        <div id="themeFormWrap" class="hidden card" style="padding:16px;margin-bottom:16px;background:var(--surface-raised)">
          <h3 id="themeFormTitle" style="font-size:14px;font-weight:700;margin:0 0 12px">New Theme</h3>
          <div class="form-grid two">
            <label class="field">Name <input id="tf-name" type="text" class="field-input" placeholder="e.g. Ocean Breeze"></label>
            <label class="field">Mood <input id="tf-mood" type="text" class="field-input" placeholder="e.g. serene, energetic"></label>
            <label class="field" style="grid-column:1/-1">Style prompt <input id="tf-style" type="text" class="field-input" placeholder="Appended to every AI prompt when theme is active"></label>
            <label class="field">Colour palette (hex, comma-sep) <input id="tf-palette" type="text" class="field-input" placeholder="#1e3a5f, #a8d5e2, #fff"></label>
            <div class="field"><label style="font-size:11px;color:var(--text-muted);text-transform:uppercase;font-weight:700">Palette preview</label><div id="tf-palette-preview" style="display:flex;gap:4px;margin-top:6px;height:24px;border-radius:4px;overflow:hidden"></div></div>
            <label class="field">Image key (optional) <input id="tf-imageKey" type="text" class="field-input" placeholder="Gallery image key for this theme"></label>
            <div class="field"><label style="font-size:11px;color:var(--text-muted);text-transform:uppercase;font-weight:700">Theme image preview</label><div id="tf-imageKey-preview" style="margin-top:6px;height:60px;border-radius:6px;overflow:hidden;background:var(--border)"></div></div>
            <label class="field" style="grid-column:1/-1">Picture description (optional) <input id="tf-pictureDescription" type="text" class="field-input" placeholder="What this theme's imagery should look like"></label>
            <label class="field" style="grid-column:1/-1">Description <textarea id="tf-desc" rows="2" class="field-input" placeholder="Internal notes about this theme"></textarea></label>
          </div>
          <div style="display:flex;gap:8px;margin-top:12px">
            <button id="saveThemeBtn" class="btn btn-primary btn-sm">Save Theme</button>
            <button id="cancelThemeBtn" class="btn btn-surface btn-sm">Cancel</button>
          </div>
        </div>

        <!-- Theme list -->
        <div id="themeList"></div>
      </div>
    </div>

    <!-- ══ Webapps Tab ══ -->
    <div id="tab-webapps" class="hidden">
      <div class="card" style="max-width:720px;padding:20px">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
          <h2 id="webappsCount" style="font-size:16px;font-weight:700;margin:0">Registered Sites</h2>
          <button id="addWebappBtn" class="btn btn-primary btn-sm">+ Register Site</button>
        </div>
        <div id="webappList"></div>
      </div>
    </div>

    <!-- ══ Brand Theme Tab ══ -->
    <div id="tab-appearance" class="hidden">
      <div class="card" style="max-width:640px;padding:20px">
        <h2 style="font-size:16px;font-weight:700;margin:0 0 4px">Brand Theme</h2>
        <p style="font-size:12px;color:var(--text-muted);margin:0 0 16px;line-height:1.5">
          Set this tenant's brand colours. The accent applies across <strong>every</strong> AppSite module;
          background &amp; text are optional and only override modules when set. Changes take effect on next load of each module.
        </p>

        <div class="form-grid two" style="gap:14px">
          <label class="field">Accent colour
            <span style="display:flex;gap:8px;align-items:center;margin-top:4px">
              <input id="bt-accent" type="color" value="#0f766e" style="width:44px;height:34px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer">
              <input id="bt-accent-hex" type="text" class="field-input" value="#0f766e" style="flex:1;text-transform:none">
            </span>
          </label>
          <label class="field">Background <span style="font-weight:400;text-transform:none">(optional)</span>
            <span style="display:flex;gap:8px;align-items:center;margin-top:4px">
              <input id="bt-bg" type="color" value="#f6f7f9" style="width:44px;height:34px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer">
              <input id="bt-bg-hex" type="text" class="field-input" placeholder="leave blank to keep module default" style="flex:1;text-transform:none">
            </span>
          </label>
          <label class="field">Text colour <span style="font-weight:400;text-transform:none">(optional)</span>
            <span style="display:flex;gap:8px;align-items:center;margin-top:4px">
              <input id="bt-ink" type="color" value="#1f2933" style="width:44px;height:34px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer">
              <input id="bt-ink-hex" type="text" class="field-input" placeholder="leave blank to keep module default" style="flex:1;text-transform:none">
            </span>
          </label>
        </div>

        <!-- Live preview -->
        <div style="margin:18px 0 8px">
          <div style="font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Preview</div>
          <div id="bt-preview" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px;border:1px solid var(--border);border-radius:10px">
            <span class="bt-swatch" data-role="accent" title="Accent" style="width:38px;height:38px;border-radius:8px"></span>
            <span class="bt-swatch" data-role="dark" title="Accent (dark)" style="width:38px;height:38px;border-radius:8px"></span>
            <span class="bt-swatch" data-role="soft" title="Soft tint" style="width:38px;height:38px;border-radius:8px;border:1px solid var(--border)"></span>
            <button id="bt-preview-btn" type="button" style="border:none;border-radius:7px;padding:8px 16px;font-size:13px;font-weight:600;color:#fff;cursor:default">Sample button</button>
            <span id="bt-preview-link" style="font-size:13px;font-weight:600">Sample link</span>
          </div>
        </div>

        <div id="bt-error" class="hidden" style="font-size:13px;color:var(--danger);margin:8px 0"></div>
        <div id="bt-status" style="font-size:12px;color:var(--text-muted);min-height:16px;margin:4px 0"></div>

        <div style="display:flex;gap:8px;margin-top:8px">
          <button id="bt-save" class="btn btn-primary btn-sm">Save brand theme</button>
          <button id="bt-reset" class="btn btn-surface btn-sm">Reset to default</button>
        </div>
      </div>
    </div>

      </div><!-- /.gallery-content -->
    </div><!-- /.gallery-body -->

  </main>
</div><!-- /#app -->

<script src="https://gallery-appsite.web.app/shared/desk-bridge.js"></script>
    <script type="module" src="/module-branding.js"></script>
<script type="module" src="/gallery.js"></script>
<script type="module" src="/topnav-module.js"></script>


<button id="pwa-ios-btn" onclick="document.getElementById('pwa-ios-tooltip').style.display='block';this.style.display='none';">Add to Home Screen</button>
<div id="pwa-ios-tooltip"><p>Tap <strong>Share</strong> in Safari, then tap <strong>Add to Home Screen</strong>.</p><span id="pwa-ios-dismiss" onclick="document.getElementById('pwa-ios-tooltip').style.display='none';document.getElementById('pwa-ios-btn').style.display='flex';">Dismiss</span></div>
<script>(function(){var isIos=/iphone|ipad|ipod/i.test(navigator.userAgent);var isStandalone=window.navigator.standalone===true||window.matchMedia('(display-mode: standalone)').matches;if(isIos&&!isStandalone){document.getElementById('pwa-ios-btn').style.display='flex';}})();</script>

<footer style="text-align:center;padding:18px 16px 24px;font-size:12px;color:var(--muted-foreground,#888)">
  <a href="https://sdk.appsite.ca/policies/privacy" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline">Privacy Policy</a>&nbsp;·&nbsp;
  <a href="https://sdk.appsite.ca/policies/terms" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline">Terms</a>
</footer>
</body>
</html>
