{% extends "layouts/admin.twig" %}

{% block title %}{{ ta.new_user|default('Nieuwe gebruiker') }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h2 class="mb-0"><i class="bi bi-plus-circle"></i> {{ ta.new_user|default('Nieuwe gebruiker') }}</h2>
    <a href="/admin/users" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> {{ ta.back_to_users|default('Terug naar gebruikers') }}
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header">
                <i class="bi bi-person-plus"></i> {{ ta.add_user|default('Gebruiker toevoegen') }}
            </div>
            <div class="card-body">
                <form method="POST" action="/admin/users-new">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="add">
                    <div class="mb-3">
                        <label for="new_username" class="form-label">{{ ta.username|default('Gebruikersnaam') }}</label>
                        <input type="text" class="form-control" id="new_username" name="new_username" required autofocus>
                    </div>
                    <div class="mb-3">
                        <label for="new_password" class="form-label">{{ ta.password|default('Wachtwoord') }}</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8">
                        <small class="form-text text-muted">{{ ta.password_help|default('Minimaal 8 tekens.') }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="new_email" class="form-label">{{ ta.login_email|default('Login e-mail') }}</label>
                        <input type="email" class="form-control" id="new_email" name="new_email">
                    </div>
                    <div class="mb-3">
                        <label for="new_author_name" class="form-label">{{ ta.author_name|default('Auteur naam') }}</label>
                        <input type="text" class="form-control" id="new_author_name" name="new_author_name">
                    </div>
                    <div class="mb-3">
                        <label for="new_author_email" class="form-label">{{ ta.author_email|default('Auteur e-mail') }}</label>
                        <input type="email" class="form-control" id="new_author_email" name="new_author_email">
                    </div>
                    <div class="mb-3">
                        <label for="new_role" class="form-label">{{ ta.col_role|default('Rol') }}</label>
                        <select class="form-select" id="new_role" name="new_role">
                            {% for roleKey, roleLabel in roles %}
                            <option value="{{ roleKey }}" {{ roleKey == 'content-manager' ? 'selected' : '' }}>{{ roleLabel }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg"></i> {{ ta.add_user|default('Gebruiker toevoegen') }}
                        </button>
                        <a href="/admin/users" class="btn btn-outline-secondary">
                            {{ ta.cancel|default('Annuleren') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}