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

{# Creation form. The prefix is shown live so the final name is never a surprise. #}

{% block title %}Create database{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">Create a database</h1>
      <p class="cp-page-head__sub">
        Every database belongs to one website. The site's system user becomes the
        name prefix, which is what keeps names unique across customers.
      </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>

  {% if not websites %}
  <div class="cp-alert cp-alert--info">
    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
    <p>You have no websites yet. Create a website first — a database needs an owner.</p>
  </div>
  {% else %}

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">New database</h2>
        <p class="cp-card__sub">
          Names may use letters, digits and underscores, up to
          {{ maxIdentifier }} characters including the prefix.
        </p>
      </div>
    </div>

    <div class="cp-card__body">
      <form ng-submit="submit()" novalidate>
        <div class="cp-form-grid">

          <div class="cp-field">
            <label class="cp-label" for="dbSite">Website</label>
            <select class="cp-select" id="dbSite" ng-model="form.website" ng-change="loadQuota()">
              {% for site in websites %}
              <option value="{{ site }}">{{ site }}</option>
              {% endfor %}
            </select>
            <p class="cp-help" ng-if="quota.limit">
              Using <strong ng-bind="quota.used"></strong> of
              <strong ng-bind="quota.limit"></strong> databases allowed by this package.
            </p>
            <p class="cp-help" ng-if="quota.limit === 0">
              This package does not limit the number of databases.
            </p>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="dbName">Database name</label>
            <input class="cp-input cp-mono" id="dbName" type="text"
                   ng-model="form.dbName" ng-change="syncUser()"
                   placeholder="shop" maxlength="20" autocomplete="off" required>
            <p class="cp-help">
              Will be created as
              <strong class="cp-mono" ng-bind="preview(form.dbName)"></strong>
            </p>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="dbUser">Database user</label>
            <input class="cp-input cp-mono" id="dbUser" type="text"
                   ng-model="form.dbUsername" ng-change="userTouched = true"
                   placeholder="shop" maxlength="20" autocomplete="off" required>
            <p class="cp-help">
              Will be created as
              <strong class="cp-mono" ng-bind="preview(form.dbUsername)"></strong>,
              granted all privileges on this database from localhost only.
            </p>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="dbPassword">Password</label>
            <div class="cp-input-group">
              <input class="cp-input" id="dbPassword" type="text"
                     ng-model="form.dbPassword" autocomplete="off" required>
              <button type="button" class="cp-input-group__addon cp-pointer"
                      ng-click="form.dbPassword = generate()">
                <i class="fa-solid fa-dice" aria-hidden="true"></i> Generate
              </button>
            </div>
            <p class="cp-help">
              At least {{ minPassword }} characters. CloudPanel does not store it —
              copy it into your application's configuration now.
            </p>
          </div>

        </div>

        <div class="cp-alert cp-alert--danger" ng-if="error">
          <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
          <p ng-bind="error"></p>
        </div>

        <div class="cp-card__foot">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
            <i class="fa-solid fa-database" aria-hidden="true"></i>
            <span ng-bind="busy ? 'Creating…' : 'Create database'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="cp-card" ng-if="created">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Connection details</h2>
        <p class="cp-card__sub">Shown once. The password is not recoverable afterwards.</p>
      </div>
    </div>
    <div class="cp-card__body">
      <div class="cp-table-wrap">
        <table class="cp-table cp-table--compact">
          <tbody>
            <tr><th scope="row">Host</th><td class="cp-mono">localhost</td></tr>
            <tr><th scope="row">Database</th><td class="cp-mono" ng-bind="created.dbName"></td></tr>
            <tr><th scope="row">User</th><td class="cp-mono" ng-bind="created.dbUser"></td></tr>
            <tr><th scope="row">Password</th><td class="cp-mono" ng-bind="created.dbPassword"></td></tr>
          </tbody>
        </table>
      </div>
      <div class="cp-card__foot">
        <a class="cp-btn cp-btn--ghost" href="/databases/listDBs">Go to the database list</a>
      </div>
    </div>
  </div>

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

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