{% extends 'base.html' %}

{% block content %}
  {# copied from https://www.freecodecamp.org/news/how-to-setup-user-authentication-in-flask/ #}
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <main class="form-signin w-100 m-auto">
          <form role="form" method="post" action="">
            {{ form.csrf_token }}
            <h1 class="h3 mb-3 fw-normal text-center">{{_('Password change')}}</h1>
            <div class="mb-3">
              {{ form.old_password.label }}
              {{ form.old_password(placeholder="old password or leave empty", class="form-control mb-2") }}
                {% if form.old_password.errors %}
                  {% for error in form.old_password.errors %}
                    <div class="alert alert-danger" role="alert">
                      {{ error }}
                    </div>
                  {% endfor %}
                {% endif %}
            </div>
            <div class="mb-3">
              {{ form.new_password.label }}
              {{ form.new_password(placeholder="new password", class="form-control mb-2") }}
                {% if form.new_password.errors %}
                  {% for error in form.new_password.errors %}
                    <div class="alert alert-danger" role="alert">
                      {{ error }}
                    </div>
                  {% endfor %}
                {% endif %}
            </div>
            <div class="mb-3">
              {{ form.confirm.label }}
              {{ form.confirm(placeholder="Confirm Password", class="form-control mb-2") }}
                {% if form.confirm.errors %}
                  {% for error in form.confirm.errors %}
                    <div class="alert alert-danger" role="alert">
                      {{ error }}
                    </div>
                  {% endfor %}
                {% endif %}
            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit">{{_('Change the password')}}</button>
          </form>
        </main>
      </div>
      <div class="col-md-4"></div>
    </div>
{% endblock %}