{% extends "base.html" %}
{% block content %}
<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-shield-halved"></i> Manual Backup</div>
  </div>
  <div style="padding:4px 0 12px;">
    <p style="color:var(--text2);font-size:13px;margin-bottom:14px;">Manually trigger a backup of all containers</p>
    <button class="btn btn-primary" onclick="runManualBackup()" id="manual-backup-btn">
      <i class="fas fa-play"></i> Run Backup Now
    </button>
  </div>
  <div id="manual-backup-wrapper" style="display:none; margin-top:16px;">
    <div class="card-header" style="margin-bottom:8px;">
      <div class="card-title" style="font-size:13px;"><i class="fas fa-terminal"></i> Backup Log</div>
      <span class="badge" id="manual-backup-badge" style="background:rgba(59,130,246,0.15);color:var(--accent2);">Running…</span>
    </div>
    <div id="manual-backup-log" class="log-console" style="max-height:240px;"></div>
    <div style="color:var(--text3);font-size:11px;margin-top:6px;font-family:var(--mono);" id="manual-backup-elapsed"></div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-database"></i> Available Backups</div>
    <button class="btn btn-ghost btn-sm" onclick="refreshBackupsList()"><i class="fas fa-sync-alt"></i> Refresh</button>
  </div>
  <div class="two-col">
    <div>
      <div class="section-header"><div class="section-title">🖥️ MAIN SERVER</div><span class="card-meta">/root/backups/</span></div>
      <div class="backup-list" id="local-backup-list">
        {% for b in backups %}
        <div class="backup-item"><span class="backup-name">{{ b }}</span><div class="backup-actions"><button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('local','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button><button class="btn btn-ghost btn-sm" onclick="quickRestore('local','{{ b }}')">↩ Restore</button><button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('local','{{ b }}',this)"><i class="fas fa-trash"></i></button></div></div>
        {% else %}<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>{% endfor %}
      </div>
    </div>
    <div>
      <div class="section-header"><div class="section-title">💾 VM SERVER</div><span class="card-meta">/backups/main-server/</span></div>
      <div class="backup-list" id="vm-backup-list">
        {% for b in vm_backups %}
        <div class="backup-item"><span class="backup-name">{{ b }}</span><div class="backup-actions"><button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('vm','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button><button class="btn btn-ghost btn-sm" onclick="quickRestore('vm','{{ b }}')">↩ Restore</button><button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('vm','{{ b }}',this)"><i class="fas fa-trash"></i></button></div></div>
        {% else %}<div class="empty-state"><i class="fas fa-inbox"></i>No VM backups</div>{% endfor %}
      </div>
    </div>
  </div>
</div>

<div id="audit-modal" class="modal-overlay" style="display:none;" onclick="closeAuditModal(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title"><i class="fas fa-shield-halved" style="color:var(--cyan);"></i> Backup Health Audit</div>
      <button class="modal-close" onclick="closeAuditModal()" title="Close">✕</button>
    </div>
    <div id="audit-modal-content"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Running audit…</div></div>
  </div>
</div>

<div class="card" style="margin-top:0;">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-clock-rotate-left"></i> Backup History</div>
    <button class="btn btn-ghost btn-sm" onclick="loadBackupLog()"><i class="fas fa-sync-alt"></i> Refresh</button>
  </div>
  <div id="backup-history-list"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></div>
</div>
{% endblock %}