{% extends "skeleton.html" %}


{% block layout %}
<div class="container">
  <div class="jumbotron mt-5">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div class="alert alert-{{ category }}">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        &times;
      </button>
      {{ message }}
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}
    <h1 class="display-4">Request Password Reset</h1>
    <p class="lead">Mortimer - A web Interface for deploying and managing alfred experiments.</p>
    <hr class="my-4">
    <form method="POST" action="" class="needs-validation" novalidate>
      {{ form.hidden_tag() }}
      <fieldset class="form-group">

        <div class="form-group">
          {{ form.email.label(class="form-control-label") }}
          {% if form.email.errors %}
          {{ form.email(class="form-control form-control-lg is-invalid") }}

          <div class="invalid-feedback">
            {% for error in form.email.errors %}
            <span>{{ error }}</span>
            {% endfor %}
          </div>

          {% else %}
          {{ form.email(class="form-control form-control-lg") }}
          {% endif %}
        </div>

      </fieldset>
      <div class="form-group">
        {{ form.submit(class="btn btn-outline-primary")}}
      </div>
    </form>
    <hr class="my-4">
    <div class="">
      <small class="text-muted">
        Need An Account? <a class="ml-2" href="{{ url_for('users.register') }}">Sign Up Now</a>
      </small>
    </div>
  </div>
  <div class="text-center">
    <a href="#" class="mr-2">Impressum</a>
    <a href="https://github.com/ctreffe/mortimer" class="mr-2">Mortimer on Github</a>
    <a href="https://github.com/ctreffe/alfred">Alfred on Github</a>
  </div>
</div>
{% endblock %}


<script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function () {
    'use strict';
    window.addEventListener('load', function () {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>