<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  {% set title = 'Forgot password' %}
  {% if handler.signup and handler.signup.key in handler.args %}
    {% set title = 'User added' %}
  {% end %}
  <title>{{ title }}</title>
  <style>
  * { box-sizing: border-box; }
  body { margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  html { width: 100%; height: 100%; overflow: hidden; }
  body {
    font-size: 18px;
    width: 18em;
    color: #fff;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
  }
  a { color: inherit; }
  .alert { background-color: #fee; color: #000; padding: 10px 0.5em 5px 0.5em; }
  label, input, button { font: inherit; }
  input { padding: 0 5px; }
  button, input { display: block; width: 100%; margin: 0.5em 0; }
  </style>
</head>
<body>
  <h1>{{ title }}</h1>

  {% if error %}
    <div class="alert">
      <h2>Error logging in</h2>
      <p><strong>code</strong> {{ error['code'] }}</p>
      <p><strong>error</strong> {{ error['error'] }}</p>
    </div>
  {% end %}

  {% set token = handler.get_arg('forgot', None) %}
  {% if not token %}

    {# Step 1: User clicks on forgot password link #}
    {% if handler.request.method == 'GET' %}
      <p>Fill in your user ID or email and we'll send a reset password link.</p>
      <form method="POST">
        <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
        <input name="user" placeholder="Your username">
        <span class="or">OR</span>
        <input name="email" placeholder="Your email">
        <button type="submit">Send reset password email</button>
      </form>

    {# Step 2: User submitted username / password #}
    {% else %}
      {% if not error %}
        <p>We sent a reset password email to <code>{{ handler.get_arg(handler.forgot.arg, None) or handler.get_arg(handler.user.arg, None) }}</code></p>
      {% else %}
        <p>Back to the <a href="?{{ kwargs.forgot.key }}">forgot password page</a>.</p>
      {% end %}
    {% end %}

  {% else %}
    {# Step 3: User clicks on reset password link #}
    {% if handler.request.method == 'GET' %}
      <form method="POST">
        <p>Select your new password.</p>
        <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
        <input name="password" type="password" placeholder="password">
        <!-- TODO: add a confirm password check -->
        <button type="submit">Change password</button>
      </form>

    {# Step 4: User submits a new password #}
    {% else %}
      {% if not error %}
        <p>Your password has been reset. Please <a href="{{ handler.request.path }}">log in</a> with your new password.</p>
      {% else %}
        {# We've already displayed the error message on top. Optionally, add any other message for errors. #}
      {% end %}
    {% end %}
  {% end %}

</body>
</html>
