{% extends "admin/base_site.html" %}
{% block extrastyle %}{{ block.super }}{% include "backupgram/admin/_assets.html" %}{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">Home</a>
  › <a href="{% url 'admin:backupgram_backupserver_changelist' %}">Backup servers</a>
  › <a href="{% url 'admin:backupgram_dashboard' server.pk %}">{{ server.name }}</a>
  › Restore
</div>
{% endblock %}
{% block content %}
<div class="bg-wrap">

  <a class="bg-back" href="{% url 'admin:backupgram_dashboard' server.pk %}">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 19l-7-7 7-7"/><path d="M3 12h18"/></svg>
    Dashboard
  </a>

  <div class="bg-cols">
    {# ── left: available backups ── #}
    {% if backups %}
    <div class="bg-panel">
      <div class="bg-panel-h">
        <span class="bg-panel-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;vertical-align:-1px;margin-right:4px"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg>Available backups
        </span>
        <span class="bg-panel-count">{{ backups|length }}</span>
      </div>
      <div style="padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;">
        {% for b in backups %}
          <button type="button" class="bg-chip" data-fill-file="{{ b.slot }}/{{ b.name }}">{{ b.slot }}/{{ b.name }}</button>
        {% endfor %}
      </div>
      <p class="bg-help" style="padding:0 16px 12px;margin:0">Click a backup to fill the <strong>File</strong> field.</p>
    </div>
    {% endif %}

    {# ── right: restore form ── #}
    <div class="bg-form">
      <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button class="bg-btn primary" type="submit">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
          Start restore
        </button>
      </form>
    </div>
  </div>

</div>
{% endblock %}