{% extends "layout.html" %} {% block content %}
  <main class="container mt-4">
    <div class="row justify-content-center">
      <!-- action is empty string so that we post back to our current route -->
      <form class="col-md-6" action="" method="post">
        <!-- hidden tag helps protect against CSRF (by using CSRF token) -->
        {{ form.hidden_tag() }}
        <fieldset class="bg-white rounded shadow border">
          <div class="text-center h3 primary-colour m-2 pb-2 border-bottom">Reset Password</div>
          <div class="p-3">
            <section class="form-group">
              {{ form.password.label(class="primary-colour") }}
              {% if form.password.errors %}
                {{ form.password(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.password.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                  {{ form.password(class="form-control", placeholder="Enter password") }}
              {% endif %}
            </section>
            <section class="form-group">
              {{ form.password2.label(class="primary-colour") }}
              {% if form.password2.errors %}
                {{ form.password2(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.password2.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                  {{ form.password2(class="form-control", placeholder="Enter password") }}
              {% endif %}
            </section>
            <section class="d-flex justify-content-between">
              <a class="btn btn-secondary" href="{{ url_for('main.index') }}" title="Cancel and return to landing page">Cancel</a>
              {{ form.submit(class="btn btn-primary") }}
            </section>
          </div>
        </fieldset>
      </form>
    </div>
  </main>
{% endblock content %}