{% extends "cms/base.html" %}
{% block title %}Backups{% endblock %}
{% block page_title %}Backups{% endblock %}

{% block extra_head %}
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
</style>
{% endblock %}

{% block cms_content %}

{% if pending_delete %}
<div id="undoNotice" style="display:flex;align-items:center;gap:.75rem;background:rgba(255,64,75,.07);border:1px solid rgba(255,64,75,.28);border-radius:8px;padding:.65rem 1rem;margin-bottom:1.25rem;font-size:.85rem;color:#c0182a">
  <i class="fa-solid fa-triangle-exclamation" style="flex-shrink:0"></i>
  <span>Backup <strong>{{ pending_display }}</strong> deleted. Permanent in <strong id="undoCountdown">15</strong>s.</span>
  <form method="post" action="{% url 'cms_backup_undo' pending_delete %}" style="margin-left:auto;flex-shrink:0">
    {% csrf_token %}
    <button type="submit" style="background:#ff404b;border:none;color:#fff;border-radius:6px;padding:.3rem .85rem;font-size:.78rem;font-weight:700;cursor:pointer;letter-spacing:.03em">
      <i class="fa-solid fa-rotate-left me-1"></i>Undo
    </button>
  </form>
  <button onclick="dismissUndo()" style="background:none;border:none;color:#c0182a;opacity:.5;cursor:pointer;padding:.1rem .2rem;font-size:.9rem;line-height:1;flex-shrink:0" title="Dismiss">&#x2715;</button>
</div>
<script>
(function(){
  // Drop ?deleted= from the address bar straight away. It is what drives this
  // countdown, so leaving it there restarted the whole thing on every refresh,
  // and a file already purged got counted down again and again.
  try {
    var url = new URL(window.location.href);
    if (url.searchParams.has('deleted')) {
      url.searchParams.delete('deleted');
      window.history.replaceState({}, '', url.pathname + url.search);
    }
  } catch (e) {}

  var secs = 15;
  var el = document.getElementById('undoCountdown');
  var purgeUrl = "{% url 'cms_backup_purge' pending_delete %}";
  var csrf = document.querySelector('#undoNotice [name=csrfmiddlewaretoken]').value;
  var timer = setInterval(function(){
    secs--;
    if(el) el.textContent = secs;
    if(secs <= 0){
      clearInterval(timer);
      fetch(purgeUrl, {method:'POST', headers:{'X-CSRFToken': csrf, 'Content-Type':'application/json'}})
        .finally(function(){
          var notice = document.getElementById('undoNotice');
          if(notice) notice.style.display = 'none';
        });
    }
  }, 1000);
  window.dismissUndo = function(){
    clearInterval(timer);
    fetch(purgeUrl, {method:'POST', headers:{'X-CSRFToken': csrf}});
    var notice = document.getElementById('undoNotice');
    if(notice) notice.style.display = 'none';
  };
})();
</script>
{% endif %}

<div class="cms-section-header">
  <h2>Backups <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ backups|length }})</span></h2>
  <form method="post" action="{% url 'cms_backup_create' %}">
    {% csrf_token %}
    <button type="submit" class="btn-cms" onclick="this.disabled=true;this.innerHTML='<i class=\'fa-solid fa-spinner fa-spin me-1\'></i>Creating...';this.form.submit()">
      <i class="fa-solid fa-floppy-disk me-1"></i>Create Backup
    </button>
  </form>
</div>

