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

{# Database list. Angular interpolation is {$ … $}; Django keeps {{ … }}. #}

{% block title %}Databases{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">Databases</h1>
      <p class="cp-page-head__sub">
        MariaDB schemas across the sites you manage. Sizes come straight from the
        server, so an empty database really is empty.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/databases/importExport">
        <i class="fa-solid fa-file-zipper" aria-hidden="true"></i> Import / Export
      </a>
      {% if currentACL.admin %}
      <a class="cp-btn cp-btn--ghost" href="/databases/mysqlManager">
        <i class="fa-solid fa-server" aria-hidden="true"></i> MySQL Manager
      </a>
      {% endif %}
      {% if currentACL.admin or currentACL.createDatabase %}
      <a class="cp-btn cp-btn--primary" href="/databases/createDatabase">
        <i class="fa-solid fa-plus" aria-hidden="true"></i> New database
      </a>
      {% endif %}
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Filter</h2>
        <p class="cp-card__sub">Pick a website, or list every database you can see.</p>
      </div>
    </div>
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div class="cp-field">
          <label class="cp-label" for="siteFilter">Website</label>
          <select class="cp-select" id="siteFilter"
                  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 class="cp-field">
          <label class="cp-label" for="dbSearch">Search</label>
          <input class="cp-input" id="dbSearch" type="search"
                 ng-model="search" placeholder="name, user or site">
        </div>
      </div>

      <p class="cp-help" ng-if="quota.limit">
        <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
        This site uses <strong ng-bind="quota.used"></strong> of
        <strong ng-bind="quota.limit"></strong> databases allowed by its package.
      </p>
      <p class="cp-help" ng-if="quota.limit === 0 && selectedSite !== 'all'">
        <i class="fa-solid fa-infinity" aria-hidden="true"></i>
        This site's package does not limit the number of databases.
      </p>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">
          <span ng-bind="filtered().length"></span> database<span ng-if="filtered().length !== 1">s</span>
        </h2>
        <p class="cp-card__sub">
          Total size on disk: <span ng-bind="totalSize"></span> MB
        </p>
      </div>
      <div class="cp-page-head__actions">
        <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                ng-click="fetch()" ng-disabled="busy">
          <i class="fa-solid fa-rotate" aria-hidden="true"></i> Refresh
        </button>
      </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 databases…
      </div>

      <div class="cp-empty" ng-if="!busy && !filtered().length">
        <p>No databases here yet.</p>
        {% if currentACL.admin or currentACL.createDatabase %}
        <a class="cp-btn cp-btn--primary cp-btn--sm" href="/databases/createDatabase">
          Create the first one
        </a>
        {% endif %}
      </div>

      <div class="cp-table-wrap" ng-if="!busy && filtered().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">Remote access</th>
              <th scope="col">Created</th>
              <th scope="col" class="cp-table__actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="db in filtered()">
              <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>
                <span class="cp-badge cp-badge--warning" ng-if="db.remoteEnabled">
                  <i class="fa-solid fa-globe" aria-hidden="true"></i>
                  <span ng-repeat="entry in db.remote">{$ entry.host $}{$ $last ? '' : ', ' $}</span>
                </span>
                <span class="cp-badge" ng-if="!db.remoteEnabled">localhost only</span>
              </td>
              <td class="cp-nowrap cp-faint" ng-bind="db.dateCreated"></td>
              <td class="cp-table__actions">
                {% if currentACL.admin or currentACL.createDatabase or currentACL.deleteDatabase %}
                <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                        ng-click="openPassword(db)" title="Change password">
                  <i class="fa-solid fa-key" aria-hidden="true"></i>
                </button>
                <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                        ng-click="openRemote(db)" title="Remote access">
                  <i class="fa-solid fa-globe" aria-hidden="true"></i>
                </button>
                {% endif %}
                {% if currentACL.admin or currentACL.deleteDatabase %}
                <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                        ng-click="remove(db)" title="Delete database">
                  <i class="fa-solid fa-trash" aria-hidden="true"></i>
                </button>
                {% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- change password ------------------------------------------------- -->
  <div class="modal fade" id="dbPasswordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Change database password</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="cp-muted">
            New password for <strong class="cp-mono" ng-bind="active.dbUser"></strong>.
            Every host entry of this account is updated, including any remote grant.
          </p>
          <div class="cp-field">
            <label class="cp-label" for="newDbPassword">New password</label>
            <div class="cp-input-group">
              <input class="cp-input" id="newDbPassword" type="text"
                     ng-model="passwordForm.password" autocomplete="off">
              <button type="button" class="cp-input-group__addon cp-pointer"
                      ng-click="passwordForm.password = generate()">
                <i class="fa-solid fa-dice" aria-hidden="true"></i> Generate
              </button>
            </div>
            <p class="cp-help">At least 8 characters. Copy it now — it is never shown again.</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="cp-btn cp-btn--ghost" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="cp-btn cp-btn--primary"
                  ng-click="savePassword()" ng-disabled="busy">Change password</button>
        </div>
      </div>
    </div>
  </div>

  <!-- remote access ---------------------------------------------------- -->
  <div class="modal fade" id="dbRemoteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Remote access</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="cp-alert cp-alert--warning">
            <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
            <p>
              Granting remote access exposes
              <strong class="cp-mono" ng-bind="active.dbName"></strong>
              to connections from outside this server. Only add a host an
              external application actually needs, and prefer a single address
              or a narrow wildcard over “anywhere”. Every change here is
              recorded in the audit log.
            </p>
          </div>

          <p class="cp-label mb-2">Allowed hosts</p>
          <div class="cp-table-wrap mb-3" ng-if="active.remote.length">
            <table class="cp-table">
              <thead>
                <tr>
                  <th scope="col">Host</th>
                  <th scope="col">Privileges</th>
                  <th scope="col" class="cp-table__actions">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="entry in active.remote">
                  <td class="cp-mono">{$ entry.host $}</td>
                  <td>{$ entry.privileges $}</td>
                  <td class="cp-table__actions">
                    <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                            ng-click="removeRemote(entry)" title="Revoke this host">
                      <i class="fa-solid fa-trash" aria-hidden="true"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="cp-help" ng-if="!active.remote.length">No remote host is allowed in yet.</p>

          <hr>

          <p class="cp-label mb-2">Add a host</p>
          <div class="cp-field">
            <label class="cp-label" for="remoteHost">Host</label>
            <input class="cp-input" id="remoteHost" type="text"
                   ng-model="remoteForm.host" placeholder="%, 203.0.113.10, 10.0.%, or app.example.com">
            <p class="cp-help">
              <span class="cp-mono">%</span> for anywhere, a literal IP address, a
              wildcard such as <span class="cp-mono">10.0.%</span>, or a hostname.
            </p>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="remotePassword">Password for the remote account</label>
            <div class="cp-input-group">
              <input class="cp-input" id="remotePassword" type="text"
                     ng-model="remoteForm.password" autocomplete="off">
              <button type="button" class="cp-input-group__addon cp-pointer"
                      ng-click="remoteForm.password = generate()">
                <i class="fa-solid fa-dice" aria-hidden="true"></i> Generate
              </button>
            </div>
            <p class="cp-help">
              The remote grant is a separate MariaDB account
              (<span class="cp-mono" ng-bind="active.dbUser"></span>@host), so it gets
              its own password. CloudPanel never stores it.
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="cp-btn cp-btn--ghost" data-bs-dismiss="modal">Close</button>
          <button type="button" class="cp-btn cp-btn--warning"
                  ng-click="addRemote()" ng-disabled="busy">
            Grant access
          </button>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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