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

{# Deliberately plain: a deletion screen should look like what it is. #}

{% block title %}Delete database{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">Delete a database</h1>
      <p class="cp-page-head__sub">
        Dropping a database removes the schema and its user. There is no undo and
        no trash — restore from a backup is the only way back.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/databases/listDBs">
        <i class="fa-solid fa-list" aria-hidden="true"></i> All databases
      </a>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Choose a website</h2>
      </div>
    </div>
    <div class="cp-card__body">
      <div class="cp-field">
        <label class="cp-label" for="delSite">Website</label>
        <select class="cp-select" id="delSite" ng-model="selectedSite" ng-change="fetch()">
          <option value="all">All of my websites</option>
          {% for site in websites %}
          <option value="{{ site }}">{{ site }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Databases</h2>
        <p class="cp-card__sub">Each deletion is confirmed separately.</p>
      </div>
    </div>
    <div class="cp-card__body cp-card__body--flush">

      <div class="cp-empty" ng-if="busy">
        <span class="cp-spinner" aria-hidden="true"></span> Loading…
      </div>
      <div class="cp-empty" ng-if="!busy && !databases.length">
        <p>Nothing to delete here.</p>
      </div>

      <div class="cp-table-wrap" ng-if="!busy && databases.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Database</th>
              <th scope="col">User</th>
              <th scope="col">Website</th>
              <th scope="col" class="cp-nowrap">Size</th>
              <th scope="col" class="cp-nowrap">Tables</th>
              <th scope="col" class="cp-table__actions">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="db in databases">
              <td class="cp-mono" ng-bind="db.dbName"></td>
              <td class="cp-mono" ng-bind="db.dbUser"></td>
              <td ng-bind="db.website"></td>
              <td class="cp-nowrap" ng-bind="db.sizeText"></td>
              <td class="cp-nowrap">{$ db.tableCount === null || db.tableCount === undefined ? '—' : db.tableCount $}</td>
              <td class="cp-table__actions">
                <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                        ng-click="remove(db)" ng-disabled="busy">
                  <i class="fa-solid fa-trash" aria-hidden="true"></i> Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'databases/databases.js' %}"></script>
{% endblock %}