{% extends "base.html" %}
{% block title %}{{ event.id }} — sentrytriage{% endblock %}

{% block content %}
  <p class="muted"><a href="/events">&larr; back to events</a></p>

  <div class="panel">
    <h2>{{ event.one_line_caption or "(no caption)" }}</h2>
    <p>
      {% if event.interesting %}
        <span class="pill interesting">VLM: interesting</span>
      {% elif event.interesting is sameas false %}
        <span class="pill boring">VLM: boring</span>
      {% else %}
        <span class="pill muted">VLM: unclassified</span>
      {% endif %}
      <span class="muted">confidence {{ "%.2f" | format(event.confidence or 0) }}</span>
    </p>

    <table>
      <tbody>
        <tr><th style="width:160px;">Event ID</th><td><code>{{ event.id }}</code></td></tr>
        <tr><th>Timestamp</th><td>{{ event.timestamp.isoformat() }}</td></tr>
        <tr><th>Category</th><td><code>{{ event.category or "—" }}</code></td></tr>
        <tr><th>Folder</th><td><code>{{ event.folder }}</code></td></tr>
        <tr><th>Classified at</th><td>{{ event.classified_at.isoformat() if event.classified_at else "(not yet)" }}</td></tr>
      </tbody>
    </table>
  </div>

  <div class="panel">
    <h2>Your verdict</h2>
    <p id="feedback-status" class="muted" style="margin: 0 0 0.5rem;">
      {% if feedback is sameas true %}
        You marked this <span class="pill interesting">interesting</span>
        {% if agreement == "override" %}<span class="pill warn">override</span>
        {% elif agreement == "agree" %}<span class="pill ok">agrees with VLM</span>{% endif %}
      {% elif feedback is sameas false %}
        You marked this <span class="pill boring">boring</span>
        {% if agreement == "override" %}<span class="pill warn">override</span>
        {% elif agreement == "agree" %}<span class="pill ok">agrees with VLM</span>{% endif %}
      {% else %}
        No feedback yet. Your thumb teaches the model where it gets things wrong.
      {% endif %}
    </p>
    <div class="fb-buttons">
      <button id="thumb-up" type="button" data-value="true">&#128077; Interesting</button>
      <button id="thumb-down" type="button" data-value="false">&#128078; Boring</button>
    </div>
  </div>

  {% if subjects %}
    <div class="panel">
      <h2>Subjects observed</h2>
      <ul>
        {% for s in subjects %}<li>{{ s }}</li>{% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="panel">
    <h2>Clip</h2>
    <p class="muted" style="margin: 0 0 0.75rem;">
      Source folder: <code>{{ event.folder }}</code>
    </p>
    {% if videos %}
      <div class="cam-strip">
        {% for v in videos %}
          <a href="#cam-{{ loop.index }}" class="cam-thumb" title="{{ v.name }}">
            <img src="{{ v.thumb_url }}" loading="lazy" alt="{{ v.stem }} thumbnail">
            <span>{{ v.stem }}</span>
          </a>
        {% endfor %}
      </div>
      <div class="cam-grid">
        {% for v in videos %}
          <div class="cam-block" id="cam-{{ loop.index }}">
            <div class="cam-label">{{ v.stem }}</div>
            <video controls preload="none"
                   poster="{{ v.thumb_url }}"
                   src="{{ v.video_url }}">
              Your browser cannot play <code>{{ v.name }}</code>.
            </video>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="muted" style="margin: 0;">
        No playable videos found in the source folder.
        {% if event.folder %}
          (The folder may not exist on this machine — common in demo mode where
          events are synthetic. Real Sentry clips appear here once the daemon
          is pointed at your <code>SentryClips/</code> directory.)
        {% endif %}
      </p>
    {% endif %}
  </div>

  <style>
    .cam-strip {
      display: flex;
      gap: 0.5rem;
      overflow-x: auto;
      margin-bottom: 0.75rem;
      padding-bottom: 0.25rem;
    }
    .cam-thumb {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      text-decoration: none;
      color: var(--muted);
      font-size: 11px;
    }
    .cam-thumb img {
      width: 120px;
      height: 72px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--bg);
    }
    .cam-thumb:hover { color: var(--accent); }
    .cam-thumb:hover img { border-color: var(--accent); }
    .cam-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 0.75rem;
    }
    .cam-block {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.5rem;
    }
    .cam-block video {
      width: 100%;
      height: auto;
      border-radius: 4px;
      background: #000;
      display: block;
    }
    .cam-label {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 0.4rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  </style>

  <style>
    .fb-buttons { display: flex; gap: 0.5rem; }
    .fb-buttons button {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.5rem 0.9rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
    }
    .fb-buttons button:hover { border-color: var(--accent); color: var(--accent); }
    .fb-buttons button[disabled] { opacity: 0.6; cursor: progress; }
  </style>
  <script>
    (() => {
      const eventId = {{ event.id | tojson }};
      const buttons = document.querySelectorAll(".fb-buttons button");
      buttons.forEach((btn) => {
        btn.addEventListener("click", async () => {
          buttons.forEach((b) => (b.disabled = true));
          const value = btn.dataset.value;
          const url = `/events/${encodeURIComponent(eventId)}/feedback?value=${value}`;
          try {
            const res = await fetch(url, { method: "POST" });
            if (!res.ok) throw new Error(`status ${res.status}`);
            window.location.reload();
          } catch (err) {
            buttons.forEach((b) => (b.disabled = false));
            document.getElementById("feedback-status").textContent =
              "Failed to save feedback: " + err.message;
          }
        });
      });
    })();
  </script>
{% endblock %}