{% extends "base.html" %}
{% block title %}Copias de Seguridad{% endblock %}
{% block page_title %}Copias de Seguridad{% endblock %}

{% block topbar_actions %}
<form method="post" action="{{ url_for('backup.crear') }}" class="d-inline">
  <button type="submit" class="btn btn-primary btn-sm">
    <i class="bi bi-cloud-download me-1"></i>Crear backup ahora
  </button>
</form>
{% endblock %}

{% block content %}

<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="p-2 rounded-3" style="background:#e0f2fe">
            <i class="bi bi-shield-check" style="color:#0284c7;font-size:1.4rem"></i>
          </div>
          <div>
            <div class="fw-bold">Backup automático</div>
            <div class="text-muted small">Al iniciar la app</div>
          </div>
        </div>
        <p class="text-muted small mb-0">
          Cada vez que abres ContaApp se crea automáticamente una copia de seguridad.
          Se conservan las últimas <strong>{{ max_backups }}</strong> copias.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="p-2 rounded-3" style="background:#dcfce7">
            <i class="bi bi-file-zip" style="color:#16a34a;font-size:1.4rem"></i>
          </div>
          <div>
            <div class="fw-bold">{{ backups|length }} copias guardadas</div>
            <div class="text-muted small">En carpeta /backups local</div>
          </div>
        </div>
        <p class="text-muted small mb-0">
          Cada backup incluye todas las bases de datos de empresa en un único archivo ZIP.
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="p-2 rounded-3" style="background:#fef3c7">
            <i class="bi bi-arrow-counterclockwise" style="color:#d97706;font-size:1.4rem"></i>
          </div>
          <div>
            <div class="fw-bold">Restaurar backup</div>
            <div class="text-muted small">Subir archivo ZIP</div>
          </div>
        </div>
        <form method="post" action="{{ url_for('backup.restaurar') }}"
              enctype="multipart/form-data"
              onsubmit="return confirm('¿Restaurar este backup? Se sobreescribirán los datos actuales. Esta acción no se puede deshacer.')">
          <input type="file" name="archivo" accept=".zip" class="form-control form-control-sm mb-2" required>
          <button type="submit" class="btn btn-warning btn-sm w-100">
            <i class="bi bi-arrow-counterclockwise me-1"></i>Restaurar
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

{% if backups %}
<div class="card">
  <div class="card-header"><i class="bi bi-archive me-2"></i>Historial de backups</div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Nombre</th>
          <th class="text-center">Fecha</th>
          <th class="text-end">Tamaño</th>
          <th class="text-center">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for b in backups %}
        <tr {% if loop.first %}class="table-success"{% endif %}>
          <td>
            <i class="bi bi-file-zip text-muted me-2"></i>
            <span class="font-monospace small">{{ b.nombre }}</span>
            {% if loop.first %}<span class="badge bg-success ms-2">Más reciente</span>{% endif %}
          </td>
          <td class="text-center text-muted">{{ b.fecha }}</td>
          <td class="text-end text-muted small">{{ b.tamaño }} KB</td>
          <td class="text-center">
            <a href="{{ url_for('backup.descargar', nombre=b.nombre) }}"
               class="btn btn-sm btn-outline-primary" title="Descargar">
              <i class="bi bi-download me-1"></i>Descargar
            </a>
            <form method="post" action="{{ url_for('backup.eliminar', nombre=b.nombre) }}"
                  class="d-inline"
                  onsubmit="return confirm('¿Eliminar este backup?')">
              <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                <i class="bi bi-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="text-center py-5 text-muted">
  <i class="bi bi-cloud-slash" style="font-size:3rem; opacity:.3"></i>
  <p class="mt-3 fs-5">No hay backups aún</p>
  <p class="small">Se creará uno automáticamente la próxima vez que inicies la aplicación,<br>o puedes crear uno manualmente ahora.</p>
</div>
{% endif %}

{% endblock %}