{% extends "config/base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}{% if just_created %}Invite {{ user.username }}{% else %}Reset password for {{ user.username }}{% endif %} - Pychestrate Configuration{% endblock %}

{% block content %}
<div class="page-header">
    {% if just_created %}
    <h1>Invite {{ user.username }}</h1>
    <p>The account exists but has no password yet. Send the user the invite link below.</p>
    {% else %}
    <h1>Reset password: {{ user.username }}</h1>
    <p>Give {{ user.display_name or user.username }} a way back in: a single-use link, or a temporary password.</p>
    {% endif %}
</div>

{% if issued_link %}
<div class="card mb" data-role="issued-link" style="border-color: var(--pyc-color-on-success-surface); background: var(--pyc-color-success-surface);">
    <h2 class="h3">{% if issued_link.purpose == 'INVITE' %}Invite link{% else %}Password reset link{% endif %}</h2>
    <p class="strong">Shown once &mdash; copy it now and send it to {{ user.display_name or user.username }} (for example by chat or email). Pychestrate does not send email.</p>
    <div class="actions-row">
        <label class="visually-hidden" for="issued-link-url">Link</label>
        <input type="text" id="issued-link-url" class="form-control mono" readonly value="{{ issued_link.url }}" spellcheck="false" aria-describedby="issued-link-url-help">
        <button type="button" class="btn btn-secondary btn-sm" data-copy-target="issued-link-url">Copy link</button>
    </div>
    <p id="issued-link-url-help" class="form-text">
        It works once and expires {{ issued_link.expires_at | format_datetime('%Y-%m-%d %H:%M') }}.
        Creating another link cancels this one.
    </p>
</div>
{% endif %}

{{ ui.error_summary(errors, error_labels) }}
{% if problems %}
<div class="alert alert-error" role="alert">{{ problems | join(" ") }}</div>
{% endif %}

{% if is_self %}
<div class="card narrow">
    <p>This is your own account. Change your password on the <a href="{{ url_for('config.account_password') }}">Change password</a> page, which asks for your current password.</p>
</div>
{% elif user.status == 'inactive' %}
<div class="card narrow">
    <p>This account is deactivated. Reactivate it before resetting its password.</p>
</div>
{% else %}
<div class="card narrow mb">
    <h2 class="h3">{% if user.status == 'invited' %}Create a new invite link{% else %}Create a reset link{% endif %}</h2>
    <p class="muted small">
        The user opens the link and chooses their own password. It works once and
        expires after {% if user.status == 'invited' %}7 days{% else %}24 hours{% endif %}.
    </p>
    <form method="post" action="{{ url_for('config.user_password_link', user_id=user.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" class="btn btn-primary">
            {% if user.status == 'invited' %}Create invite link{% else %}Create reset link{% endif %}
        </button>
    </form>
</div>

<div class="card narrow">
    <h2 class="h3">Set a temporary password</h2>
    <p class="muted small">Tell the user this password yourself. Their open sessions are signed out.</p>
    <form method="post" action="{{ url_for('config.user_password', user_id=user.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="form-group">
            <label for="password">New password *</label>
            <input type="password" id="password" name="password" class="form-control" required
                   minlength="{{ password_min_length }}" maxlength="{{ password_max_length }}"
                   pattern="{{ password_pattern }}" title="{{ password_title }}"
                   autocomplete="new-password"{{ ui.invalid_attrs(errors, "password", "password-rules") }}>
            {{ ui.field_error(errors, "password") }}
            {% with password_input_id="password" %}
                {% include "config/_password_rules.html" %}
            {% endwith %}
        </div>
        <div class="form-group">
            <label for="password_confirm">Confirm password *</label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-control" required
                   minlength="{{ password_min_length }}" maxlength="{{ password_max_length }}" autocomplete="new-password"{{ ui.invalid_attrs(errors, "password_confirm") }}>
            {{ ui.field_error(errors, "password_confirm") }}
        </div>
        <div class="form-group">
            <label class="regular">
                <input type="checkbox" name="must_change" value="1" checked>
                Require a new password at next sign-in
            </label>
        </div>
        <button type="submit" class="btn btn-secondary">Set password</button>
    </form>
</div>
{% endif %}

<div class="actions-row mt">
    <a href="{{ url_for('config.user_detail', user_id=user.id) }}" class="btn btn-secondary">{{ ui.icon("arrow_back") }} Back to {{ user.username }}</a>
</div>
{% endblock %}

{% block extra_js %}
<script nonce="{{ csp_nonce() }}">
    (function () {
        document.addEventListener("click", function (event) {
            var target = event.target;
            if (target === null || typeof target.closest !== "function") {
                return;
            }
            var button = target.closest("[data-copy-target]");
            if (button === null) {
                return;
            }
            var input = document.getElementById(button.getAttribute("data-copy-target"));
            if (input === null) {
                return;
            }
            function copied() {
                button.textContent = "Copied";
            }
            if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
                navigator.clipboard.writeText(input.value).then(copied, function () {
                    input.select();
                });
                return;
            }
            input.select();
            try {
                document.execCommand("copy");
                copied();
            } catch (error) {
                return;
            }
        });
    })();
</script>
{% endblock %}