{% extends "base.html" %}
{% block content %}
<div style="max-width: 1280px; margin: 0 auto; padding: 1rem 0;">
  <div style="margin-bottom: 1rem;">
    <a href="/days/{{ day }}">&larr; {{ day }}</a>
  </div>
  {% if total == 0 %}
  <p>No snapshots found for {{ day }}.</p>
  {% else %}
  <div style="text-align: center;">
    <div style="margin-bottom: 0.5rem; color: #666; font-size: 0.9rem;">
      <span id="snap-counter">{{ n + 1 }} / {{ total }}</span><span id="snap-label">{% if labels[n] %} &mdash; {{ labels[n] }}{% endif %}</span>
    </div>
    <img
      id="snap-img"
      src="{{ img_base_url }}/{{ n }}"
      alt="Snapshot {{ n + 1 }} of {{ total }}"
      style="max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border: 1px solid #ccc;"
    >
    <div style="margin-top: 1rem; display: flex; justify-content: center; gap: 3rem; font-size: 1rem; align-items: center;">
      <a href="#" id="snap-prev" onclick="goTo(currentN - 1); return false;">&larr; Prev</a>
      <button id="pause-btn" onclick="togglePause()" style="font-size: 1rem; cursor: pointer; padding: 0.2rem 0.8rem;">Pause</button>
      <a href="#" id="snap-next" onclick="goTo(currentN + 1); return false;">Next &rarr;</a>
    </div>
    <div style="margin-top: 0.75rem;">
      <a id="open-tab-link" href="{{ img_base_url }}/{{ n }}" target="_blank" rel="noopener" style="font-size: 0.9rem;">Open in new tab</a>
    </div>
  </div>
  <script>
    const SLIDE_INTERVAL_MS = 2000;
    const total      = {{ total }};
    const imgBaseUrl = {{ img_base_url | tojson }};
    const labels     = {{ labels | tojson }};
    let currentN     = {{ n }};
    let intervalId   = setInterval(() => goTo(currentN + 1), SLIDE_INTERVAL_MS);

    const imgEl     = document.getElementById("snap-img");
    const counterEl = document.getElementById("snap-counter");
    const labelEl   = document.getElementById("snap-label");
    const openTabEl = document.getElementById("open-tab-link");
    const pauseBtn  = document.getElementById("pause-btn");

    function goTo(n) {
      currentN = ((n % total) + total) % total;
      imgEl.src = imgBaseUrl + "/" + currentN;
      imgEl.alt = "Snapshot " + (currentN + 1) + " of " + total;
      counterEl.textContent = (currentN + 1) + " / " + total;
      const lbl = labels[currentN];
      labelEl.innerHTML = lbl ? " — " + lbl : "";
      openTabEl.href = imgBaseUrl + "/" + currentN;
      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = setInterval(() => goTo(currentN + 1), SLIDE_INTERVAL_MS);
      }
    }

    function togglePause() {
      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = null;
        pauseBtn.textContent = "Play";
      } else {
        intervalId = setInterval(() => goTo(currentN + 1), SLIDE_INTERVAL_MS);
        pauseBtn.textContent = "Pause";
      }
    }
  </script>
  {% endif %}
</div>
{% endblock %}