{% 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;">
      {{ n + 1 }} / {{ total }}{% if label %} &mdash; {{ label }}{% endif %}
    </div>
    <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;">
      {% if prev_n is not none %}
      <a href="{{ base_url }}?n={{ prev_n }}">&larr; Prev</a>
      {% else %}
      <span style="color: #bbb;">&larr; Prev</span>
      {% endif %}
      {% if next_n is not none %}
      <a href="{{ base_url }}?n={{ next_n }}">Next &rarr;</a>
      {% else %}
      <span style="color: #bbb;">Next &rarr;</span>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}