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

{% block extra_head %}
<style>
  .field-label {
    width:140px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-td { padding:.5rem 1rem .5rem 0;font-size:.875rem;color:var(--cms-text); }
  .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 %}
<div class="cms-section-header">
  <div>
    <h2>Restore Backup</h2>
    <div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ display }}</div>
  </div>
  <a href="{% url 'cms_backup' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post" novalidate>
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">
    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><i class="fa-solid fa-rotate-left me-2" style="color:#e8b400"></i>Backup Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Name</td>
            <td class="field-td" style="font-weight:600">{{ display }}</td>
          </tr>
          {% if manifest.created %}
          <tr>
            <td class="field-label">Created</td>
            <td class="field-td">{{ manifest.created }}</td>
          </tr>
          {% endif %}
          {% if manifest.cms_version %}
          <tr>
            <td class="field-label">CMS Version</td>
            <td class="field-td">v{{ manifest.cms_version }}</td>
          </tr>
          {% endif %}
          {% if manifest.django_version %}
          <tr>
            <td class="field-label">Django</td>
            <td class="field-td">{{ manifest.django_version }}</td>
          </tr>
          {% endif %}
          <tr>
            <td class="field-label">Includes Media</td>
            <td class="field-td">
              {% if manifest.includes_media %}
              <span style="color:#16a34a"><i class="fa-solid fa-circle-check me-1"></i>Yes</span>
              {% else %}
              <span style="color:var(--cms-muted)">No</span>
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:1rem;border-color:#fca5a5;background:#fff8f8">
      <div style="font-size:.85rem;color:#991b1b;font-weight:600;margin-bottom:.5rem">
        <i class="fa-solid fa-triangle-exclamation me-1"></i>This will overwrite all current data
      </div>
      <div style="font-size:.82rem;color:#7f1d1d;line-height:1.6">
        Restoring will replace the live database and all media files with the contents of this backup. The server will restart automatically and you will be logged out. This action cannot be undone.
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="cms-card" style="padding:1rem;margin-bottom:1rem">
      <label style="display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:var(--cms-text);cursor:pointer;margin-bottom:1rem">
        <input type="checkbox" name="safety_backup" checked style="margin-top:.2rem;flex-shrink:0">
        <span>Create a safety backup of current data before restoring</span>
      </label>
      <button type="submit" class="btn-cms w-100" style="background:#dc2626;border-color:#dc2626">
        <i class="fa-solid fa-rotate-left me-1"></i>Yes, Restore
      </button>
    </div>
    <div style="text-align:center;padding:.25rem 0">
      <a href="{% url 'cms_backup' %}" style="font-size:.85rem;color:var(--cms-muted);text-decoration:none">Cancel</a>
    </div>
  </div>

</div>
</form>
{% endblock %}