{% extends 'base.html.twig' %}
{% form_theme registrationForm 'bootstrap_5_layout.html.twig' %}

{% block title %}{{ 'lang.register'|trans }}{% endblock %}

{% block navigation %}{% endblock %}

{% block body %}
<div class="min-h-screen flex">
    {# Левая часть — информационная панель #}
    <div class="hidden lg:flex lg:w-1/2 h-screen bg-gradient-to-br from-primary via-primary-dark to-primary relative overflow-hidden">
        {% include '_components/auth_left_panel.html.twig' with {
            lead_key: 'lang.authRegisterLead',
            lead2_key: 'lang.authRegisterLead2',
            benefits: ['lang.authRegisterBenefit1', 'lang.authRegisterBenefit2', 'lang.authRegisterBenefit3'],
            benefit_icons: ['fa-credit-card', 'fa-gift', 'fa-shield-alt'],
            cta_teaser_key: 'lang.alreadyHaveAccount',
            cta_label_key: 'lang.Login',
            cta_url: path('app_login'),
            cta_icon: 'fa-arrow-right'
        } %}
    </div>

    {# Правая часть - форма регистрации #}
    <div class="w-full lg:w-1/2 flex items-start justify-center bg-white p-8 lg:p-12 overflow-y-auto h-screen">
        <div class="w-full max-w-2xl">
            {# Заголовок: на десктопе — в правой части, на мобиле — с иконкой #}
            <div class="hidden lg:block mb-8">
                <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.register'|trans }}</h1>
                <p class="text-gray-600">{{ 'lang.createNewAccount'|trans }}</p>
            </div>
            <div class="lg:hidden text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-full mb-4">
                    <i class="fas fa-pencil-alt text-2xl text-white"></i>
                </div>
                <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.register'|trans }}</h1>
                <p class="text-gray-600">{{ 'lang.createNewAccount'|trans }}</p>
            </div>

                    {% for flash_error in app.flashes('verify_email_error') %}
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded mb-6">
                    <p class="text-red-700">{{ flash_error }}</p>
                </div>
                    {% endfor %}

            <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
                    {{ form_errors(registrationForm) }}

                {{ form_start(registrationForm, {'attr': {'class': 'space-y-6'}}) }}
                
                {# Основная информация #}
                <div class="space-y-6">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.basicInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.email, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.email, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.email) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.plainPassword, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.plainPassword) }}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.firstName, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.firstName, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.firstName) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.lastName, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.lastName, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.lastName) }}
                        </div>
                    </div>

                    <div>
                        {{ form_label(registrationForm.myPicture, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                        {{ form_widget(registrationForm.myPicture, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                        {{ form_errors(registrationForm.myPicture) }}
                    </div>

                    <div>
                        {{ form_label(registrationForm.headerBackground, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                        {{ form_widget(registrationForm.headerBackground, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                        {{ form_errors(registrationForm.headerBackground) }}
                    </div>
                </div>

                {# Рабочая информация #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.workInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.company, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.company, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.company) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.companyPosition, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.companyPosition, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.companyPosition) }}
                        </div>
                    </div>
                </div>

                {# Контактная информация #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.contactInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            {{ form_label(registrationForm.cellphone, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.cellphone, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.cellphone) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.phone, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.phone, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.phone) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.fax, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.fax, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.fax) }}
                        </div>
                    </div>
                </div>

                {# Адрес #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.address'|trans }}</h2>
                    
                    <div>
                        {{ form_label(registrationForm.street, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                        {{ form_widget(registrationForm.street, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                        {{ form_errors(registrationForm.street) }}
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            {{ form_label(registrationForm.zip, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.zip, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.zip) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.city, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.city, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.city) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.country, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.country, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.country) }}
                        </div>
                    </div>
                </div>

                {# Социальные сети #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.socialNetworks'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.myUrl, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.myUrl, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.myUrl) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlLinkedin, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlLinkedin, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlLinkedin) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlInstagram, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlInstagram, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlInstagram) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlFacebook, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlFacebook, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlFacebook) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlX, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlX, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlX) }}
                        </div>
                    </div>
                </div>

                {# Согласия #}
                <div class="space-y-4 pt-6 border-t border-gray-200">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 mt-1">
                            {{ form_widget(registrationForm.agreeTerms, {'attr': {'class': 'w-5 h-5 text-secondary border-gray-300 rounded focus:ring-secondary focus:ring-2'}}) }}
                        </div>
                        <div class="flex-1 flex items-center gap-2">
                            {{ form_label(registrationForm.agreeTerms, null, {'label_attr': {'class': 'text-sm text-gray-700'}}) }}
                            <a href="" target="_blank" class="text-secondary hover:text-secondary-light font-medium text-sm">{{ 'lang.show'|trans }}</a>
                        </div>
                    </div>
                    {{ form_errors(registrationForm.agreeTerms) }}
                    
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 mt-1">
                            {{ form_widget(registrationForm.agreeDataProtection, {'attr': {'class': 'w-5 h-5 text-secondary border-gray-300 rounded focus:ring-secondary focus:ring-2'}}) }}
                        </div>
                        <div class="flex-1 flex items-center gap-2">
                            {{ form_label(registrationForm.agreeDataProtection, null, {'label_attr': {'class': 'text-sm text-gray-700'}}) }}
                            <a href="https://cumas365.com/datenschutzerklarung/" target="_blank" class="text-secondary hover:text-secondary-light font-medium text-sm">{{ 'lang.show'|trans }}</a>
                        </div>
                    </div>
                    {{ form_errors(registrationForm.agreeDataProtection) }}
                </div>

                {# Кнопка отправки #}
                <div class="pt-6">
                    <button type="submit" 
                            id="submitBtn"
                            class="w-full py-2 px-4 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                        {{ 'lang.registerSend'|trans }}
                    </button>
                </div>

                {# Мобильная версия ссылки на вход #}
                <div class="lg:hidden text-center pt-6 border-t border-gray-200 mt-6">
                    <p class="text-sm text-gray-600 mb-2">{{ 'lang.alreadyHaveAccount'|trans }}</p>
                    <a href="{{ path('app_login') }}" 
                       class="inline-block text-sm text-secondary hover:text-secondary-light font-semibold">
                        {{ 'lang.Login'|trans }}
                    </a>
                </div>

                    {{ form_end(registrationForm) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}