{% extends "baseTemplate/index.html" %}
{% load static %}
{# Mailbox creation. Angular interpolation is {$ … $}; Django's {{ }} is untouched. #}

{% block title %}Create email account{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Create email account</h1>
      <p class="text-muted mb-0 small">
        New mailboxes are usable immediately over IMAP, POP3 and SMTP.
      </p>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="/email/listEmails">
      <i class="fas fa-inbox me-1"></i>All mailboxes
    </a>
  </div>

  {% if not domains %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      You do not have any websites yet, so there is no domain to create a mailbox on.
    </div>
  {% else %}

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card">
        <div class="card-body">
          <form novalidate ng-submit="create()">

            <div class="mb-3">
              <label class="form-label" for="cpDomain">Domain</label>
              <select class="form-select" id="cpDomain" ng-model="domain"
                      ng-change="loadUsage()" required>
                {% for entry in domains %}
                  <option value="{{ entry }}">{{ entry }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpLocal">Mailbox name</label>
              <div class="input-group">
                <input type="text" class="form-control" id="cpLocal" ng-model="localPart"
                       autocomplete="off" spellcheck="false" placeholder="sales" required>
                <span class="input-group-text font-monospace">@<span ng-bind="domain"></span></span>
              </div>
              <div class="form-text">
                Letters, digits, dot, dash and underscore only — the name becomes a
                directory on disk.
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpPassword">Password</label>
              <div class="input-group">
                <input type="{$ showPassword ? 'text' : 'password' $}" class="form-control"
                       id="cpPassword" ng-model="password" autocomplete="new-password" required>
                <button class="btn btn-outline-secondary" type="button"
                        ng-click="showPassword = !showPassword"
                        title="Show or hide the password">
                  <i class="fas" ng-class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                </button>
                <button class="btn btn-outline-secondary" type="button" ng-click="suggest()"
                        title="Generate a strong password">
                  <i class="fas fa-wand-magic-sparkles"></i>
                </button>
              </div>
              <div class="form-text">
                At least {{ minPasswordLength }} characters. Stored as a
                <span class="font-monospace">SHA512-CRYPT</span> hash — the panel can
                never show it again, only replace it.
              </div>
            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="busy">
              <i class="fas fa-envelope-circle-check me-1"></i>
              <span ng-bind="busy ? 'Creating…' : 'Create mailbox'"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Package allowance</h2>

          <div ng-show="usageLoaded" ng-cloak>
            <p class="mb-2">
              <span class="display-6" ng-bind="usage.used"></span>
              <span class="text-muted">
                / <span ng-bind="usage.unlimited ? 'unlimited' : usage.quota"></span>
                mailboxes
              </span>
            </p>
            <div class="progress" ng-hide="usage.unlimited" style="height: .5rem;">
              <div class="progress-bar" role="progressbar"
                   ng-style="{ width: usagePercent() + '%' }"
                   ng-class="{ 'bg-danger': usagePercent() >= 100 }"></div>
            </div>
            <p class="text-muted small mt-3 mb-0" ng-show="usage.unlimited">
              This package does not cap the number of mailboxes.
            </p>
            <p class="text-danger small mt-3 mb-0" ng-show="!usage.unlimited && usage.used >= usage.quota">
              <i class="fas fa-triangle-exclamation me-1"></i>
              The allowance is used up. Delete a mailbox or move the site to a larger package.
            </p>
          </div>

          <p class="text-muted small mb-0" ng-hide="usageLoaded" ng-cloak>
            Select a domain to see its allowance.
          </p>
        </div>
      </div>
    </div>
  </div>

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

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