<!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" . }}
    <div class="container">
      <div  id="ebanner" class="container" hidden>
        <div class="alert alert-danger" role="alert">
          <h4 class="alert-heading">{{ call .tr "error" }}</h4>
          <hr>
          <p class="mb-0" id="ebanner-text">{{.error}}.</p>
        </div>
      </div>
      <div id="sbanner" class="container" hidden>
        <div class="alert alert-success" role="alert">
          <h4 class="alert-heading">{{ call .tr "validationInitiated" }}</h4>
          <hr>
          {{ call .tr "pleaseCompleteValidation" }}
        </div>
      </div>
      <div class="container pt-5">
       <div class="row">
        <div class="col-2">
          <ul class="timeline">
            <li class="done">{{ call .tr "lookup" }}</li>
            <li class="inprogress">{{ call .tr "registerOrModify" }}</li>
            <li>{{ call .tr "confirm" }}</li>
          </ul>
        </div>
        <div class="col-8">
          <div class="card">
            {{if .available}}
            <div class="card-body">
              <h4 class="card-title">{{ call .tr "available" }}</h4>
              <hr>
              <p class="card-text">{{ call .tr "notYetLinked" .address}}</p>
            </div>
            <form id="regform">
              <input id="methodInput" type="hidden" name="method" value="{{.method}}">
              <input id="addrInput" type="hidden" name="address" value="{{.address}}">
              <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                  <div class="input-group mb-3">
                    <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>-->
                    <input id="uriInput" name="target_uri" type="text" class="form-control" placeholder="{{ call .tr "talerMailboxAddressExample" }}" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                    <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "linkIt" }}">
                  </div>
                </div>
              </div>
            </form>
            {{else}}
            <div class="card-body" role="alert">
              <h4 class="card-title">{{ call .tr "lookupResultFound" }}</h4>
              <hr>
              <p class="card-text">{{ call .tr "isLinked" .address }}</p>
            </div>
            <form id="regform">
              <input id="methodInput" type="hidden" name="method" value="{{.method}}">
              <input id="addrInput" type="hidden" name="address" value="{{.address}}">
              <input id="uriInput" type="hidden" name="target_uri" value="">
              <div class="row">
                <div class="col-lg-6 offset-lg-3 text-center">
                  <div class="input-group mb-3">
                    <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>-->
                    <input disabled="disabled" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" value="{{.result}}">
                    <input class="input-group-text btn btn-outline-danger" type="submit" value="{{ call .tr "deleteIt" }}">
                  </div>
                </div>
              </div>
            </form>
            {{end}}
          </div>
        </div>
       </div>
      </div>
      {{ template "footer.html" . }}
  </body>
  <script>
    var form = document.getElementById('regform');
    form.onsubmit = function(event){
      var xhr = new XMLHttpRequest();
      var data = new FormData(form);
      var method = data.get("method");
      var addr = data.get("address");
      data.delete("method");
      xhr.open('POST','/register/' + method) // FIXME method
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      var json = JSON.stringify(Object.fromEntries(data));
      json["duration"] = 1000000000
      xhr.send(json);

      xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
          form.reset(); //reset form after AJAX success.
          var ebanner = document.getElementById('ebanner');
          var sbanner = document.getElementById('sbanner');
          if (xhr.status == 202) {
            sbanner.hidden = false;
            ebanner.hidden = true;
          } else {
            var jsonResponse = JSON.parse(xhr.responseText);
            document.getElementById('ebanner-text').innerHTML = jsonResponse.hint;
            sbanner.hidden = true;
            ebanner.hidden = false;
            // window.location.href = "/?error=Registration failed";
          }
        }
      }

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