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

{% block title %}DNS Zones{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-globe"></i> DNS Zones</h1>
      <p class="cp-page-head__sub">Every PowerDNS zone your account is allowed to manage.</p>
    </div>
    <div class="cp-page-head__actions">
      <button type="button" class="cp-btn cp-btn--ghost" ng-click="refresh()" ng-disabled="busy">
        <i class="fa-solid fa-rotate" ng-class="{'fa-spin': busy}"></i> Refresh
      </button>
      {% if canCluster %}
      <a class="cp-btn cp-btn--ghost" href="/dns/clustering"
         title="Supermasters, slave replication and zone transfer policy">
        <i class="fa-solid fa-network-wired"></i> Clustering
      </a>
      {% endif %}
      <a class="cp-btn cp-btn--ghost" href="/dns/dnssec" title="Sign a zone with DNSSEC">
        <i class="fa-solid fa-shield-halved"></i> DNSSEC
      </a>
      <a class="cp-btn cp-btn--ghost" href="/dns/cloudflare" title="Manage the CloudFlare side of a zone">
        <i class="fa-brands fa-cloudflare"></i> CloudFlare
      </a>
      <a class="cp-btn cp-btn--primary" href="/dns/createDNSZone">
        <i class="fa-solid fa-plus"></i> Create zone
      </a>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title"><i class="fa-solid fa-list"></i> 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 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">Type</th>
              <th scope="col">Owner</th>
              <th scope="col" class="cp-num">Records</th>
              <th scope="col" class="cp-num">SOA serial</th>
              <th scope="col" class="cp-nowrap">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="zone in zones | filter:search">
              <td>
                <a ng-href="/dns/addDeleteDNSRecords?zone={$ zone.name $}" class="cp-mono"
                   ng-bind="zone.name"></a>
              </td>
              <td><span class="cp-badge cp-badge--info" ng-bind="zone.type"></span></td>
              <td>
                <span ng-if="zone.tracked" ng-bind="zone.owner"></span>
                <span ng-if="!zone.tracked" class="cp-badge cp-badge--warning"
                      title="No panel ownership record; only administrators can reach this zone.">
                  untracked
                </span>
              </td>
              <td class="cp-num" ng-bind="zone.records"></td>
              <td class="cp-num" ng-bind="zone.serial"></td>
              <td class="cp-nowrap">
                <div class="cp-btn-group">
                  <a class="cp-btn cp-btn--ghost cp-btn--sm"
                     ng-href="/dns/addDeleteDNSRecords?zone={$ zone.name $}">
                    <i class="fa-solid fa-pen-to-square"></i> Records
                  </a>
                  <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 zones&hellip;</p>
      </div>

      <div class="cp-empty" ng-if="!busy && !zones.length">
        <i class="fa-solid fa-globe"></i>
        <h4>No DNS zones yet</h4>
        <p>Create a zone to start publishing records for a domain.</p>
        <a class="cp-btn cp-btn--primary" href="/dns/createDNSZone">
          <i class="fa-solid fa-plus"></i> Create your first zone
        </a>
      </div>
    </div>
  </div>

  <div class="cp-alert cp-alert--info">
    <i class="fa-solid fa-circle-info"></i>
    <p>
      A zone only answers on the public internet once the domain's registrar points it at
      <strong>{{ ns1 }}</strong> and <strong>{{ ns2 }}</strong>. See
      <a href="/dns/createNameserver">Create Nameserver</a> for the glue record details.
    </p>
  </div>
</div>
{% endblock %}

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