<?php
declare(strict_types=1);

$scriptName = isset($_SERVER['SCRIPT_NAME']) ? (string)$_SERVER['SCRIPT_NAME'] : '/index.php';
$appBase = str_replace('\\', '/', dirname($scriptName));
if ($appBase === '.' || $appBase === '/' || $appBase === '\\') $appBase = '';
$assetBase = $appBase === '' ? '' : $appBase;
$cssVersion = (string)(@filemtime(__DIR__ . '/system/style.css') ?: 1);
$jsVersion = (string)(@filemtime(__DIR__ . '/system/script.js') ?: 1);

$h = static fn(string $s): string => htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
?>
<!doctype html>
<html lang="sv" translate="no" class="notranslate" data-base="<?= $h($appBase) ?>">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
  <meta name="google" content="notranslate" />
  <link rel="icon" type="image/x-icon" href="<?= $h($assetBase . '/system/favicon.ico') ?>">
  <title>pics</title>
  <link rel="stylesheet" href="<?= $h($assetBase . '/system/style.css?v=' . $cssVersion) ?>" />
</head>
<body>
  <div class="topload" id="topLoad" role="status" aria-live="polite" aria-hidden="true">
    <div class="topload-track"><div class="topload-bar" id="topLoadBar"></div></div>
    <span class="topload-pct mono" id="topLoadPct">0%</span>
  </div>

  <div class="fx fx-scan" aria-hidden="true"></div>
  <div class="fx fx-grain" aria-hidden="true"></div>

  <div class="app">
    <header class="topbar">
      <div class="brand" aria-label="dark viewer">
        <div class="brand-title mono">dark viewer</div>
      </div>

      <div class="stats mono" aria-label="Status">
        <div class="stat stat-folder">
          <label class="k" for="folderSelect">FOLDER</label>
          <select id="folderSelect" class="select select-compact" aria-label="Choose folder"></select>
        </div>
        <div class="stat"><span class="k">IMG</span><span class="v" id="uiCount">0/0</span></div>
        <div class="stat"><span class="k">LOAD</span><span class="v" id="uiLoad">0%</span></div>
      </div>
    </header>

    <div class="shell">
      <aside class="sidebar" id="sidebar" aria-label="Library">
        <div class="side-head">
          <div class="side-title">LIBRARY</div>
        </div>

        <div class="thumbs" id="thumbs" aria-label="Thumbnails"></div>
      </aside>

      <section class="viewer" aria-label="Viewer">
        <div class="stage">
          <img id="viewer" alt="Image" decoding="async" fetchpriority="high" />
          <div class="hud">
            <div class="hud-left" id="hudLeft">
              <div
                class="loadbar-track"
                id="hudLoadTrack"
                role="progressbar"
                aria-label="Image preload progress"
                aria-valuemin="0"
                aria-valuemax="100"
                aria-valuenow="0"
              >
                <div class="loadbar-fill" id="hudLoadFill"></div>
              </div>
              <div class="loadbar-meta mono" id="hudLoadMeta">Loaded 0/0 • 0%</div>
            </div>
            <div class="hud-right mono" id="hudRight"></div>
          </div>
        </div>

        <div class="controls" aria-label="Controls">
          <button class="btn ghost" id="prev" type="button">Prev</button>
          <button class="btn" id="play" type="button">Play</button>
          <button class="btn ghost" id="next" type="button">Next</button>
        </div>

        <div class="note" id="note" aria-live="polite"></div>
      </section>
    </div>
  </div>

  <script src="<?= $h($assetBase . '/system/script.js?v=' . $jsVersion) ?>" defer></script>
</body>
</html>
