<!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>Name Overview</title>
  </head>
  <body>
    {{ template "nav.html" . }}
    {{if .registrationSuccess}}
    <div class="container pt-5">
      <div class="alert alert-success" role="alert">
        <h4 class="alert-heading">Registration successful!</h4>
        <hr>
        <p class="mb-0">Your zone will be published shortly.</p>
      </div>
    </div>
    {{end}}
    {{if .error}}
    <div class="container pt-5">
      <div class="alert alert-danger" role="alert">
        <h4 class="alert-heading">Oh no!</h4>
        <hr>
        <p class="mb-0">{{.error}}.</p>
      </div>
    </div>
    {{end}}
    <div class="container pt-5">
      {{if .available}}
      <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-success">available</span> for registration.</h1>
      <form action="/name/{{.label}}/buy" method="get" class="align-items-center">
        <div class="row">
          <div class="col-md-12 alert alert-light">
            <h4>Zone information</h4>
            <div class="form-floating mb-3">
              <input name="zkey" value="{{.zkey}}" id="zkeyInput" class="form-control" maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
              <label for="zkeyInput">Enter your zone key here</label>
            </div>
            <input class="btn btn-primary" type="submit" value="Register for a duration of {{.registrationDaysCount}} days for {{.cost}}">
          </div>
        </div>
      </form>
      <div class="container pt-5">
        <div class="alert alert-primary" role="alert">
          <h4 class="alert-heading">How do I get a zone key?</h4>
          <hr>
          <p class="mb-0">
          Please refer to the <a class="link-dark" href="https://docs.gnunet.org/latest/users/gns.html#local" target="_blank">GNUnet GNS documentation</a> on how to find your zone key or create a zone key if you don't already have one.
          <br>
          Simply copy the (public!) zone key into the input box above.
          </p>
          <h4 class="alert-heading mt-4">How do I pay?</h4>
          <hr>
          <p class="mb-0">
          You must have a Taler wallet installed and at least {{.cost}} in the wallet. You can get the wallet and some coins suitable for payment at this registrar <a class="link-dark" href="https://demo.taler.net" target="_blank">at the Taler Demo</a>.
          </p>
        </div>        </div>
        {{else}}
        {{if eq .remainingDays 0}}
        <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-secondary">reserved</span>!</h1> 
        {{else}}
        <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-danger">taken</span>!</h1> 
        {{end}}
        <div class="row">
          <div class="col-md-12 alert alert-light">
            <h4>Zone information</h4>
            <div class="form-floating mb-3">
              <input name="zkey" id="zkeyInput" class="form-control" maxlength="63" type="text" value="{{.currentValue}}" readonly required autofocus>
              <label for="zkeyInput">Zone key</label>
            </div>
          </div>
        </div>
        {{if ne .remainingDays 0}}
        <div class="row">
          <div class="col-md-12 alert alert-light">
            <h4>Registration info</h4>
            <div class="form-floating mb-3">
              <input name="reg" id="regInput" class="form-control" type="text" value="{{.registeredUntil}}" readonly required autofocus>
              <label for="regInput">Registration expires in {{.remainingDays}} days:</label>
            </div>
          </div>
        </div>
        {{end}}
        {{end}}
        <hr/>
        <a class="btn btn-secondary" href="/">Back</a>
    </div>
    {{ template "footer.html" . }}
  </body>
</html>
