{{ define "content" }}
<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">Authoritative DNS</div>
      <h2 class="page-title">Zones</h2>
      <div class="text-secondary">{{ len .Zones }} zones loaded from PowerDNS.</div>
    </div>
  </div>
</div>

<div class="row row-cards">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Existing zones</h3>
      </div>
    {{ if .Zones }}
      <div class="table-responsive">
        <table class="table table-vcenter card-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Kind</th>
              <th>Serial</th>
              <th class="w-1"></th>
            </tr>
          </thead>
          <tbody>
        {{ range .Zones }}
            <tr>
              <td><a href="/zones/{{ .ID }}">{{ .Name }}</a></td>
              <td><span class="badge bg-blue-lt">{{ .DisplayKind }}</span></td>
              <td>{{ .Serial }}</td>
              <td>
                <form method="post" action="/zones/{{ .ID }}/delete">
                  <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
                  <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
                </form>
              </td>
            </tr>
        {{ end }}
          </tbody>
        </table>
      </div>
    {{ else }}
      <div class="card-body text-secondary">No zones returned by PowerDNS.</div>
    {{ end }}
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Add zone</h3>
      </div>
      <div class="card-body">
        <form method="post" action="/zones">
          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
          <div class="mb-3">
            <label class="form-label">Zone name</label>
            <input class="form-control" name="name" placeholder="example.org." required>
          </div>
          <div class="mb-3">
            <label class="form-label">Kind</label>
            <select class="form-select" name="kind" required>
              <option>Native</option>
              <option>Master</option>
              <option>Slave</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Nameservers</label>
            <textarea class="form-control" name="nameservers" rows="4" placeholder="ns1.example.org.&#10;ns2.example.org."></textarea>
          </div>
          <div class="mb-3">
            <label class="form-label">Masters</label>
            <textarea class="form-control" name="masters" rows="3" placeholder="Required for Slave zones"></textarea>
          </div>
          <button class="btn btn-primary" type="submit">Create zone</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{ end }}

{{ template "layout" . }}