{% extends "base.html" %}
{% from "_macros.html" import pager as pages %}
{% block title %}{{ target }} · snapdelta{% endblock %}
{% block content %}
<nav class="crumbs" aria-label="Breadcrumb"><a href="/snapshots">Snapshots</a></nav>
<div class="title-row">
  <h1>{{ target }}</h1>
  <form class="period" method="get" action="/snapshots/{{ target }}">
    <label class="inline-field">From<input type="datetime-local" name="since" value="{{ period.since_text }}"></label>
    <label class="inline-field">To<input type="datetime-local" name="until" value="{{ period.until_text }}"></label>
    <span class="muted small">UTC</span>
    <button type="submit" class="button">Apply</button>
    {% if period.active %}<a class="button quiet" href="/snapshots/{{ target }}">Clear</a>{% endif %}
  </form>
  <a class="button primary" href="/new?left={{ target }}@latest">Compare</a>
</div>
{% if deleted %}<p class="notice">Deleted {{ deleted }}.</p>{% endif %}
{% if unreadable %}<p class="notice warn">Unreadable: {{ unreadable | join(", ") }}</p>{% endif %}
{% if pager.number == 1 %}<section id="timeline" class="panel timeline-panel" hx-get="/targets/{{ target | urlencode }}/timeline{{ '?' ~ period.query if period.active }}" hx-trigger="load" aria-busy="true"><h2>Timeline</h2><p class="muted">Comparing each snapshot with the one before…</p></section>{% endif %}
<form method="post" action="/snapshots/{{ target }}/delete" data-confirm-selected="references">
<input type="hidden" name="page" value="{{ pager.number }}">
<input type="hidden" name="since" value="{{ period.since_text }}">
<input type="hidden" name="until" value="{{ period.until_text }}">
<table class="list">
  <thead><tr><th class="pick"><input type="checkbox" data-select-all aria-label="Select all on this page"></th><th>Captured</th><th>Label</th><th>Source</th><th>Models</th><th class="num-col">Warnings</th></tr></thead>
  <tbody>
    {% for row in rows %}
    <tr>
      <td class="pick"><input type="checkbox" name="references" value="{{ row.reference }}" aria-label="Select"></td>
      <td><a class="row-link" href="/snapshots/{{ row.reference }}">{{ row.captured_at | when }}</a></td>
      <td>{% if row.label %}<span class="tag label">{{ row.label }}</span>{% endif %}</td>
      <td><span class="tag">{{ row.source }}</span></td>
      <td class="muted">{{ row.loaded | join(", ") }}</td>
      <td class="num-col mono {{ 'warn-text' if row.warnings }}">{{ row.warnings }}</td>
    </tr>
    {% else %}
    <tr><td colspan="6" class="muted">No snapshot in this period.</td></tr>
    {% endfor %}
  </tbody>
</table>
<div class="bulk"><span class="bulk-count"></span><button type="reset" class="button quiet">Clear</button><button type="submit" class="button" formaction="/snapshots/{{ target }}/compare" data-no-confirm>Compare</button><button type="submit" class="button danger">Delete</button></div>
</form>
{{ pages(pager, "/snapshots/" ~ target, extra=period.query) }}
{% endblock %}