<!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="/css/style.css" rel="stylesheet">
    <link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
    <link href="/fontawesome/css/solid.css" rel="stylesheet" />
    <title>{{ call .tr "title" }}</title>
  </head>
  <body>
    {{ template "nav.html" . }}
    {{if .error}}
    <div class="container pt-5">
      <div id="ebanner" class="alert alert-danger" role="alert">
        <h4 class="alert-heading">An error occurred!</h4>
        <hr>
        <p class="mb-0">{{.error}}.</p>
      </div>
    </div>
    {{end}}
    <div class="container">
      <div id="sbanner"  class="alert alert-success" role="alert" hidden>
        <h4 class="alert-heading">Registration successful!</h4>
        <hr>
        You may now <a href="/">go back to the front page</a>.
      </div>
    </div>
    {{if .WalletLink}}
    <div class="qr">
      <h1>Scan this QR code with your Taler Wallet to complete your registration.</h1>
      <a href="{{.WalletLink}}">
        <img class="taldir-qr" src="{{.QRCode}}"/>
      </a>
    </div>
    {{else}}
    <div class="container pt-5">
      <div class="row">
        <div class="col-2">
          <ul class="timeline">
            <li class="done">{{ call .tr "lookup" }}</li>
            <li class="done">{{ call .tr "registerOrModify" }}</li>
            <li id="confirmitem" class="inprogress">{{ call .tr "confirm" }}</li>
          </ul>
        </div>
        <div class="col-8">
          <div id="regcontainer" class="card">
            <div class="card-body">
              <h4 class="card-title">{{ call .tr "confirmation" }}</h4>
              <p class="card-text">{{ .confirmDeletionOrRegistration }}</p>
              <div class="row mt-2">
                <div class="col-lg-6 offset-lg-3 text-center">
                  <form id="regform">
                    <input id="haddrInput" name="haddr" type="hidden" value="{{.haddress}}">
                    <input id="solutionInput" name="solution" type="hidden" value="{{.solution}}">
                    <input id="confirmbutton" class="btn btn-outline-primary" type="submit" value="{{ call .tr "confirm" }}">
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{end}}
      {{ template "footer.html" . }}
  </body>
  <script>
    var form = document.getElementById('regform');
    form.onsubmit = function(event){
      var xhr = new XMLHttpRequest();
      var data = new FormData(form);
      var haddr = data.get("haddr");
      data.delete("haddr");
      xhr.open('POST','/' + haddr)
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      var json = JSON.stringify(Object.fromEntries(data));
      xhr.send(json);

      xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
          if (xhr.status == 204) {
            var sbanner = document.getElementById('sbanner');
            var confirmitem = document.getElementById('confirmitem');
            var confirmbutton = document.getElementById('confirmbutton');
            sbanner.hidden = false;
            confirmitem.classList.add("done");
            confirmbutton.disabled = true;
          } else {
            window.location.href = "?error=Registration failed";
          }
        }
      }

      //Dont submit the form.
      return false;
    }
  </script>
</html>
