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

{% block title %}Slave Zones{% endblock %}

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

  <ul class="cp-breadcrumb">
    <li>DNS</li>
    <li>Slave Zones</li>
  </ul>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">
        <i class="fa-solid fa-download"></i> Slave Zones
      </h1>
      <p class="cp-page-head__sub">
        Zones this server holds as a secondary. Their contents arrive over AXFR from a master and
        are never edited here.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/dns/clustering">
        <i class="fa-solid fa-network-wired"></i> Clustering
      </a>
      <button type="button" class="cp-btn cp-btn--ghost" ng-click="load()" ng-disabled="busy">
        <i class="fa-solid fa-rotate" ng-class="{'fa-spin': busy}"></i> Refresh
      </button>
    </div>
  </div>

  <div class="cp-dash-split">

    {# ------------------------------------------------------- add a zone #}
    <div class="cp-card">
      <div class="cp-card__head">
        <h2 class="cp-card__title"><i class="fa-solid fa-circle-plus"></i> Add a slave zone</h2>
      </div>
      <div class="cp-card__body">
        <form novalidate ng-submit="addZone()">

          <div class="cp-field">
            <label class="cp-label" for="slaveZoneName">Zone name <span class="cp-req">*</span></label>
            <input id="slaveZoneName" 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 a trailing dot.</p>
            <p class="cp-error" ng-if="errors.zoneName" ng-bind="errors.zoneName"></p>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="slaveMasters">Master addresses <span class="cp-req">*</span></label>
            <input id="slaveMasters" type="text" class="cp-input cp-mono" ng-model="form.masters"
                   ng-class="{'is-invalid': errors.masters}" autocomplete="off" spellcheck="false"
                   placeholder="203.0.113.10 198.51.100.4">
            <p class="cp-help">
              Up to {{ maxMasters }} IP addresses, separated by spaces or commas. Add
              <code>:port</code> when the master does not listen on 53.
            </p>
            <p class="cp-error" ng-if="errors.masters" ng-bind="errors.masters"></p>
          </div>

          <div class="cp-field">
            <label class="cp-check">
              <input type="checkbox" ng-model="form.retrieve">
              <span>Request the first transfer immediately</span>
            </label>
          </div>

          <button type="submit" class="cp-btn cp-btn--primary cp-btn--block" ng-disabled="busy">
            <i class="fa-solid fa-plus" ng-class="{'fa-spin fa-spinner': busy}"></i>
            Add slave zone
          </button>
        </form>

        <div class="cp-alert cp-alert--info">
          <i class="fa-solid fa-circle-info"></i>
          <p>
            The zone is created empty on purpose &mdash; every record has to arrive over AXFR. The
            master must allow zone transfers from <strong>{{ serverIP }}</strong>, or the record
            count below stays at zero.
          </p>
        </div>
      </div>
    </div>

    {# ---------------------------------------------------------- the list #}
    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Slave zones</h2>
          <p class="cp-card__sub" ng-bind="summary()"></p>
        </div>
        <div class="cp-table-search">
          <i class="fa-solid fa-magnifying-glass"></i>
          <input type="search" class="cp-input" ng-model="search" placeholder="Filter zones&hellip;"
                 aria-label="Filter slave zones">
        </div>
      </div>

      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap" ng-if="!busy && zones.length">
          <table class="cp-table">
            <thead>
              <tr>
                <th scope="col">Zone</th>
                <th scope="col">Masters</th>
                <th scope="col" class="cp-num">Serial</th>
                <th scope="col" class="cp-num">Records</th>
                <th scope="col">Last check</th>
                <th scope="col" class="cp-nowrap">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="zone in zones | filter:search">
                <td>
                  <a class="cp-mono" ng-href="/dns/addDeleteDNSRecords?zone={$ zone.name $}"
                     ng-bind="zone.name"></a>
                  <div class="cp-muted" ng-if="zone.owner">owner: {$ zone.owner $}</div>
                </td>
                <td class="cp-mono">
                  <div ng-repeat="master in zone.masters" ng-bind="master"></div>
                  <span class="cp-muted" ng-if="!zone.masters.length">none configured</span>
                </td>
                <td class="cp-num cp-mono" ng-bind="zone.serial || '—'"></td>
                <td class="cp-num">
                  <span ng-bind="zone.records"></span>
                  <span class="cp-badge cp-badge--warning" ng-if="!zone.transferred"
                        title="No records have been transferred yet.">
                    empty
                  </span>
                </td>
                <td>
                  <span ng-bind="zone.lastCheckText"></span>
                  <div class="cp-muted" ng-if="zone.lastCheckAge >= 0"
                       ng-bind="ageText(zone.lastCheckAge) + ' ago'"></div>
                </td>
                <td class="cp-nowrap">
                  <div class="cp-btn-group">
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-click="retrieve(zone)" ng-disabled="busy"
                            title="Ask PowerDNS to transfer this zone from its master now">
                      <i class="fa-solid fa-download"></i> Retrieve now
                    </button>
                    <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                            ng-click="removeZone(zone)" ng-disabled="busy">
                      <i class="fa-solid fa-trash"></i> Delete
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="cp-empty" ng-if="busy">
          <span class="cp-spinner cp-spinner--lg"></span>
          <p>Loading slave zones&hellip;</p>
        </div>

        <div class="cp-empty" ng-if="!busy && !zones.length">
          <i class="fa-solid fa-download"></i>
          <h4>No slave zones</h4>
          <p>
            This server holds no secondary zones. Add one to mirror a zone whose master lives
            elsewhere.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="cp-alert cp-alert--warning">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p>
      A slave zone is overwritten wholesale by the next transfer, so editing its records here is
      pointless &mdash; change them on the master. Deleting a slave zone removes every transferred
      record; the master is not touched.
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_DNS_SLAVE = {
    ns1: "{{ ns1|escapejs }}",
    ns2: "{{ ns2|escapejs }}",
    serverIP: "{{ serverIP|escapejs }}",
    isAdmin: {% if isAdmin %}true{% else %}false{% endif %},
    maxMasters: {{ maxMasters }}
  };
</script>
<script src="{% static 'dnsManager/dnsManager.js' %}"></script>
{% endblock %}