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

{% block title %}DNSSEC{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-shield-halved"></i> DNSSEC</h1>
      <p class="cp-page-head__sub">
        Sign a zone so resolvers can cryptographically verify its answers. After enabling, give the
        DS record below to your domain's registrar.
      </p>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__body">
      <div class="cp-field" style="margin-bottom:0;">
        <label class="cp-label" for="dnssecZone">Zone</label>
        <select id="dnssecZone" class="cp-select" ng-model="zoneName" ng-change="loadStatus()"
                ng-options="zone.name as zone.name for zone in zones">
          <option value="">-- choose a zone --</option>
        </select>
      </div>
    </div>
  </div>

  <div ng-if="zoneName">
    <div class="cp-card">
      <div class="cp-card__head">
        <h2 class="cp-card__title" ng-bind="zoneName"></h2>
      </div>
      <div class="cp-card__body">
        <div ng-if="busy" class="cp-empty">
          <span class="cp-spinner cp-spinner--lg"></span>
          <p>Checking status&hellip;</p>
        </div>

        <div ng-if="!busy">
          <div class="cp-alert" ng-class="status.secured ? 'cp-alert--success' : 'cp-alert--info'">
            <i class="fa-solid" ng-class="status.secured ? 'fa-lock' : 'fa-lock-open'"></i>
            <p>
              <strong>{$ status.secured ? 'Signed' $}{$ !status.secured ? 'Not signed' : '' $}</strong>
              <span ng-if="status.secured && status.algorithm"> &mdash; algorithm {$ status.algorithm $}</span>
            </p>
          </div>

          <div ng-if="!status.canManage" class="cp-alert cp-alert--warning">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <p>You can view this zone's DNSSEC status but not change it.</p>
          </div>

          <div class="cp-btn-group" ng-if="status.canManage">
            <button type="button" class="cp-btn cp-btn--primary" ng-if="!status.secured"
                    ng-click="enable()" ng-disabled="actionBusy">
              <span class="cp-spinner" ng-if="actionBusy"></span>
              <i class="fa-solid fa-lock" ng-if="!actionBusy"></i>
              Enable DNSSEC
            </button>
            <button type="button" class="cp-btn cp-btn--danger" ng-if="status.secured"
                    ng-click="disable()" ng-disabled="actionBusy">
              <span class="cp-spinner" ng-if="actionBusy"></span>
              <i class="fa-solid fa-lock-open" ng-if="!actionBusy"></i>
              Disable DNSSEC
            </button>
          </div>

          <div ng-if="status.secured" style="margin-top:18px;">
            <h3 class="cp-card__title" style="font-size:14px;">
              <i class="fa-solid fa-file-signature"></i> DS record(s) for your registrar
            </h3>
            <p class="cp-dns-hint">
              Add these exactly as shown to the DS/DNSSEC section at your domain's registrar.
              Until you do, resolvers that validate DNSSEC will not see this zone as signed.
            </p>
            <pre class="cp-pre cp-mono" ng-if="dsRecords.length" ng-repeat="line in dsRecords track by $index" ng-bind="line"></pre>
            <p class="cp-muted" ng-if="!dsRecords.length && !dsBusy">
              No DS records yet -- try reloading in a moment.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cp-empty" ng-if="!zoneName">
    <i class="fa-solid fa-globe"></i>
    <h4>Choose a zone</h4>
    <p>Pick one of your DNS zones above to manage its DNSSEC status.</p>
  </div>
</div>
{% endblock %}

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