<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
    <link href="/fontawesome/css/solid.css" rel="stylesheet" />
    <title>GNS Registrar</title>
  </head>
  <body>
    {{ template "nav.html" . }}
    <div class="container pt-5">
      <h1 class="text-center mb-5">
        <span class="text-center fs-5 text-secondary">Zone:<br/> <span style="display: inline-block; overflow-x: auto; border: 1px solid #ddd; border-radius: 5px; padding: 0.5em; background-color: #eee; width: 75%; white-space: nowrap; font-size: 0.75em">.{{.suffixHint}} = {{.zoneKey}}</span></span>
      </h1>
      {{if .error}}
      <div class="container pt-5">
        <div class="alert alert-danger" role="alert">
          <h4 class="alert-heading">An error occured!</h4>
          <hr>
          <p class="mb-0">{{.error}}.</p>
        </div>
      </div>
      {{end}}
      <form action="/search" method="get">
        <div class="row">
          <div class="col-lg-6 offset-lg-3 text-center">
            <div class="form-floating mb-3">
              <input type="hidden" value="{{.extZkey}}" name="zkey">
              <input id="labelInput" name="label" class="form-control text-center" placeholder="" maxlength="63" type="text" aria-describedby="reg-suffix" required autofocus>
              <label for="labelInput">Your name. e.g. alice</label>
            </div>
            <input class="btn btn-primary" type="submit" value="Check availability!">
          </div>
        </div>
      </form>
    </div>
    {{ template "footer.html" . }}
  </body>
</html>
