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

{% block title %}Delete DNS Zone{% endblock %}

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

  <ul class="cp-breadcrumb">
    <li>DNS</li>
    <li>Delete Zone</li>
  </ul>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-trash"></i> Delete DNS Zone</h1>
      <p class="cp-page-head__sub">Removes a zone and every record inside it from PowerDNS.</p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/dns/listZones"><i class="fa-solid fa-list"></i> All zones</a>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p>
      Deleting a zone is immediate and cannot be undone. Mail, websites and certificates that
      depend on its records will stop resolving as soon as caches expire.
    </p>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-globe"></i> Select a zone</h2>
      <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="refresh()"
              ng-disabled="busy">
        <i class="fa-solid fa-rotate" ng-class="{'fa-spin': busy}"></i> Refresh
      </button>
    </div>

    <div class="cp-card__body">
      <div class="cp-field">
        <label class="cp-label" for="zonePicker">Zone</label>
        <select id="zonePicker" class="cp-select" ng-model="selected"
                ng-options="zone.name for zone in zones track by zone.name"
                ng-change="loadPreview()">
          <option value="">-- choose a zone --</option>
        </select>
        <p class="cp-help" ng-if="!zones.length && !busy">
          You have no DNS zones to delete.
        </p>
      </div>

      <div ng-if="selected">
        <div class="cp-table-wrap">
          <table class="cp-table cp-table--compact">
            <tbody>
              <tr><th scope="row">Zone</th><td class="cp-mono" ng-bind="selected.name"></td></tr>
              <tr><th scope="row">Type</th><td ng-bind="selected.type"></td></tr>
              <tr><th scope="row">Owner</th><td ng-bind="selected.owner || 'untracked'"></td></tr>
              <tr><th scope="row">Records</th><td class="cp-mono" ng-bind="selected.records"></td></tr>
              <tr><th scope="row">SOA serial</th><td class="cp-mono" ng-bind="selected.serial"></td></tr>
            </tbody>
          </table>
        </div>

        <div class="cp-field" style="margin-top:16px;">
          <label class="cp-label" for="confirmName">
            Type <span class="cp-mono" ng-bind="selected.name"></span> to confirm
            <span class="cp-req">*</span>
          </label>
          <input id="confirmName" type="text" class="cp-input cp-mono" ng-model="confirmName"
                 autocomplete="off" spellcheck="false" placeholder="{$ selected.name $}">
        </div>

        <button type="button" class="cp-btn cp-btn--danger"
                ng-disabled="busy || confirmName !== selected.name"
                ng-click="deleteZone()">
          <span class="cp-spinner" ng-if="busy"></span>
          <i class="fa-solid fa-trash" ng-if="!busy"></i>
          Delete this zone permanently
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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