<div class="row g-3">
  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-head"><i class="fa-solid fa-box-archive me-1"></i>Saved Backups</div>
      {% if backups %}
      <table class="cms-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Size</th>
            <th>Created</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for b in backups %}
          <tr>
            <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600">{{ forloop.counter }}</td>
            <td>
              <div style="font-size:.875rem;font-weight:600;color:var(--cms-text)">{{ b.display }}</div>
              <div style="font-size:.75rem;color:var(--cms-muted)">{{ b.filename }}</div>
            </td>
            <td style="font-size:.85rem;color:var(--cms-muted);white-space:nowrap">{{ b.size_mb }} MB</td>
            <td style="font-size:.82rem;color:var(--cms-muted);white-space:nowrap">{{ b.modified|date:"d M Y H:i" }}</td>
            <td>
              <div style="display:flex;gap:.35rem;align-items:center">
                <a href="{% url 'cms_backup_download' b.filename %}" class="btn-cms" style="padding:.3rem .6rem;font-size:.8rem" title="Download">
                  <i class="fa-solid fa-download"></i>
                </a>
                <a href="{% url 'cms_backup_restore' b.filename %}" class="btn-cms-ghost" style="padding:.3rem .6rem;font-size:.8rem" title="Restore">
                  <i class="fa-solid fa-rotate-left"></i>
                </a>
                <a href="{% url 'cms_backup_delete' b.filename %}" class="btn-cms-danger" style="padding:.3rem .6rem;font-size:.8rem" title="Delete">
                  <i class="fa-solid fa-trash"></i>
                </a>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div style="padding:3rem;text-align:center;color:var(--cms-muted)">
        <i class="fa-solid fa-box-archive" style="font-size:2rem;margin-bottom:.75rem;display:block;opacity:.3"></i>
        No backups yet. Click <strong>Create Backup</strong> to get started.
      </div>
      {% endif %}
    </div>

    <div class="cms-card mt-3" style="padding:0;overflow:hidden">
      <div class="section-head">
        <i class="fa-solid fa-shield-halved me-1"></i>Nightly Encrypted Backup
        <span style="float:right;padding:.05rem .5rem;border-radius:99px;font-size:.66rem;letter-spacing:.04em;color:#fff;background:{% if nightly.status == 'live' %}#166534{% elif nightly.status == 'warn' %}#b45309{% else %}#b91c1c{% endif %}">{{ nightly.label }}</span>
      </div>
      <div style="padding:1rem;display:flex;align-items:flex-start;gap:.9rem">
        <i class="fa-solid fa-database" style="flex-shrink:0;margin-top:.2rem;font-size:1.1rem;color:{% if nightly.status == 'live' %}#166534{% elif nightly.status == 'warn' %}#b45309{% else %}#b91c1c{% endif %}"></i>
        <div style="min-width:0">
          <div style="font-size:.95rem;font-weight:600">{{ nightly.value }}</div>
          <div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ nightly.detail }}</div>
          <div style="font-size:.78rem;color:var(--cms-muted);margin-top:.6rem;line-height:1.6">
            This is not one of the archives above. It runs on the server at 03:00, streams the database straight into AES-256 so no readable copy is ever written to disk, and stores it where the panel cannot reach it. The panel only reads a status line the job writes when it finishes.
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="col-lg-4">
    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-head"><i class="fa-solid fa-circle-info me-1"></i>What is included</div>
      <div style="padding:1rem;font-size:.85rem;color:var(--cms-muted);line-height:1.7">
        <div style="margin-bottom:.5rem"><i class="fa-solid fa-database me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">Database</strong> — full PostgreSQL dump: content, orders, users, tenants, settings</div>
        <div style="margin-bottom:.5rem"><i class="fa-solid fa-code me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">Code</strong> — the whole application, templates and migrations</div>
        <div style="margin-bottom:.5rem"><i class="fa-solid fa-key me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">Environment</strong> — .env and frozen package list, so the install rebuilds exactly</div>
        <div style="margin-bottom:.5rem"><i class="fa-solid fa-images me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">Media files</strong> — all uploaded images and documents</div>
        <div style="margin-bottom:.5rem"><i class="fa-solid fa-file-zipper me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">ZIP format</strong> — single file, easy to download and store</div>
        <div><i class="fa-solid fa-file-code me-2" style="color:var(--cms-accent);width:16px"></i><strong style="color:var(--cms-text)">RESTORE.txt</strong> — restore instructions included inside</div>

      </div>
    </div>

    <div class="cms-card mt-3" style="padding:0;overflow:hidden">
      <div class="section-head"><i class="fa-solid fa-key me-1" style="color:#dc2626"></i>Handle With Care</div>
      <div style="padding:1rem;font-size:.85rem;color:var(--cms-muted);line-height:1.7">
        These archives contain both halves of your security: <strong style="color:#dc2626">.env</strong>, which holds
        <strong style="color:#dc2626">FIELD_ENCRYPTION_KEY</strong>, and the database dump, which holds every credential
        encrypted with that key. Separately each is useless. Together they open Stripe, mail, and every API key you have.
        Treat a downloaded copy like a password. Never put one on a shared or synced drive.
      </div>
    </div>

    <div class="cms-card mt-3" style="padding:0;overflow:hidden">
      <div class="section-head"><i class="fa-solid fa-triangle-exclamation me-1" style="color:#e8b400"></i>Restore Warning</div>
      <div style="padding:1rem;font-size:.85rem;color:var(--cms-muted);line-height:1.7">
        Restoring a backup will <strong style="color:#dc2626">overwrite all current data</strong> including the database and media files. The server will restart automatically. You will be logged out.
      </div>
    </div>
  </div>
</div>
{% endblock %}