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

{% block title %}CloudFlare{% endblock %}

{% block styles %}
<style>
  .cp-cf-zone-row { cursor: pointer; }
  .cp-cf-zone-row:hover { background: var(--cp-surface-2); }
  .cp-cf-zone-row.is-active { background: var(--cp-primary-soft); }
  .cp-cf-token-masked {
    font-family: var(--cp-font-mono);
    letter-spacing: 2px;
  }
  .cp-cf-records tr.is-editing td { background: var(--cp-primary-soft); }
</style>
{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-brands fa-cloudflare"></i> CloudFlare</h1>
      <p class="cp-page-head__sub">
        Manage the CloudFlare side of a domain you already host here: records, proxying,
        development mode and cache purges -- using your own CloudFlare API token.
      </p>
    </div>
  </div>

  <!-- ------------------------------------------------------------- token -->
  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-key"></i> API token</h2>
    </div>
    <div class="cp-card__body">
      <div ng-if="status.configured" class="cp-alert cp-alert--success">
        <i class="fa-solid fa-circle-check"></i>
        <p>
          A token ending <span class="cp-cf-token-masked" ng-bind="status.lastFour"></span> is configured.
          The token itself is never shown again or sent back to your browser.
        </p>
      </div>
      <div ng-if="!status.configured" class="cp-alert cp-alert--info">
        <i class="fa-solid fa-circle-info"></i>
        <p>
          Add a <strong>scoped</strong> CloudFlare API token (Zone:DNS Edit, Zone:Zone Read,
          Zone:Cache Purge on the zones you want to manage here) -- never your Global API Key.
        </p>
      </div>

      <form novalidate ng-submit="saveToken()" class="cp-form-grid">
        <div class="cp-field" style="grid-column: 1 / -1;">
          <label class="cp-label" for="cfToken">
            {$ status.configured ? 'Replace token' : 'API token' $}
          </label>
          <input id="cfToken" type="password" class="cp-input cp-mono" ng-model="tokenForm.value"
                 autocomplete="off" spellcheck="false" placeholder="Paste your CloudFlare API token">
        </div>
        <div class="cp-field" style="align-self:end;">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy || !tokenForm.value">
            <span class="cp-spinner" ng-if="busy"></span>
            <i class="fa-solid fa-check" ng-if="!busy"></i>
            Verify &amp; save
          </button>
        </div>
      </form>

      <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-if="status.configured"
              ng-click="removeToken()" ng-disabled="busy" style="margin-top:8px;">
        <i class="fa-solid fa-trash"></i> Remove token
      </button>
    </div>
  </div>

  <div ng-if="status.configured">

    <!-- ------------------------------------------------------------ zones -->
    <div class="cp-card">
      <div class="cp-card__head">
        <div>
          <h2 class="cp-card__title"><i class="fa-solid fa-globe"></i> Zones</h2>
          <p class="cp-card__sub">Only zones you also manage locally can be edited here.</p>
        </div>
        <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="loadZones()" ng-disabled="busy">
          <i class="fa-solid fa-rotate" ng-class="{'fa-spin': busy}"></i> Refresh
        </button>
      </div>
      <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap" ng-if="zones.length">
          <table class="cp-table">
            <thead>
              <tr>
                <th scope="col">Zone</th>
                <th scope="col">Status</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="zone in zones" class="cp-cf-zone-row"
                  ng-class="{'is-active': selected && selected.name === zone.name}"
                  ng-click="zone.localZone && selectZone(zone)">
                <td class="cp-mono" ng-bind="zone.name"></td>
                <td><span class="cp-badge" ng-bind="zone.status"></span></td>
                <td>
                  <span ng-if="!zone.localZone" class="cp-badge cp-badge--warning"
                        title="Not one of your local DNS zones">not local</span>
                  <span ng-if="zone.localZone && selected && selected.name === zone.name"
                        class="cp-badge cp-badge--primary">selected</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="cp-empty" ng-if="!busy && !zones.length">
          <i class="fa-solid fa-globe"></i>
          <h4>No CloudFlare zones</h4>
          <p>This token cannot see any zones.</p>
        </div>
      </div>
    </div>

    <div ng-if="selected">

      <!-- --------------------------------------------------- zone actions -->
      <div class="cp-card">
        <div class="cp-card__head">
          <h2 class="cp-card__title" ng-bind="selected.name"></h2>
        </div>
        <div class="cp-card__body">
          <div class="cp-form-grid">
            <div class="cp-field" style="margin-bottom:0;">
              <label class="cp-label">Development mode</label>
              <button type="button" class="cp-btn cp-btn--sm"
                      ng-class="devMode.enabled ? 'cp-btn--warning' : 'cp-btn--ghost'"
                      ng-click="toggleDevMode()" ng-disabled="zoneBusy">
                <i class="fa-solid fa-flask"></i>
                {$ devMode.enabled ? 'On -- turn off' : 'Off -- turn on' $}
              </button>
              <p class="cp-dns-hint" ng-if="devMode.enabled">
                Bypasses CloudFlare's cache for 3 hours (auto re-enables caching after).
              </p>
            </div>
            <div class="cp-field" style="margin-bottom:0;">
              <label class="cp-label">Cache</label>
              <div class="cp-btn-group">
                <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="purgeAll()"
                        ng-disabled="zoneBusy">
                  <i class="fa-solid fa-broom"></i> Purge everything
                </button>
              </div>
            </div>
            <div class="cp-field" style="margin-bottom:0;">
              <label class="cp-label">Sync</label>
              <button type="button" class="cp-btn cp-btn--accent cp-btn--sm" ng-click="syncZone()"
                      ng-disabled="zoneBusy">
                <i class="fa-solid fa-rotate"></i> Push local records to CloudFlare
              </button>
            </div>
          </div>

          <form novalidate ng-submit="purgeUrls()" style="margin-top:14px;">
            <label class="cp-label" for="purgeUrls">Purge specific URLs (one per line)</label>
            <textarea id="purgeUrls" class="cp-textarea cp-mono" rows="3" ng-model="purgeForm.urls"
                      placeholder="https://{$ selected.name $}/path/to/file.css"></textarea>
            <button type="submit" class="cp-btn cp-btn--ghost cp-btn--sm" ng-disabled="zoneBusy"
                    style="margin-top:6px;">
              <i class="fa-solid fa-broom"></i> Purge these URLs
            </button>
          </form>
        </div>
      </div>

      <!-- --------------------------------------------------- add a record -->
      <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="cfRecType">Type</label>
                <select id="cfRecType" class="cp-select" ng-model="newRecord.recordType">
                  {% for type in recordTypes %}
                  <option value="{{ type }}">{{ type }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="cp-field">
                <label class="cp-label" for="cfRecName">Name</label>
                <input id="cfRecName" type="text" class="cp-input cp-mono" ng-model="newRecord.recordName"
                       placeholder="www">
              </div>
              <div class="cp-field" ng-if="newRecord.recordType === 'MX' || newRecord.recordType === 'SRV'">
                <label class="cp-label" for="cfRecPrio">Priority</label>
                <input id="cfRecPrio" type="number" class="cp-input" ng-model="newRecord.priority"
                       min="0" max="65535">
              </div>
              <div class="cp-field">
                <label class="cp-label" for="cfRecTTL">TTL</label>
                <select id="cfRecTTL" class="cp-select" ng-model="newRecord.ttl"
                        ng-options="choice.value as choice.label for choice in ttlChoices"></select>
              </div>
              <div class="cp-field" ng-if="newRecord.recordType === 'A' || newRecord.recordType === 'AAAA' || newRecord.recordType === 'CNAME'">
                <label class="cp-label">
                  <input type="checkbox" ng-model="newRecord.proxied"> Proxied (orange cloud)
                </label>
              </div>
            </div>
            <div class="cp-field">
              <label class="cp-label" for="cfRecContent">Value</label>
              <textarea id="cfRecContent" class="cp-textarea cp-mono" ng-model="newRecord.recordContent"
                        spellcheck="false"></textarea>
            </div>
            <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="zoneBusy">
              <i class="fa-solid fa-plus"></i> Add record
            </button>
          </form>
        </div>
      </div>

      <!-- ----------------------------------------------------------- records -->
      <div class="cp-card">
        <div class="cp-card__head">
          <h2 class="cp-card__title"><i class="fa-solid fa-table-list"></i> Records</h2>
        </div>
        <div class="cp-card__body cp-card__body--flush">
          <div class="cp-table-wrap cp-cf-records" 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">Proxy</th>
                  <th scope="col" class="cp-nowrap">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="record in records" ng-class="{'is-editing': editing.id === record.id}">
                  <td class="cp-mono">
                    <span ng-if="editing.id !== record.id" ng-bind="record.name"></span>
                    <input ng-if="editing.id === record.id" type="text" class="cp-input cp-mono"
                           ng-model="editing.recordName" aria-label="Record name">
                  </td>
                  <td><span class="cp-badge cp-badge--primary" ng-bind="record.type"></span></td>
                  <td class="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 value" 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 && (record.type === 'MX' || record.type === 'SRV')"
                           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>
                    <button type="button" class="cp-btn cp-btn--sm"
                            ng-if="record.proxiable && editing.id !== record.id"
                            ng-class="record.proxied ? 'cp-btn--warning' : 'cp-btn--ghost'"
                            ng-click="toggleProxied(record)" ng-disabled="zoneBusy">
                      <i class="fa-solid fa-cloud"></i> {$ record.proxied ? 'Proxied' : 'DNS only' $}
                    </button>
                    <span ng-if="!record.proxiable" class="cp-muted">n/a</span>
                  </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-click="startCfEdit(record)" ng-disabled="zoneBusy"
                              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--danger cp-btn--sm"
                              ng-click="deleteRecord(record)" ng-disabled="zoneBusy"
                              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="saveCfEdit()" ng-disabled="zoneBusy">
                        <i class="fa-solid fa-check"></i> Save
                      </button>
                      <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm"
                              ng-click="cancelCfEdit()" ng-disabled="zoneBusy">
                        Cancel
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="cp-empty" ng-if="!records.length && !zoneBusy">
            <i class="fa-solid fa-table-list"></i>
            <h4>No records yet</h4>
            <p>Add one above, or push your local zone's records with Sync.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_DNS_CLOUDFLARE = {
    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 %}