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

{% block title %}Create User - Pychestrate Configuration{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Create User</h1>
    <p>Add a new user account to the system</p>
</div>

<div class="card narrow">
    <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        {{ ui.error_summary(errors, error_labels) }}

        <div class="form-group">
            <label for="username">Username *</label>
            <input type="text" id="username" name="username" class="form-control" required
                   value="{{ form_data.username if form_data else '' }}"
                   pattern="[a-zA-Z0-9][a-zA-Z0-9_\-]{2,63}" title="3 to 64 characters: letters, digits, underscores and hyphens, starting with a letter or digit."{{ ui.invalid_attrs(errors, 'username', 'username-help') }}>
            <p class="form-text" id="username-help">3-64 characters, alphanumeric, underscores, and hyphens only</p>
            {{ ui.field_error(errors, 'username') }}
        </div>
        
        <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" class="form-control" required
                   value="{{ form_data.email if form_data else '' }}"{{ ui.invalid_attrs(errors, 'email') }}>
            {{ ui.field_error(errors, 'email') }}
        </div>
        
        <fieldset class="form-group" aria-describedby="invite-note">
            <legend>Password *</legend>
            <label class="regular">
                <input type="radio" name="password_setup" value="password"
                       {% if not form_data or form_data.password_setup != 'invite' %}checked{% endif %}>
                Set a password now
            </label>
            <label class="regular">
                <input type="radio" name="password_setup" value="invite"
                       {% if form_data and form_data.password_setup == 'invite' %}checked{% endif %}>
                Create an invite link &mdash; the user chooses their own password
            </label>
            <p class="form-text" id="invite-note">Pychestrate does not send email: you copy the invite link and send it to the user.</p>
        </fieldset>

        <div class="form-group" data-role="password-fields">
            <label for="password">Password *</label>
            <div class="actions-row">
                <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') }}>
                <button type="button" class="btn btn-secondary btn-sm" data-reveal-for="password" aria-pressed="false" aria-controls="password">Show</button>
            </div>
            {{ ui.field_error(errors, 'password') }}
            {% with password_input_id="password" %}
                {% include "config/_password_rules.html" %}
            {% endwith %}
        </div>
        
        <div class="form-group">
            <label for="display_name">Display Name *</label>
            <input type="text" id="display_name" name="display_name" class="form-control" required maxlength="100"
                   value="{{ form_data.display_name if form_data else '' }}"{{ ui.invalid_attrs(errors, 'display_name') }}>
            {{ ui.field_error(errors, 'display_name') }}
        </div>
        
        <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" name="firstname" class="form-control"
                   value="{{ form_data.firstname if form_data else '' }}">
        </div>
        
        <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" class="form-control"
                   value="{{ form_data.lastname if form_data else '' }}">
        </div>
        
        {% if roles %}
        <div class="form-group">
            <label>Roles</label>
            {% for role in roles %}
            <div class="my-sm">
                <label class="regular">
                    <input type="checkbox" name="role_names" value="{{ role.name }}"
                           {% if form_data and role.name in form_data.getlist('role_names') %}checked{% endif %}>
                    {{ role.name }}
                    {% if role.description %}<span class="muted"> - {{ role.description }}</span>{% endif %}
                </label>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        
        <div class="actions-row">
            <button type="submit" class="btn btn-primary">
                {{ ui.icon("save") }} Create User
            </button>
            <a href="{{ url_for('config.user_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script nonce="{{ csp_nonce() }}">
    // Invite mode needs no password: hide the field and drop its
    // browser-side requirements (the server checks either way).
    (function () {
        var fields = document.querySelector("[data-role='password-fields']");
        var input = document.getElementById("password");
        if (fields === null || input === null) {
            return;
        }
        var pattern = input.getAttribute("pattern");
        function update() {
            var chosen = document.querySelector("input[name='password_setup']:checked");
            var invite = chosen !== null && chosen.value === "invite";
            fields.hidden = invite;
            input.required = !invite;
            if (invite) {
                input.removeAttribute("pattern");
                input.value = "";
            } else if (pattern !== null) {
                input.setAttribute("pattern", pattern);
            }
        }
        var radios = document.querySelectorAll("input[name='password_setup']");
        for (var index = 0; index < radios.length; index++) {
            radios[index].addEventListener("change", update);
        }
        update();
    })();
</script>
{% endblock %}