{% extends "baseTemplate/index.html" %}
{% load static %}
{# Deliberately separate from the list page: deletion destroys mail. #}

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

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

  <div class="mb-4">
    <h1 class="h4 mb-1">Delete email account</h1>
    <p class="text-muted mb-0 small">
      Removing a mailbox deletes its Maildir and every forwarder pointing at it
      or from it. There is no undo — take a backup first if the mail matters.
    </p>
  </div>

  {% if not domains %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      There are no domains available to you yet.
    </div>
  {% else %}

  <div class="row g-4">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">

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

          <div class="mb-3">
            <label class="form-label" for="cpMailbox">Mailbox</label>
            <select class="form-select" id="cpMailbox" ng-model="selected"
                    ng-options="row.email as row.email for row in emails">
              <option value="">— select a mailbox —</option>
            </select>
            <div class="form-text" ng-show="!busy && !emails.length" ng-cloak>
              This domain has no mailboxes.
            </div>
          </div>

          <button type="button" class="btn btn-danger" ng-click="remove()"
                  ng-disabled="busy || !selected">
            <i class="fas fa-trash me-1"></i>
            <span ng-bind="busy ? 'Deleting…' : 'Delete mailbox'"></span>
          </button>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card h-100 border-danger-subtle">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-triangle-exclamation me-1"></i>What gets removed
          </h2>
          <ul class="small text-muted mb-0">
            <li>The mailbox row Postfix and Dovecot authenticate against.</li>
            <li>The Maildir on disk, including every stored message.</li>
            <li>Every forwarder whose source or destination is this address.</li>
          </ul>
          <hr>
          <p class="small text-muted mb-0">
            Aliases pointing at the address survive and will start bouncing;
            remove them separately on the forwarding page.
          </p>
        </div>
      </div>
    </div>
  </div>

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

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