{% extends 'layouts/admin.html' %}

{% block main %}
    <div class="admin-page-header">
        <div>
            <p class="eyebrow">Access Control</p>
            <h1 class="h2 mb-1">{{ title }}</h1>
            <p class="text-secondary mb-0">Configure account identity, permissions, and password access.</p>
        </div>
        <a class="btn btn-outline-secondary" href="{{ url_for('admin_users.list_users') }}">Back to users</a>
    </div>

    <form method="post" action="{{ form_action }}" novalidate>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="row g-3">
            <div class="col-lg-8">
                <section class="card">
                    <div class="card-body">
                        <h2 class="h5 mb-3">Account</h2>
                        <div class="mb-3">
                            <label class="form-label" for="userUsername">Username</label>
                            <input id="userUsername"
                                   class="form-control {% if errors.get('username') %}is-invalid{% endif %}"
                                   type="text"
                                   name="username"
                                   value="{{ user.username or '' }}"
                                   autocomplete="username"
                                   required>
                            {% if errors.get('username') %}
                                <div class="invalid-feedback">{{ errors.username }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="userEmail">Email</label>
                            <input id="userEmail"
                                   class="form-control {% if errors.get('email') %}is-invalid{% endif %}"
                                   type="email"
                                   name="email"
                                   value="{{ user.email or '' }}"
                                   autocomplete="email"
                                   required>
                            {% if errors.get('email') %}
                                <div class="invalid-feedback">{{ errors.email }}</div>
                            {% endif %}
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="userPassword">
                                    Password{% if not password_required %} <span class="text-secondary fw-normal">(optional)</span>{% endif %}
                                </label>
                                <input id="userPassword"
                                       class="form-control {% if errors.get('password') %}is-invalid{% endif %}"
                                       type="password"
                                       name="password"
                                       autocomplete="new-password"
                                       {% if password_required %}required{% endif %}>
                                {% if errors.get('password') %}
                                    <div class="invalid-feedback">{{ errors.password }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="userConfirmPassword">Confirm password</label>
                                <input id="userConfirmPassword"
                                       class="form-control {% if errors.get('confirm_password') %}is-invalid{% endif %}"
                                       type="password"
                                       name="confirm_password"
                                       autocomplete="new-password"
                                       {% if password_required %}required{% endif %}>
                                {% if errors.get('confirm_password') %}
                                    <div class="invalid-feedback">{{ errors.confirm_password }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="col-lg-4">
                <section class="card mb-3">
                    <div class="card-body">
                        <h2 class="h5 mb-3">Permissions</h2>
                        <div class="mb-3">
                            <label class="form-label" for="userRole">Role</label>
                            <select id="userRole"
                                    class="form-select {% if errors.get('role') %}is-invalid{% endif %}"
                                    name="role">
                                {% for value, label in user_roles.items() %}
                                    <option value="{{ value }}" {% if user.role == value %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                            {% if errors.get('role') %}
                                <div class="invalid-feedback">{{ errors.role }}</div>
                            {% endif %}
                        </div>

                        <div class="form-check form-switch">
                            <input id="userActive" class="form-check-input" type="checkbox" name="active" {% if user.active %}checked{% endif %}>
                            <label class="form-check-label" for="userActive">Active account</label>
                        </div>
                    </div>
                </section>

                <div class="d-grid gap-2">
                    <button class="btn btn-primary" type="submit">{{ submit_label }}</button>
                    <a class="btn btn-outline-secondary" href="{{ url_for('admin_users.list_users') }}">Cancel</a>
                </div>
            </div>
        </div>
    </form>
{% endblock %}