{% extends "base.html" %}
{% block title %}Images · {{ project.name }}{% endblock %}
{% block body %}
{% set active_tab = 'images' %}
{% include '_project_tabs.html' %}

<div x-data='imagesApp({
        project: {{ project.name|tojson }},
        captures: {{ captures|tojson }},
        rawpy: {{ rawpy_available|tojson }}
     })'>

  <div class="card">
    <div class="card-head">
      <h2>Images (<span x-text="captures.length"></span>)</h2>
      <label class="btn ghost" :class="{ disabled: busy }">
        <span x-text="busy ? 'Uploading…' : '⬆ Upload images'"></span>
        <input type="file" multiple accept=".dng" @change="uploadFiles($event)" :disabled="busy" hidden>
      </label>
    </div>
    <p class="hint">Upload existing <code>.dng</code> files — they're auto-tagged from the filename
      (<code>&lt;label&gt;_&lt;K&gt;k_&lt;lux&gt;l.dng</code>, <code>alsc_&lt;K&gt;k_&lt;n&gt;.dng</code>, <code>cac_&lt;K&gt;k_&lt;n&gt;.dng</code>, <code>dark_&lt;n&gt;.dng</code>)
      and renamed to the project's naming scheme.</p>
    <div class="banner error mt" x-show="uploadMsg" x-text="uploadMsg" x-cloak></div>

    <div class="img-grid mt" x-show="captures.length">
      <template x-for="item in renderItems()" :key="item.kind + ':' + item.key">
        <div style="display: contents">

          <!-- collapsed burst group: one card, click to expand -->
          <template x-if="item.kind === 'group'">
            <div class="img-card group-card" @click="toggleGroup(item.key)" title="Click to expand the burst">
              <div class="thumb clickable">
                <template x-if="item.items[0].jpeg">
                  <img loading="lazy" draggable="false" :src="thumbSrc(item.items[0])" :alt="item.key">
                </template>
                <div class="thumb-empty" x-show="!item.items[0].jpeg">no preview</div>
                <span class="chip group-count" x-text="item.items.length + ' frames'"></span>
              </div>
              <div class="info">
                <div class="fname" x-text="item.key"></div>
                <div class="meta">
                  <span class="chip" :class="item.items[0].image_type" x-text="item.items[0].image_type"></span>
                  <span class="chip" x-text="item.items[0].colour_temp + 'K'"></span>
                  <template x-if="item.items[0].lux"><span class="chip" x-text="item.items[0].lux + ' lx'"></span></template>
                  <span class="chip jpeg">burst</span>
                </div>
              </div>
            </div>
          </template>

          <!-- expanded burst group: full-width header bar, members follow as normal cards -->
          <template x-if="item.kind === 'bar'">
            <div class="group-bar" @click="toggleGroup(item.key)" title="Click to collapse the burst">
              <span class="tri">▾</span> <span class="fname" x-text="item.key"></span>
              <span class="muted" x-text="'· ' + item.count + ' frames'"></span>
            </div>
          </template>

          <!-- individual capture (also each member of an expanded burst) -->
          <template x-if="item.kind === 'card'">
            <div class="img-card" :class="{ invalid: !item.c.valid, excluded: item.c.excluded, grouped: item.grouped }">
              <div class="thumb" :class="{ clickable: item.c.jpeg }" @click="item.c.jpeg && openViewer(item.c, bestSource(item.c))">
                <template x-if="item.c.jpeg">
                  <img loading="lazy" draggable="false" :src="thumbSrc(item.c)" :alt="item.c.filename">
                </template>
                <div class="thumb-empty" x-show="!item.c.jpeg">no preview</div>
                <div class="card-menu">
                  <button x-show="item.c.jpeg === 'saved'" @click.stop="openViewer(item.c, 'jpeg')">Preview (JPEG)</button>
                  <button x-show="rawpy" @click.stop="openViewer(item.c, 'raw')">Preview (raw)</button>
                  <button @click.stop="openExif(item.c)">EXIF</button>
                  <button @click.stop="toggleExclude(item.c)" x-text="item.c.excluded ? 'Include in run' : 'Exclude from run'"></button>
                  <button class="danger" @click.stop="remove(item.c.filename)">Delete</button>
                </div>
              </div>
              <div class="info">
                <div class="fname" x-text="item.c.filename"></div>
                <div class="meta">
                  <span class="chip" :class="item.c.image_type" x-text="item.c.image_type"></span>
                  <span class="chip" x-text="item.c.colour_temp + 'K'"></span>
                  <template x-if="item.c.lux"><span class="chip" x-text="item.c.lux + ' lx'"></span></template>
                  <template x-if="item.c.jpeg === 'saved'"><span class="chip jpeg">JPEG</span></template>
                  <template x-if="!item.c.valid"><span class="chip bad">invalid name</span></template>
                  <template x-if="item.c.excluded"><span class="chip warn">excluded</span></template>
                </div>
              </div>
            </div>
          </template>

        </div>
      </template>
    </div>
    <div class="empty" x-show="!captures.length">
      <div class="big">🎞️</div>No images yet — capture some on the
      <a href="{{ url_for('project', name=project.name) }}">Capture</a> tab, or upload existing files.
    </div>
  </div>

  <!-- Full-size image viewer (popup), shown when a thumbnail with a preview is clicked -->
  <div class="viewer-backdrop" x-show="viewer.open" x-cloak
       @click.self="closeViewer()" @keydown.escape.window="closeViewer()">
    <div class="viewer-box">
      <button class="btn sm ghost viewer-close" @click="closeViewer()">✕</button>
      <div class="preview-wrap" :class="{ louping: loupe.active }" @dragstart.prevent
           @pointerdown="loupeStart($event)" @pointermove="loupeMove($event)"
           @pointerup="loupeEnd($event)" @pointerleave="loupeEnd($event)" @pointercancel="loupeEnd($event)">
        <img id="imgsViewerImg" draggable="false" :src="viewer.src" alt="captured image" @load="viewer.loading = false">
        <div class="placeholder" x-show="viewer.loading" x-cloak>Developing DNG…</div>
        <div id="imgsViewerMarker" class="loupe-marker" x-show="loupe.active" x-cloak></div>
        <canvas id="imgsViewerLoupe" class="loupe" width="220" height="220" x-show="loupe.active" x-cloak></canvas>
      </div>
      <div class="viewer-name">
        <span x-text="viewer.filename"></span>
        <span class="muted" x-show="viewer.developed"> · developed from DNG (rawpy preview)</span>
      </div>
    </div>
  </div>

  <!-- EXIF metadata modal -->
  <div class="viewer-backdrop" x-show="exif.open" x-cloak
       @click.self="exif.open = false" @keydown.escape.window="exif.open = false">
    <div class="exif-box card">
      <div class="card-head">
        <h2 x-text="exif.filename"></h2>
        <button class="btn sm ghost" @click="exif.open = false">✕</button>
      </div>
      <div class="muted" x-show="exif.loading">Reading metadata…</div>
      <div class="banner error" x-show="exif.error" x-text="exif.error" x-cloak></div>
      <div class="muted" x-show="!exif.loading && !exif.error && !exif.summary.length">No metadata found.</div>
      <table class="exif-table" x-show="exif.summary.length">
        <tbody>
          <template x-for="row in exif.summary" :key="row.label">
            <tr><th x-text="row.label"></th><td class="mono" x-text="row.value"></td></tr>
          </template>
        </tbody>
      </table>
      <details class="mt" x-show="exif.tags.length">
        <summary class="muted">All tags (<span x-text="exif.tags.length"></span>)</summary>
        <table class="exif-table mt">
          <tbody>
            <template x-for="t in exif.tags" :key="t.key">
              <tr><th x-text="t.key"></th><td class="mono" x-text="t.value"></td></tr>
            </template>
          </tbody>
        </table>
      </details>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/alpine.min.js') }}" defer></script>
{% endblock %}