{% extends "base.html" %}
{% load django_bootstrap5 %}
{% load i18n %}

{% block title %}{% trans "Change Password" %}{% endblock %}

{% block page_heading %}{% trans "Change Password" %}{% endblock page_heading %}

{% block content %}
{# an administrator sets another user's password, or takes it away (sign-in by LDAP, for one) #}
<form id="password-change" method="post">
    {% csrf_token %}
    {% bootstrap_form_errors form type="non_fields" %}

    <section class="form-section">
        <div class="row g-3">
            <div class="col-lg-3">
                <h2 class="h6 fw-semibold mb-1 text-break">{{ edited_user.username }}</h2>
                <p class="small text-body-secondary mb-0">{% trans "How the user signs in." %}</p>
            </div>
            <div class="col-lg-9 form-section-fields">
                {% trans "Signs in with the password set here." as with_help %}
                {% trans "Signs in another way, such as LDAP. The current password is removed." as without_help %}
                <div class="row row-cols-1 row-cols-md-2 g-2 mb-3" role="radiogroup" aria-label="{% trans "How the user signs in." %}">
                    {% for choice in form.usable_password %}
                    <div class="col">
                        <label class="form-choice border rounded p-3 d-flex gap-2 h-100">
                            <input class="form-check-input flex-shrink-0 mt-1" type="radio" name="usable_password" value="{{ choice.data.value }}"{% if choice.data.selected %} checked{% endif %}>
                            <span><span class="d-block fw-semibold">{{ choice.choice_label }}</span>
                                <span class="small text-body-secondary">{% if choice.data.value == "true" %}{{ with_help }}{% else %}{{ without_help }}{% endif %}</span></span>
                        </label>
                    </div>
                    {% endfor %}
                </div>
                {# hidden while Without a password is chosen (webvirtcloud.css) #}
                <div class="with-password">
                    <div class="row g-3">
                        <div class="col-sm-6">{% bootstrap_field form.password1 %}</div>
                        <div class="col-sm-6">{% bootstrap_field form.password2 show_help=False %}</div>
                    </div>
                    {% bootstrap_field form.must_change_password %}
                </div>
            </div>
        </div>
    </section>

    <div class="form-section d-flex justify-content-end gap-2">
        <a class="btn btn-outline-secondary" href="{% url 'admin:user_update' edited_user.id %}">{% trans "Cancel" %}</a>
        <button type="submit" class="btn btn-primary">{% trans "Change password" %}</button>
    </div>
</form>
{% endblock content %}