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

{% block title %}DNS Records{% endblock %}

{% block styles %}
<style>
  .cp-dns-editor .cp-rec-name   { min-width: 160px; }
  .cp-dns-editor .cp-rec-value  { max-width: 380px; word-break: break-all; }
  .cp-dns-editor tr.is-editing td { background: var(--cp-primary-soft); }
  .cp-dns-hint {
    font-size: 12px;
    color: var(--cp-text-muted);
    margin-top: 5px;
    min-height: 16px;
  }
  .cp-prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .cp-prop {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: 12px 14px;
    background: var(--cp-surface-2);
  }
  .cp-prop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 650;
    font-size: 13px;
  }
  .cp-prop__values { margin: 0; padding-left: 18px; font-family: var(--cp-font-mono); font-size: 12.5px; }
</style>
{% endblock %}

{% block content %}
<div class="cp-dns-editor" ng-controller="dnsRecordsController">

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-pen-to-square"></i> DNS Records</h1>
      <p class="cp-page-head__sub">
        Add, edit and delete records. Every change bumps the zone's SOA serial and notifies
        secondaries.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <button type="button" class="cp-btn cp-btn--danger" ng-if="zoneName" ng-click="resetTemplate()"
              ng-disabled="busy">
        <i class="fa-solid fa-clock-rotate-left"></i> Reset to default template
      </button>
      <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-card">
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div class="cp-field" style="margin-bottom:0;">
          <label class="cp-label" for="zonePicker">Zone</label>
          <select id="zonePicker" class="cp-select" ng-model="zoneName" ng-change="loadRecords()"
                  ng-options="zone.name as zone.name for zone in zones">
            <option value="">-- choose a zone --</option>
          </select>
        </div>
        <div class="cp-field" style="margin-bottom:0;">
          <label class="cp-label" for="cpDnsSoaSerial">Current SOA serial</label>
          <input type="text" id="cpDnsSoaSerial" class="cp-input cp-mono"
                 ng-model="serial" readonly>
          <p class="cp-help">Bumped automatically on every change below.</p>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="zoneName">

    <!-- ------------------------------------------------------------ add -->
    <div class="cp-card">
      <div class="cp-card__head">
        <h2 class="cp-card__title"><i class="fa-solid fa-plus"></i> Add a record</h2>
      </div>
      <div class="cp-card__body">
        <form novalidate ng-submit="addRecord()">
          <div class="cp-form-grid">
            <div class="cp-field">
              <label class="cp-label" for="recType">Type <span class="cp-req">*</span></label>
              <select id="recType" class="cp-select" ng-model="newRecord.recordType"
                      ng-change="typeChanged()">
                {% for type in recordTypes %}{% if type != 'SOA' %}
                <option value="{{ type }}">{{ type }}</option>
                {% endif %}{% endfor %}
              </select>
            </div>

            <div class="cp-field">
              <label class="cp-label" for="recName">Name <span class="cp-req">*</span></label>
              <div class="cp-input-group">
                <input id="recName" type="text" class="cp-input cp-mono"
                       ng-model="newRecord.recordName" autocomplete="off" spellcheck="false"
                       placeholder="@">
                <span class="cp-input-group__addon cp-mono" ng-bind="'.' + zoneName"></span>
              </div>
              <p class="cp-dns-hint">Use <code>@</code> for the zone apex, or a label such as
                <code>www</code>.</p>
            </div>

            <div class="cp-field" ng-if="needsPriority()">
              <label class="cp-label" for="recPrio">Priority <span class="cp-req">*</span></label>
              <input id="recPrio" type="number" class="cp-input" ng-model="newRecord.priority"
                     min="0" max="65535" step="1">
              <p class="cp-dns-hint">Lower wins. 10 is the usual MX value.</p>
            </div>

            <div class="cp-field">
              <label class="cp-label" for="recTTL">TTL</label>
              <select id="recTTL" class="cp-select" ng-model="newRecord.ttl"
                      ng-options="choice.value as choice.label for choice in ttlChoices">
              </select>
            </div>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="recContent">Value <span class="cp-req">*</span></label>
            <textarea id="recContent" class="cp-textarea cp-mono" ng-model="newRecord.recordContent"
                      spellcheck="false" style="min-height:76px;"
                      ng-attr-placeholder="{$ placeholderFor(newRecord.recordType) $}"></textarea>
            <p class="cp-dns-hint" ng-bind="hintFor(newRecord.recordType)"></p>
          </div>

          <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-plus" ng-if="!busy"></i>
            Add record
          </button>
        </form>
      </div>
    </div>

    <!-- -------------------------------------------------------- records -->
    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title"><i class="fa-solid fa-table-list"></i> Records</h2>
          <p class="cp-card__sub" ng-bind="records.length + ' record(s) in ' + zoneName"></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 records&hellip;"
                 aria-label="Filter records">
        </div>
      </div>

      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap" ng-if="records.length">
          <table class="cp-table">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Value</th>
                <th scope="col" class="cp-num">Prio</th>
                <th scope="col" class="cp-num">TTL</th>
                <th scope="col" class="cp-nowrap">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="record in records | filter:search"
                  ng-class="{'is-editing': editing.id === record.id}">
                <td class="cp-rec-name cp-mono" ng-bind="record.label"></td>
                <td><span class="cp-badge cp-badge--primary" ng-bind="record.type"></span></td>
                <td class="cp-rec-value cp-mono">
                  <span ng-if="editing.id !== record.id" ng-bind="record.content"></span>
                  <textarea ng-if="editing.id === record.id" class="cp-textarea cp-mono"
                            ng-model="editing.recordContent" spellcheck="false"
                            aria-label="Record content"
                            style="min-height:64px;"></textarea>
                </td>
                <td class="cp-num">
                  <span ng-if="editing.id !== record.id" ng-bind="record.priority"></span>
                  <input ng-if="editing.id === record.id" type="number" class="cp-input"
                         ng-model="editing.priority" min="0" max="65535" step="1"
                         aria-label="Record priority"
                         style="max-width:90px;">
                </td>
                <td class="cp-num">
                  <span ng-if="editing.id !== record.id" ng-bind="record.ttl"></span>
                  <select ng-if="editing.id === record.id" class="cp-select" ng-model="editing.ttl"
                          aria-label="Record TTL"
                          ng-options="choice.value as choice.label for choice in ttlChoices"
                          style="min-width:130px;"></select>
                </td>
                <td class="cp-nowrap">
                  <div class="cp-btn-group" ng-if="editing.id !== record.id">
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-if="record.editable" ng-click="startEdit(record)" ng-disabled="busy"
                            ng-attr-aria-label="Edit the {$ record.type $} record for {$ record.name $}">
                      <i class="fa-solid fa-pen" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-click="checkRecord(record)" ng-disabled="busy"
                            title="Check what public resolvers see">
                      <i class="fa-solid fa-satellite-dish"></i>
                    </button>
                    <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                            ng-if="record.deletable" ng-click="deleteRecord(record)"
                            ng-disabled="busy"
                            ng-attr-aria-label="Delete the {$ record.type $} record for {$ record.name $}">
                      <i class="fa-solid fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="cp-btn-group" ng-if="editing.id === record.id">
                    <button type="button" class="cp-btn cp-btn--success cp-btn--sm"
                            ng-click="saveEdit()" ng-disabled="busy">
                      <i class="fa-solid fa-check"></i> Save
                    </button>
                    <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                            ng-click="cancelEdit()" ng-disabled="busy">
                      Cancel
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="cp-empty" ng-if="!records.length && !busy">
          <i class="fa-solid fa-table-list"></i>
          <h4>This zone has no records</h4>
          <p>Add one above, or recreate the zone with the default template.</p>
        </div>
      </div>
    </div>

    <!-- ---------------------------------------------------- propagation -->
    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title"><i class="fa-solid fa-satellite-dish"></i> Propagation check</h2>
          <p class="cp-card__sub">Queries public resolvers, not this server, so it reports what the
            outside world currently sees.</p>
        </div>
      </div>
      <div class="cp-card__body">
        <form novalidate ng-submit="checkPropagation()">
          <div class="cp-form-grid">
            <div class="cp-field">
              <label class="cp-label" for="propName">Name</label>
              <div class="cp-input-group">
                <input id="propName" type="text" class="cp-input cp-mono" ng-model="probe.recordName"
                       autocomplete="off" spellcheck="false" placeholder="@">
                <span class="cp-input-group__addon cp-mono" ng-bind="'.' + zoneName"></span>
              </div>
            </div>
            <div class="cp-field">
              <label class="cp-label" for="propType">Type</label>
              <select id="propType" class="cp-select" ng-model="probe.recordType">
                {% for type in recordTypes %}
                <option value="{{ type }}">{{ type }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <button type="submit" class="cp-btn cp-btn--accent" ng-disabled="probing">
            <span class="cp-spinner" ng-if="probing"></span>
            <i class="fa-solid fa-magnifying-glass" ng-if="!probing"></i>
            Check propagation
          </button>
        </form>

        <div ng-if="propagation" style="margin-top:18px;">
          <div class="cp-alert" ng-class="propagation.propagated ? 'cp-alert--success' : 'cp-alert--warning'">
            <i class="fa-solid" ng-class="propagation.propagated ? 'fa-circle-check' : 'fa-clock'"></i>
            <p>
              <strong class="cp-mono" ng-bind="propagation.recordName + ' ' + propagation.recordType"></strong>
              &mdash;
              <span ng-if="propagation.propagated">every resolver matches this server.</span>
              <span ng-if="!propagation.propagated">not yet matching everywhere.</span>
              <span ng-bind="propagation.note"></span>
            </p>
          </div>

          <p class="cp-muted" style="font-size:13px;">
            This server publishes:
            <span class="cp-mono" ng-if="propagation.expected.length"
                  ng-bind="propagation.expected.join(', ')"></span>
            <em ng-if="!propagation.expected.length">nothing of that type.</em>
          </p>

          <div class="cp-prop-grid">
            <div class="cp-prop" ng-repeat="row in propagation.results">
              <div class="cp-prop__head">
                <span ng-bind="row.label + ' (' + row.resolver + ')'"></span>
                <span class="cp-badge"
                      ng-class="row.matches ? 'cp-badge--success' : 'cp-badge--warning'"
                      ng-bind="row.matches ? 'match' : row.state"></span>
              </div>
              <ul class="cp-prop__values" ng-if="row.values.length">
                <li ng-repeat="value in row.values track by $index" ng-bind="value"></li>
              </ul>
              <p class="cp-muted" style="margin:0;font-size:12.5px;" ng-if="!row.values.length"
                 ng-bind="row.message || 'No answer.'"></p>
              <p class="cp-faint" style="margin:6px 0 0;font-size:12px;" ng-if="row.ttl">
                TTL <span ng-bind="row.ttl"></span>s
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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

{% block scripts %}
<script>
  window.CP_DNS_EDITOR = {
    zone: "{{ selectedZone|escapejs }}",
    serverIP: "{{ serverIP|escapejs }}",
    ns1: "{{ ns1|escapejs }}",
    ns2: "{{ ns2|escapejs }}",
    ttlChoices: [
      {% for value, label in ttlChoices %}{ value: {{ value }}, label: "{{ label|escapejs }}" }{% if not forloop.last %},{% endif %}{% endfor %}
    ]
  };
</script>
<script src="{% static 'dnsManager/dnsManager.js' %}"></script>
{% endblock %}