{{ template "header.html" }}

<div class="panel">

  {{ if .Success }}
    <h2 class="heading">Your password has been reset</h2>
  {{ else }}
    {{ $lenError := len .Error }}
    {{ $hasError := ne $lenError 0 }}

    {{ if .DontShowForm }}
      {{ if $hasError }}
        <div class="heading">{{ .Error }}</div>
        <div class="error-box">{{ .Message }}</div>
      {{ end }}
    {{ else }}
      <h2 class="heading">Reset your password</h2>
      <form onsubmit="return validate();" id="resetPasswordForm" method="POST" action="/reset-password">
        <div class="form-row">
          <div class="input-desc">
            <label for="password">New Password</label>
          </div>
          <input minlength="6" required class="input-box" type="password" id="password" name="password" value="" autofocus />
        </div>
        <div class="form-row">
          <div class="input-desc">
            <label for="password-confirm">Confirm New Password</label>
          </div>
          <input minlength="6" required class="input-box" type="password" id="password-confirm" name="password-confirm" />
        </div>

        <div id="js-error" style="display: none;" class="error-box">Passwords do not match</div>
        {{ if $hasError }}
          <div class="form-row">
            <div class="error-box">{{ .Error }}</div>
            <div class="explain">{{ .Message }}</div>
          </div>
        {{ end }}

        <button type="submit" class="btn btn-tec">Reset</button>
        <input type="hidden" name="token" value="{{ .Token }}" />
      </form>
    {{ end }}
  {{ end }}

</div>

<script>
  function validate() {
    var p1 = document.getElementById('password'),
        p2 = document.getElementById('password-confirm'),
        valid = p1 && p2 && p1.value === p2.value;

    if (valid) {
      hideError();
    } else {
      showError();
    }
    return valid;
  }

  function hideError() {
    var e = document.getElementById('js-error');
    e.style.display = 'none';
  }

  function showError() {
    var e = document.getElementById('js-error');
    e.style.display = 'block';
  }

</script>

{{ template "footer.html" }}