<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#161820">
  <title>SlipScan Local</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="noise"></div>
  <header class="topbar">
    <div class="brand">
      <div class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 32 32"><path d="M8 5.5h11l5 5V26.5H8z"/><path d="M19 5.5v6h5M12 16h8M12 20h8"/></svg>
      </div>
      <div><strong>SlipScan</strong><span>local document OCR</span></div>
    </div>
    <div class="status-pill" id="statusPill"><i></i><span id="statusLabel">Starting…</span></div>
    <div class="header-actions">
      <button class="ghost" id="openFolderButton" title="Open the images directory">Open images folder</button>
      <label class="button secondary" for="fileInput">Upload</label>
      <input id="fileInput" type="file" accept="image/png,image/jpeg,image/webp" multiple hidden>
    </div>
  </header>

  <div class="bootstrap" id="bootstrapPanel">
    <div class="bootstrap-card">
      <div class="loader-ring"></div>
      <div class="bootstrap-copy">
        <strong id="bootstrapMessage">Preparing the local OCR engine…</strong>
        <span id="bootstrapDetail">The first run downloads the runtime and model once.</span>
      </div>
      <div class="progress-track"><div id="progressBar"></div></div>
      <span class="progress-value" id="progressValue">0%</span>
    </div>
  </div>

  <main class="workspace">
    <aside class="panel library-panel">
      <div class="panel-heading">
        <div><span class="eyebrow">Source</span><h2>Image library</h2></div>
        <button class="icon-button" id="refreshButton" title="Refresh image list" aria-label="Refresh image list">
          <svg viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5"/><path d="M18.5 9A7 7 0 0 0 6.4 6.4L4 9M5.5 15A7 7 0 0 0 17.6 17.6L20 15"/></svg>
        </button>
      </div>
      <div class="search-box">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>
        <input id="searchInput" placeholder="Search images" autocomplete="off">
        <kbd id="imageCount">0</kbd>
      </div>
      <div class="image-list" id="imageList"></div>
      <div class="empty-state hidden" id="emptyState">
        <div class="empty-icon">＋</div>
        <strong>Add an image</strong>
        <span>Copy it into the images folder or drop it anywhere here.</span>
      </div>
    </aside>

    <section class="panel preview-panel" id="dropZone">
      <div class="panel-heading preview-heading">
        <div>
          <span class="eyebrow">Document</span>
          <h2 id="selectedName">Select an image</h2>
          <span class="file-meta" id="selectedMeta">PNG, JPEG and WebP are supported</span>
        </div>
        <div class="zoom-controls">
          <button class="icon-button" id="zoomOut" title="Zoom out">−</button>
          <span id="zoomLabel">100%</span>
          <button class="icon-button" id="zoomIn" title="Zoom in">＋</button>
          <button class="icon-button" id="zoomReset" title="Fit image">Fit</button>
        </div>
      </div>
      <div class="image-stage" id="imageStage">
        <div class="stage-placeholder" id="stagePlaceholder">
          <svg viewBox="0 0 48 48"><rect x="7" y="6" width="34" height="36" rx="4"/><path d="M13 31l7-8 6 6 4-4 5 6M16 16h.01"/></svg>
          <strong>No image selected</strong>
          <span>Choose a file from the library.</span>
        </div>
        <img id="previewImage" alt="Selected document" draggable="false">
        <div class="drop-hint" id="dropHint"><strong>Drop images to add them</strong><span>They will be copied into images/</span></div>
      </div>
      <div class="scan-bar">
        <label class="check"><input type="checkbox" id="forceCheck"><span></span>Force re-run</label>
        <div class="scan-hint" id="scanHint">Single-pass OCR · 1540 px input</div>
        <button class="button primary" id="scanButton" disabled>
          <span class="button-label">Scan selected image</span>
          <span class="button-spinner"></span>
        </button>
      </div>
    </section>

    <aside class="panel result-panel">
      <div class="panel-heading result-heading">
        <div><span class="eyebrow">Output</span><h2>Structured result</h2></div>
        <div class="tab-switcher" role="tablist">
          <button class="active" data-tab="json">JSON</button>
          <button data-tab="raw">Raw OCR</button>
        </div>
      </div>
      <div class="result-toolbar">
        <span id="resultStatus">No result yet</span>
        <div>
          <button class="text-button" id="copyButton" disabled>Copy</button>
          <button class="text-button" id="downloadButton" disabled>Export</button>
          <button class="text-button accent" id="saveButton" disabled>Save correction</button>
        </div>
      </div>
      <div class="result-content">
        <textarea id="jsonEditor" spellcheck="false" aria-label="OCR JSON result" placeholder="The extracted JSON will appear here."></textarea>
        <pre id="rawOutput" class="hidden">Raw OCR will appear here.</pre>
      </div>
      <div class="result-footer">
        <span>All processing stays on this machine.</span>
        <span id="timingLabel">—</span>
      </div>
    </aside>
  </main>

  <div class="toast-stack" id="toastStack" aria-live="polite"></div>
  <script src="/app.js" defer></script>
</body>
</html>
