{% extends "django_prometric/base.html" %}
{% load i18n prometric_extras %}

{% block title %}{% translate "Snapshots" %}{% endblock %}
{% block page_title %}{% translate "Snapshots" %}{% endblock %}

{% block content %}
  {% if sources %}
    <section class="pm-card pm-take">
      <header class="pm-card__head"><h2>{% translate "Take a snapshot" %}</h2></header>
      <form method="post" action="{% url 'django_prometric:snapshot-take' %}" data-snapshot-form>
        {% csrf_token %}
        <div class="pm-take__sources">
          {% for source in sources %}
            <div class="pm-source" data-source data-max-days="{{ source.provider.max_period_days|default_if_none:'' }}">
              <label class="pm-check pm-check--source">
                <input type="checkbox" name="providers" value="{{ source.provider.slug }}" checked data-source-pick>
                <span class="pm-source__name">{{ source.provider.verbose_name }}</span>
                <span class="pm-source__kind">{{ source.provider.kind }}</span>
                {% if source.provider.max_period_days %}
                  <span class="pm-source__reach">{% blocktranslate with days=source.provider.max_period_days %}up to {{ days }} days back{% endblocktranslate %}</span>
                {% endif %}
              </label>
              {% if source.provider.max_period_days %}
                <div class="pm-source__limit" data-limit {% if not source.limited %}hidden{% endif %}>
                  <span class="pm-source__warning">
                    {% blocktranslate with name=source.provider.verbose_name days=source.provider.max_period_days %}The selected range is longer than {{ name }} can serve — its window would be shortened to the last {{ days }} days.{% endblocktranslate %}
                  </span>
                  <label class="pm-check pm-check--accept">
                    <input type="checkbox" data-accept>
                    {% translate "That's fine, shorten it" %}
                  </label>
                </div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
        <div class="pm-take__when">
          {% include "django_prometric/_period.html" %}
          <button type="submit" class="pm-btn pm-btn--primary" data-take-submit>{% translate "Save snapshot" %}</button>
        </div>
      </form>
    </section>
  {% else %}
    <div class="pm-notice">
      {% url 'django_prometric:providers' as providers_url %}
      {% blocktranslate %}No data source is configured yet — <a href="{{ providers_url }}">set one up</a> to take snapshots.{% endblocktranslate %}
    </div>
  {% endif %}

  {% if snapshots %}
    <section class="pm-card pm-card--table">
      <div class="pm-table-wrap">
        <table class="pm-table">
          <thead>
            <tr>
              <th class="pm-cell-pick" aria-label="{% translate 'Pick for comparison' %}"></th>
              <th>{% translate "Taken" %}</th>
              <th>{% translate "Window" %}</th>
              <th>{% translate "Sources" %}</th>
              <th>{% translate "Series" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for snapshot in snapshots %}
              <tr>
                <td class="pm-cell-pick">
                  <input type="checkbox" class="pm-pick" data-compare-pick value="{{ snapshot.pk }}"
                         aria-label="{% blocktranslate with pk=snapshot.pk %}Pick snapshot #{{ pk }} for comparison{% endblocktranslate %}">
                </td>
                <td><a href="{% url 'django_prometric:snapshot-detail' snapshot.pk %}">{{ snapshot.taken_at|date:"M j, Y H:i" }}</a></td>
                <td class="pm-methods">
                  {% if snapshot.window_start %}
                    {{ snapshot.window_start|date:"M j" }} – {{ snapshot.window_end|date:"M j, Y" }}
                  {% else %}
                    {{ snapshot.period }}
                  {% endif %}
                </td>
                <td>{% for slug in snapshot.provider_slugs %}<span class="pm-badge">{{ slug }}</span> {% endfor %}</td>
                <td class="pm-methods">#{{ snapshot.parent_id|default:snapshot.pk }}</td>
                <td class="pm-cell-num">
                  <form method="post" action="{% url 'django_prometric:snapshot-take' %}" class="pm-inline-form">
                    {% csrf_token %}
                    <input type="hidden" name="retake" value="{{ snapshot.pk }}">
                    <button type="submit" class="pm-btn">{% translate "Take again" %}</button>
                  </form>
                  <form method="post" action="{% url 'django_prometric:snapshot-delete' snapshot.pk %}"
                        class="pm-inline-form" data-confirm="{% translate 'Delete this snapshot and its retakes?' %}">
                    {% csrf_token %}
                    <button type="submit" class="pm-btn pm-btn--quiet">{% translate "Delete" %}</button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    <div class="pm-compare-bar" data-compare-bar hidden>
      <span data-compare-count></span>
      <a class="pm-btn pm-btn--primary" data-compare-link
         data-url="{% url 'django_prometric:snapshot-compare' %}">{% translate "Compare" %}</a>
    </div>
  {% else %}
    <div class="pm-empty pm-card">
      <p>{% translate "No snapshots yet. Save one to freeze today's numbers, then take it again later to compare." %}</p>
    </div>
  {% endif %}
{% endblock %}