{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Browse what is actually stored at each destination. The listing is filtered
   server-side to the domains the caller owns, so a shared backup directory
   never leaks the tenant list through file names. {% endcomment %}

{% block title %}Remote backups{% endblock %}

{% block content %}
<div ng-controller="remoteBackupsController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Remote backups</h1>
      <p class="text-muted mb-0 small">
        What is really stored at a destination right now — read from the
        destination itself, not from the panel's own records.
      </p>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="/backup/restoreSite">
      <i class="fas fa-rotate-left me-1"></i> Restore a site
    </a>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-5">
          <label class="form-label" for="cpRemoteDest">Destination</label>
          <select class="form-select" id="cpRemoteDest" ng-model="form.destinationId"
                  ng-change="load()"
                  ng-options="d.id as (d.name + ' — ' + d.typeLabel) for d in destinations">
            <option value="">Choose a destination…</option>
          </select>
        </div>
        <div class="col-md-5">
          <label class="form-label" for="cpRemoteSite">Only this site (optional)</label>
          <select class="form-select" id="cpRemoteSite" ng-model="form.domain" ng-change="load()"
                  ng-options="site for site in sites">
            <option value="">All sites I can see</option>
          </select>
        </div>
        <div class="col-md-2">
          <button class="btn btn-outline-primary w-100" ng-click="load()"
                  ng-disabled="loading || !form.destinationId">
            <i class="fas fa-rotate me-1"></i>
            <span ng-bind="loading ? '…' : 'List'"></span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-circle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="card" ng-show="loaded" ng-cloak>
    <div class="card-body">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <h2 class="h6 mb-0">
          <span ng-bind="archives.length"></span> archive(s)
          at <span ng-bind="destinationName"></span>
        </h2>
        <span class="text-muted small" ng-bind="'Total ' + humanSize(totalSize())"></span>
      </div>

      <p class="text-muted small mb-0" ng-show="!archives.length">
        Nothing is stored here for the sites you can see. If you expected
        archives, check that the backup schedule is actually running on the
        <a href="/backup/scheduleBackup">schedules page</a>.
      </p>

      <div class="table-responsive" ng-show="archives.length">
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Archive</th>
              <th scope="col">Site</th>
              <th scope="col">Size</th>
              <th scope="col">Written</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="a in archives">
              <td class="text-break"><code ng-bind="a.name"></code></td>
              <td ng-bind="a.domain"></td>
              <td ng-bind="humanSize(a.size)"></td>
              <td class="text-muted" ng-bind="a.modified"></td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group">
                  <a class="btn btn-outline-secondary" href="/backup/restoreSite"
                     title="Open the restore page">
                    <i class="fas fa-rotate-left"></i>
                  </a>
                  <button type="button" class="btn btn-outline-secondary" ng-click="download(a)"
                          title="Download this archive">
                    <i class="fas fa-download"></i>
                  </button>
                  <button type="button" class="btn btn-outline-danger" ng-click="remove(a)"
                          title="Delete this archive">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="form-text mb-0 mt-3" ng-show="filtered">
        Only archives belonging to sites you own are listed.
      </p>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ websites|json_script:"cp-backup-sites" }}
{{ destinations|json_script:"cp-backup-destinations" }}
<script src="{% static 'backupManager/backupManager.js' %}"></script>
{% endblock %}