{{ define "content" }}
<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">PowerDNS</div>
      <h2 class="page-title">Dashboard</h2>
    </div>
  </div>
</div>

<div class="row row-deck row-cards mb-3">
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="subheader">Server ID</div>
        <div class="h2 mb-0 text-truncate">{{ .Server.ID }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="subheader">Daemon</div>
        <div class="h2 mb-0 text-truncate">{{ .Server.DaemonType }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="subheader">Version</div>
        <div class="h2 mb-0 text-truncate">{{ .Server.Version }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="subheader">Zones</div>
        <div class="h2 mb-0">{{ len .Zones }}</div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Recent zones</h3>
  </div>
  {{ if .Zones }}
    <div class="list-group list-group-flush">
      {{ range .Zones }}
        <a class="list-group-item list-group-item-action" href="/zones/{{ .ID }}">
          <div class="row align-items-center">
            <div class="col text-truncate">
              <strong>{{ .Name }}</strong>
              <div class="text-secondary text-truncate">{{ .DisplayKind }} · serial {{ .Serial }}</div>
            </div>
          </div>
        </a>
      {{ end }}
    </div>
  {{ else }}
    <div class="card-body text-secondary">No zones returned by PowerDNS.</div>
  {{ end }}
</div>
{{ end }}

{{ template "layout" . }}