{% extends "pobsync_backend/base.html" %}

{% block title %}Snapshots | pobsync{% endblock %}

{% block content %}
  <header class="page-header">
    <div class="page-title">
      <div class="page-kicker">Snapshots</div>
      <h1>Snapshots</h1>
      <div class="page-subtitle">Browse discovered scheduled, manual, and incomplete snapshots across all hosts.</div>
    </div>
    <section class="actions" aria-label="Snapshot list actions">
      <a class="button-link secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
    </section>
  </header>

  <section class="panel">
    <h2>Filters</h2>
    <form method="get" class="filter-form">
      <div class="field">
        <label for="host">Host</label>
        <select id="host" name="host">
          <option value="">All hosts</option>
          {% for host in hosts %}
            <option value="{{ host.host }}" {% if selected_host == host.host %}selected{% endif %}>{{ host.host }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="kind">Kind</label>
        <select id="kind" name="kind">
          <option value="">All kinds</option>
          {% for value, label in kinds %}
            <option value="{{ value }}" {% if selected_kind == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="status">Status</label>
        <select id="status" name="status">
          <option value="">All statuses</option>
          {% for value in statuses %}
            <option value="{{ value }}" {% if selected_status == value %}selected{% endif %}>{{ value }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-actions">
        <button type="submit">Apply filters</button>
        <a class="button-link secondary" href="{% url 'snapshots_list' %}">Clear</a>
      </div>
    </form>
  </section>

  <section class="panel">
    <h2>Snapshot Records</h2>
    <p class="muted">Showing up to 200 of {{ total_count }} snapshot{{ total_count|pluralize }}.</p>
    <table>
      <thead>
        <tr>
          <th>Snapshot</th>
          <th>Host</th>
          <th>Kind</th>
          <th>Status</th>
          <th>Started</th>
          <th>Ended</th>
          <th>Base</th>
          <th>Path</th>
        </tr>
      </thead>
      <tbody>
        {% for snapshot in snapshots %}
          <tr>
            <td><a href="{% url 'snapshot_detail' snapshot.id %}">{{ snapshot.dirname }}</a></td>
            <td><a href="{% url 'host_detail' snapshot.host.host %}">{{ snapshot.host.host }}</a></td>
            <td>{{ snapshot.kind }}</td>
            <td>{% if snapshot.status %}<span class="status {{ snapshot.status }}">{{ snapshot.status }}</span>{% else %}<span class="muted">unknown</span>{% endif %}</td>
            <td>{{ snapshot.started_at|default:"" }}</td>
            <td>{{ snapshot.ended_at|default:"" }}</td>
            <td>
              {% if snapshot.base %}
                <a href="{% url 'snapshot_detail' snapshot.base.id %}">{{ snapshot.base.dirname }}</a>
              {% elif snapshot.base_dirname %}
                <span class="muted">{{ snapshot.base_dirname }}</span>
              {% else %}
                <span class="muted">none</span>
              {% endif %}
            </td>
            <td class="muted">{{ snapshot.path }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="8" class="muted">No snapshots matched the current filter.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
{% endblock %}