{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm mb-3">
        {% with staff_nav_active="users" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": "Staff", "href": "/staff"},
            {"name": "Users", "href": "/staff/users"},
            {"name": user.name | display_name(user.username), "href": "/staff/users/" ~ user.uuid},
            {"name": "Security", "href": "/staff/users/" ~ user.uuid ~ "/tokens"},
            {"name": "Change password"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-0">{{ user.name | display_name(user.username) }}</h1>
        </div>
      </div>
      {% with staff_user_tabs_base="/staff/users/" ~ user.uuid, staff_user_tabs_active="security" %}
        {% include "partials/staff_user_tabs.html" %}
      {% endwith %}
      {% include "partials/flash.html" %}
      <div class="row">
        <div class="col-12 col-lg-5">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                <h2 class="h5 mb-0">Change password</h2>
              </div>
              <form method="post" action="/staff/users/{{ user.uuid }}/password" autocomplete="off">
                <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
                <div class="mb-3">
                  <label class="form-label" for="staff-user-password">New password</label>
                  <input
                    class="form-control"
                    id="staff-user-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="staff-user-password-confirm">Confirm password</label>
                  <input
                    class="form-control"
                    id="staff-user-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 class="mt-4">
                  {% with
                    primary_label="Save changes",
                    cancel_href_prefix="/staff/users/",
                    cancel_href_value=user.uuid,
                    cancel_href_suffix="/tokens"
                  %}
                    {% include "partials/form_actions.html" %}
                  {% endwith %}
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}