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

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

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-circle-plus"></i> Create DNS Zone</h1>
      <p class="cp-page-head__sub">
        Adds the zone to PowerDNS and writes the default record set for a hosted domain.
      </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-dash-split">
    <div class="cp-card">
      <div class="cp-card__head">
        <h2 class="cp-card__title"><i class="fa-solid fa-globe"></i> Zone details</h2>
      </div>
      <div class="cp-card__body">
        <form novalidate ng-submit="createZone()">

          <div class="cp-field">
            <label class="cp-label" for="zoneName">Domain name <span class="cp-req">*</span></label>
            <input id="zoneName" type="text" class="cp-input cp-mono" ng-model="form.zoneName"
                   ng-class="{'is-invalid': errors.zoneName}" autocomplete="off" spellcheck="false"
                   placeholder="example.com">
            <p class="cp-help">The zone apex, without <code>www</code> and without a trailing dot.</p>
            <p class="cp-error" ng-if="errors.zoneName" ng-bind="errors.zoneName"></p>
          </div>

          <div class="cp-form-grid">
            <div class="cp-field">
              <label class="cp-label" for="ipAddress">Records point at <span class="cp-req">*</span></label>
              <input id="ipAddress" type="text" class="cp-input cp-mono" ng-model="form.ipAddress"
                     ng-class="{'is-invalid': errors.ipAddress}" autocomplete="off" spellcheck="false">
              <p class="cp-help">IPv4 address used for the A records in the template.</p>
              <p class="cp-error" ng-if="errors.ipAddress" ng-bind="errors.ipAddress"></p>
            </div>

            <div class="cp-field">
              <label class="cp-label" for="zoneType">Zone type</label>
              <select id="zoneType" class="cp-select" ng-model="form.zoneType">
                <option value="NATIVE">Native (this server is authoritative)</option>
                <option value="MASTER">Master (notifies slaves)</option>
              </select>
              <p class="cp-help">Leave this on <strong>Native</strong> unless you run secondaries.</p>
            </div>
          </div>

          {% if canAssignOwner %}
          <div class="cp-field">
            <label class="cp-label" for="owner">Owner</label>
            <select id="owner" class="cp-select" ng-model="form.owner">
              {% for owner in owners %}
              <option value="{{ owner }}">{{ owner }}</option>
              {% endfor %}
            </select>
            <p class="cp-help">
              The panel user allowed to manage this zone. Ownership is tracked separately from
              PowerDNS, so this is the setting that controls access.
            </p>
          </div>
          {% endif %}

          <div class="cp-field">
            <label class="cp-check">
              <input type="checkbox" ng-model="form.defaultRecords">
              <span>Create the default record set</span>
            </label>
            <p class="cp-help">
              Apex and <code>www</code> A records, <code>mail</code>, <code>ftp</code>,
              <code>webmail</code>, autodiscover/autoconfig, the MX, an SPF TXT record, a DMARC
              policy and a CAA record.
            </p>
          </div>

          <div class="cp-field" ng-if="form.defaultRecords">
            <label class="cp-label" for="dkimValue">DKIM public key (optional)</label>
            <textarea id="dkimValue" class="cp-textarea cp-mono" ng-model="form.dkimValue"
                      placeholder="v=DKIM1; k=rsa; p=MIIBIjANBgkqhki..."></textarea>
            <p class="cp-help">
              Published as <code>default._domainkey</code>. Values over 255 characters are split
              into RFC-compliant chunks automatically. Leave blank to add it later from the
              record editor.
            </p>
          </div>

          <div class="cp-btn-group">
            <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
              <span class="cp-spinner" ng-if="busy"></span>
              <i class="fa-solid fa-circle-plus" ng-if="!busy"></i>
              Create zone
            </button>
            <button type="button" class="cp-btn cp-btn--ghost" ng-click="reset()" ng-disabled="busy">
              Reset
            </button>
          </div>
        </form>
      </div>
    </div>

    <div>
      <div class="cp-card">
        <div class="cp-card__head">
          <h2 class="cp-card__title"><i class="fa-solid fa-server"></i> Delegation</h2>
        </div>
        <div class="cp-card__body">
          <p class="cp-muted">
            The zone becomes authoritative on this server immediately, but the internet only
            follows it once the registrar for the domain lists these nameservers:
          </p>
          <table class="cp-table cp-table--compact">
            <tbody>
              <tr><th scope="row">Primary</th><td class="cp-mono">{{ ns1 }}</td></tr>
              <tr><th scope="row">Secondary</th><td class="cp-mono">{{ ns2 }}</td></tr>
              <tr><th scope="row">Server IP</th><td class="cp-mono">{{ serverIP }}</td></tr>
            </tbody>
          </table>
          <div class="cp-alert cp-alert--warning">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <p>
              Glue records for <code>{{ ns1 }}</code> and <code>{{ ns2 }}</code> must be registered
              at the registrar that holds the nameserver domain. CloudPanel cannot do that for you
              &mdash; see <a href="/dns/createNameserver">Create Nameserver</a>.
            </p>
          </div>
        </div>
      </div>

      <div class="cp-card" ng-if="result.zoneName">
        <div class="cp-card__head">
          <h2 class="cp-card__title"><i class="fa-solid fa-circle-check"></i> Zone created</h2>
        </div>
        <div class="cp-card__body">
          <p>
            <span class="cp-mono" ng-bind="result.zoneName"></span> is live on this server.
          </p>
          <div class="cp-alert cp-alert--warning" ng-if="result.warning">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <p ng-bind="result.warning"></p>
          </div>
          <div class="cp-btn-group">
            <a class="cp-btn cp-btn--primary cp-btn--sm"
               ng-href="/dns/addDeleteDNSRecords?zone={$ result.zoneName $}">
              <i class="fa-solid fa-pen-to-square"></i> Edit records
            </a>
            <a class="cp-btn cp-btn--ghost cp-btn--sm" href="/dns/listZones">
              <i class="fa-solid fa-list"></i> All zones
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_DNS_DEFAULTS = {
    serverIP: "{{ serverIP|escapejs }}",
    owner: "{{ currentUser|escapejs }}"
  };
</script>
<script src="{% static 'dnsManager/dnsManager.js' %}"></script>
{% endblock %}