{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.create_user'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-person-plus-fill me-3"></i>
                                {{ 'admin.create_user'|trans }}
                            </h2>
                            <p class="text-muted mb-0">{{ 'admin.create_user_description'|trans }}</p>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg" onclick="document.getElementById('form').requestSubmit()">
                            <i class="bi bi-check-circle me-2"></i>
                            {{ 'admin.save'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'id': 'form'}}) }}
        
        <div class="row g-4">
            <!-- Profile Image Preview -->
            <div class="col-12 col-lg-4">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-image me-2"></i>
                        {{ 'form.user.profile_image_preview'|trans }}
                    </h4>
                    
                    <div class="text-center">
                        <div class="profile-image-preview mb-4">
                            <div class="default-avatar" style="width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, #3B82F6, #1D4ED8); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; font-weight: bold; margin: 0 auto; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);">
                                <i class="bi bi-person-plus"></i>
                            </div>
                        </div>
                        
                        <div class="profile-info">
                            <h5 class="fw-bold mb-2">{{ 'admin.create_user'|trans }}</h5>
                            <p class="text-muted mb-3">{{ 'form.user.profile_image_help'|trans }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Basic Information -->
            <div class="col-12 col-lg-8">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {{ 'form.user.user_information'|trans }}
                    </h4>
                    
                    <div class="row g-4">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ form_label(form.username, 'form.user.username', {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                                {{ form_widget(form.username, {'attr': {'class': 'form-control form-control-lg', 'placeholder': 'form.user.username_placeholder'}}) }}
                                <div class="form-text">
                                    <i class="bi bi-info-circle me-1"></i>
                                    {{ 'form.user.username_help'|trans }}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ form_label(form.email, 'form.user.email', {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                                {{ form_widget(form.email, {'attr': {'class': 'form-control form-control-lg', 'placeholder': 'form.user.email_placeholder'}}) }}
                                <div class="form-text">
                                    <i class="bi bi-envelope me-1"></i>
                                    {{ 'form.user.email_help'|trans }}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ form_label(form.password, 'form.user.password', {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                                {{ form_widget(form.password, {'attr': {'class': 'form-control form-control-lg', 'placeholder': 'form.user.password_placeholder'}}) }}
                                <div class="form-text">
                                    <i class="bi bi-shield-lock me-1"></i>
                                    {{ 'form.user.password_min_help_invite'|trans }}
                                </div>
                            </div>
                        </div>
                        {% if form.sendInvitationEmail is defined %}
                        <div class="col-12">
                            <div class="form-switch p-3 border rounded bg-light">
                                {{ form_widget(form.sendInvitationEmail) }}
                                {{ form_label(form.sendInvitationEmail, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                <div class="form-text small ms-4">{{ 'form.user.send_invitation_email_help'|trans }}</div>
                            </div>
                        </div>
                        {% endif %}
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ form_label(form.profileImage, 'form.user.profile_picture', {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                                {{ form_widget(form.profileImage, {'attr': {'class': 'form-control form-control-lg profile-image-input'}}) }}
                                <div class="form-text">
                                    <i class="bi bi-image me-1"></i>
                                    {{ 'form.user.profile_image_help'|trans }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Roles & Permissions -->
                <div class="admin-card p-4 mt-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-shield-check me-2"></i>
                        {{ 'form.user.roles_permissions'|trans }}
                    </h4>
                    
                    <div class="roles-section">
                        <div class="d-flex justify-content-between align-items-center mb-4" style="cursor: pointer" data-bs-toggle="collapse" data-bs-target="#rolesCollapse" onclick="toggleIcon('roles-icon', 'bi-chevron-down', 'bi-chevron-up');">
                            <div>
                                <span class="fw-semibold fs-5">{{ 'form.user.user_roles'|trans }}</span>
                                <div class="text-muted small">{{ 'form.user.roles_description'|trans }}</div>
                            </div>
                            <i id="roles-icon" class="bi bi-chevron-up fs-4"></i>
                        </div>
                        <div class="collapse show" id="rolesCollapse">
                            <div class="roles-container">
                                {% for child in form.rolesNew %}
                                    {% set roleName = child.vars.label %}
                                    {% if roleName == 'Benutzer' or roleName == 'ROLE_USER' %}
                                        <div class="form-check role-item p-3 border rounded mb-2 bg-light">
                                            {{ form_widget(child, {'attr': {'checked': true, 'disabled': true, 'class': 'form-check-input'}}) }}
                                            {{ form_label(child, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                            <div class="text-muted small mt-1">
                                                <i class="bi bi-check-circle me-1"></i>
                                                {{ 'form.user.default_role_help'|trans }}
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="form-check role-item p-3 border rounded mb-2">
                                            {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                            {{ form_label(child, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Custom Fields Tabs -->
        {% import 'administration/custom_fields/tabs.html.twig' as customFields %}
        {{ customFields.custom_field_tabs(form, 'user', null) }}
        

        <!-- Save Button -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="admin-card p-4 text-center">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-check-circle me-2"></i>
                        {{ 'admin.save'|trans }}
                    </button>
                    <a href="{{ path('admin_users') }}" class="btn btn-outline-secondary btn-lg ms-2">
                        <i class="bi bi-arrow-left me-2"></i>
                        {{ 'admin.cancel'|trans }}
                    </a>
                </div>
            </div>
        </div>

        {{ form_end(form) }}
    </div>



    <script>
        function toggleIcon(iconId, class1, class2) {
            const icon = document.getElementById(iconId);
            if (icon.classList.contains(class1)) {
                icon.classList.remove(class1);
                icon.classList.add(class2);
            } else {
                icon.classList.remove(class2);
                icon.classList.add(class1);
            }
        }
    </script>
{% endblock %}