{% extends "baseTemplate/index.html" %}
{% load static %}

{# Import a .sql/.sql.gz dump into an owned database, or export one as a #}
{# gzip download. See databases.views.importExport / submitDatabaseImport / #}
{# getDatabaseImportStatus / exportDatabase. #}

{% block title %}Import / Export{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-file-zipper" aria-hidden="true"></i> Import / Export</h1>
      <p class="cp-page-head__sub">
        Load a <span class="cp-mono">.sql</span> or <span class="cp-mono">.sql.gz</span> dump
        into one of your databases, or download a fresh gzip export of one.
      </p>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Website &amp; database</h2>
        <p class="cp-card__sub">Both actions below act on the database picked here.</p>
      </div>
    </div>
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div class="cp-field">
          <label class="cp-label" for="ieSite">Website</label>
          <select class="cp-select" id="ieSite" ng-model="selectedSite" ng-change="loadDatabases()">
            <option value="">Select a website…</option>
            {% for site in websites %}
            <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="cp-field">
          <label class="cp-label" for="ieDb">Database</label>
          <select class="cp-select" id="ieDb" ng-model="selectedDb"
                  ng-disabled="!databases.length"
                  ng-options="db.dbName as (db.dbName + ' (' + db.sizeText + ')') for db in databases">
            <option value="">{$ databases.length ? 'Select a database…' : 'No databases on this site' $}</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-lg-6">
      <div class="cp-card h-100">
        <div class="cp-card__head">
          <div>
            <h2 class="cp-card__title"><i class="fa-solid fa-upload" aria-hidden="true"></i> Import</h2>
            <p class="cp-card__sub">Up to {{ maxImportMB }} MB, plain or gzip-compressed.</p>
          </div>
        </div>
        <div class="cp-card__body">
          <div class="cp-alert cp-alert--warning">
            <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
            <p>The import replays every statement in the file against the selected
              database. It does not empty the database first, so a dump that
              re-creates tables the database already has will fail on the
              collision unless the file itself drops them first.</p>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="ieFile">Dump file</label>
            <input class="cp-input" id="ieFile" type="file" accept=".sql,.gz"
                   db-file-picked="pickFile(file)">
          </div>
          <p class="cp-help" ng-if="importFile">
            <i class="fa-solid fa-file" aria-hidden="true"></i>
            {$ importFile.name $} ({$ importFile.size | cpBytes $})
          </p>

          <button type="button" class="cp-btn cp-btn--primary"
                  ng-click="startImport()"
                  ng-disabled="!selectedSite || !selectedDb || !importFile || importJob.running">
            <i class="fa-solid fa-upload" aria-hidden="true"></i> Start import
          </button>

          <div class="mt-3" ng-if="importJob.started" ng-cloak>
            <div cp-progress="importJob.progress"></div>
            <p class="cp-help mt-2"
               ng-style="{color: importJob.failed ? 'var(--cp-danger)' : ''}"
               ng-bind="importJob.statusText"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="cp-card h-100">
        <div class="cp-card__head">
          <div>
            <h2 class="cp-card__title"><i class="fa-solid fa-download" aria-hidden="true"></i> Export</h2>
            <p class="cp-card__sub">A fresh <span class="cp-mono">mysqldump</span>, gzip-compressed.</p>
          </div>
        </div>
        <div class="cp-card__body">
          <p class="cp-help">
            The dump is generated on the server, streamed to your browser, then
            deleted from the server &mdash; nothing is kept behind after the
            download finishes.
          </p>
          <button type="button" class="cp-btn cp-btn--primary"
                  ng-click="startExport()" ng-disabled="!selectedSite || !selectedDb">
            <i class="fa-solid fa-download" aria-hidden="true"></i> Export &amp; download
          </button>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_DB_IMPORT = {
    maxImportMB: {{ maxImportMB }}
  };
</script>
<script src="{% static 'databases/databases.js' %}"></script>
{% endblock %}