{% extends "base.html" %}
{% block title %}Backup Manager — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗄️ Backup Manager</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card">
    <p style="font-size:13px; color:#566573; margin-top:0;">
      Creates an immediate backup of the current database.
    </p>
    <button class="btn-save" onclick="createBackup()">💾 Backup Now</button>
  </div>

  <div class="card">
    <div class="section-title">Existing Backups</div>
    {% if not backups %}
      <p style="font-size:13px; color:#566573;">No backups yet.</p>
    {% endif %}
    <table>
      <tr><th>File</th><th>Date</th><th>Size</th></tr>
      {% for b in backups %}
      <tr><td data-label="File">{{ b.filename }}</td><td data-label="Date">{{ b.date_str }}</td><td data-label="Size">{{ b.size_kb }} KB</td></tr>
      {% endfor %}
    </table>
  </div>

  <div class="card" style="background:#fef9e7;">
    <p style="font-size:13px; color:#7d6608; margin:0;">
      Restoring a backup isn't available here — it overwrites the live database for every
      account, and doing that from a phone with other accounts potentially active carries more
      risk than it does from the desktop app. Use the desktop app's Backup &amp; Restore Manager
      if you need to restore.
    </p>
  </div>
</main>

<script>
function showMsg(text, isError) {
  document.getElementById('msgBox').innerHTML = `<div class="msg ${isError ? 'msg-error' : 'msg-success'}">${text}</div>`;
}

function createBackup() {
  fetch('/api/backup/create', { method: 'POST' })
    .then(r => r.json())
    .then(d => {
      if (d.ok) {
        showMsg('✅ Backup created.', false);
        setTimeout(() => location.reload(), 900);
      } else {
        showMsg(d.error || 'Could not create backup.', true);
      }
    });
}
</script>
{% endblock %}