{% extends "profile_base.html" %}

{% set profile_security_active = "password" %}
{% block profile_content %}
  <div class="row">
    <div class="col-12 col-lg-5">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
            {"name": "Password"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-0">Password</h1>
        </div>
      </div>
      {% include "partials/flash.html" %}
      <div class="card shadow-sm">
        <div class="card-body">
          <form method="post" action="/profile/password" autocomplete="off">
            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
            <div class="row">
              <div class="col-12">
                <div class="mb-3">
                  <label class="form-label" for="profile-password">New password</label>
                  <input
                    class="form-control"
                    id="profile-password"
                    name="password"
                    type="password"
                    autocomplete="new-password"
                    required
                  >
                  <div class="form-text">Choose a strong password you do not reuse elsewhere.</div>
                </div>
                <div>
                  <label class="form-label" for="profile-password-confirm">Confirm password</label>
                  <input
                    class="form-control"
                    id="profile-password-confirm"
                    name="password_confirm"
                    type="password"
                    autocomplete="new-password"
                    required
                  >
                  <div class="form-text">Re-enter the new password to confirm it.</div>
                </div>
              </div>
            </div>
            <div class="mt-4">
              {% with primary_label="Save changes", cancel_href="/profile" %}
                {% include "partials/form_actions.html" %}
              {% endwith %}
            </div>
          </form>
        </div>
      </div>
{% endblock %}