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

{% block title %}Create Nameserver{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-server"></i> Create Nameserver</h1>
      <p class="cp-page-head__sub">
        Publishes the A and NS records that make this server answer as
        <span class="cp-mono">{{ ns1 }}</span> and <span class="cp-mono">{{ ns2 }}</span>.
      </p>
    </div>
  </div>

  <div class="cp-alert cp-alert--warning">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p>
      <strong>This page cannot finish the job on its own.</strong>
      Registering <em>glue records</em> &mdash; the entries that tell the <code>.net</code> registry
      which IP address <code>{{ ns1 }}</code> and <code>{{ ns2 }}</code> live at &mdash; can only be
      done in the control panel of the registrar that holds
      <strong>{{ ns1|cut:"ns1." }}</strong>. CloudPanel has no access to the registrar, so until you
      add the glue records there by hand, no domain delegated to these nameservers will resolve.
    </p>
  </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-sliders"></i> Nameserver configuration</h2>
      </div>
      <div class="cp-card__body">
        {% if not isAdmin %}
        <div class="cp-alert cp-alert--info">
          <i class="fa-solid fa-circle-info"></i>
          <p>
            Only a server administrator can write these records. The values below are shown so you
            can pass them to your registrar.
          </p>
        </div>
        {% endif %}

        <form novalidate ng-submit="setupNameServers()">
          <div class="cp-form-grid">
            <div class="cp-field">
              <label class="cp-label" for="ns1">Primary nameserver <span class="cp-req">*</span></label>
              <input id="ns1" type="text" class="cp-input cp-mono" ng-model="form.ns1"
                     autocomplete="off" spellcheck="false" {% if not isAdmin %}readonly{% endif %}>
            </div>
            <div class="cp-field">
              <label class="cp-label" for="ns2">Secondary nameserver <span class="cp-req">*</span></label>
              <input id="ns2" type="text" class="cp-input cp-mono" ng-model="form.ns2"
                     autocomplete="off" spellcheck="false" {% if not isAdmin %}readonly{% endif %}>
            </div>
          </div>

          <div class="cp-field">
            <label class="cp-label" for="nsIP">IP address <span class="cp-req">*</span></label>
            <input id="nsIP" type="text" class="cp-input cp-mono" ng-model="form.ipAddress"
                   autocomplete="off" spellcheck="false" {% if not isAdmin %}readonly{% endif %}>
            <p class="cp-help">
              Both hostnames resolve to this address. It must be the public IPv4 address of this
              server.
            </p>
          </div>

          {% if isAdmin %}
          <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-server" ng-if="!busy"></i>
            Configure nameservers
          </button>
          {% endif %}
        </form>

        <div class="cp-alert cp-alert--success" ng-if="result.zoneName" style="margin-top:16px;">
          <i class="fa-solid fa-circle-check"></i>
          <p>
            <span class="cp-mono" ng-bind="result.ns1"></span> and
            <span class="cp-mono" ng-bind="result.ns2"></span> now resolve to
            <span class="cp-mono" ng-bind="result.ipAddress"></span> in zone
            <span class="cp-mono" ng-bind="result.zoneName"></span>.
            <span ng-bind="result.reminder"></span>
          </p>
        </div>
      </div>
    </div>

    <div class="cp-card">
      <div class="cp-card__head">
        <h2 class="cp-card__title"><i class="fa-solid fa-clipboard-list"></i> Give this to your registrar</h2>
      </div>
      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap">
          <table class="cp-table cp-table--compact">
            <thead>
              <tr><th scope="col">Host name</th><th scope="col">Record</th><th scope="col">IPv4 address</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="cp-mono">{{ ns1 }}</td>
                <td><span class="cp-badge cp-badge--primary">Glue / A</span></td>
                <td class="cp-mono">{{ serverIP }}</td>
              </tr>
              <tr>
                <td class="cp-mono">{{ ns2 }}</td>
                <td><span class="cp-badge cp-badge--primary">Glue / A</span></td>
                <td class="cp-mono">{{ serverIP }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card__body">
          <h3 style="font-size:14px;margin:0 0 8px;">What you still have to do by hand</h3>
          <ol class="cp-muted" style="font-size:13px;padding-left:18px;margin:0;">
            <li>
              Sign in to the registrar that holds <strong>{{ ns1|cut:"ns1." }}</strong>.
            </li>
            <li>
              Find the section called <em>Register a nameserver</em>, <em>Private nameservers</em>,
              <em>Host records</em> or <em>Glue records</em> &mdash; the name varies by registrar.
            </li>
            <li>
              Register <span class="cp-mono">{{ ns1 }}</span> and
              <span class="cp-mono">{{ ns2 }}</span>, both pointing at
              <span class="cp-mono">{{ serverIP }}</span>.
            </li>
            <li>
              For every customer domain, set its nameservers to
              <span class="cp-mono">{{ ns1 }}</span> and <span class="cp-mono">{{ ns2 }}</span>.
            </li>
            <li>
              Allow up to 48 hours for the registry to publish the change, then confirm it from the
              <a href="/dns/addDeleteDNSRecords">record editor's propagation check</a>.
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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