{% extends 'base_auth.html.twig' %}

{% block title %}Register{% endblock %}

{% block body %}
    <div class="bg-gradient-to-br from-[#6B6FD3] via-indigo-400 to-indigo-500 h-[100vh]">
        <div class="sticky top-0 z-40 h-[5vh]">
            <div class="flex justify-between items-center max-w-7xl mx-auto py-3 px-4">
                <a href="/">
                    <img src="images/logo/logo-exterieur.png" width="180px"/>
                </a>
                <div>
                    <ul class="flex items-center space-x-3">
                        <a href="{{ path('app_login') }}" class="hidden sm:block px-3 text-white cursor-pointer border-b border-transparent hover:border-gray-200 duration-500">
                            <span>{% trans %}Se connecter{% endtrans %}</span>
                        </a>
                        <li class="group duration-500 px-3 py-2 rounded-md relative cursor-pointer text-white">
                            <a class="flex space-x-3 items-center"> 
                                {% for locale in locales %}
                                    {% if locale == app.request.locale %}
                                        <img src="/images/logo/{{ locale }}.png" class="w-6 h-6"/>
                                        <span class="text-white uppercase">{{ locale }}</span>
                                    {% endif %}
                                {% endfor %} 
                            </a>
                            <div class="py-4 absolute hidden  duration-500 group-hover:block">
                                <ul class="py-3 bg-white shadow-md rounded-md text-gray-700 w-[120px]">
                                    <li>
                                        <a href="{{ path('app_switch_langue', {'locale' : 'fr'}) }}" class="hover:bg-gray-200 px-2 py-2 flex items-center space-x-3">
                                            <img src="/images/logo/fr.png" class="w-6 h-6"/>
                                            <span>French</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ path('app_switch_langue', {'locale' : 'en'}) }}" class="hover:bg-gray-200 px-2 py-2 flex items-center space-x-3">
                                            <img src="/images/logo/en.png" class="w-6 h-6"/>
                                            <span>English</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="flex justify-center items-center h-[95vh] px-4 md:px-0">
            <div method="post">
                <div class="p-4 shadow-lg rounded-lg bg-white sm:w-[500px] min-w-[400px]">
                    <div>
                        {{ form_errors(registrationForm) }}
                            {{ form_start(registrationForm, {'attr': {'id': 'registration-form'}}) }}
                                    {% for message in app.flashes('error') %}
                                        {{ message }}
                                    {% endfor %}


                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                    <h1 class="text-center mb-3 text-2xl">{% trans %}CREER UN COMPTE{% endtrans %}</h1>
                                    <p class="text-sm text-center mb-3">{% trans %}Vous y êtes presque !{% endtrans %}</p>
                                        {{ form_start(registrationForm, {'attr': {'id': 'registration-form'}}) }}
                                        {{ form_row(registrationForm.email) }}
                                        {{ form_row(registrationForm.firstname) }}
                                        {{ form_row(registrationForm.lastname) }}
                                        {{ form_row(registrationForm.country) }}
                                        {{ form_row(registrationForm.plainPassword) }}
                            
                                    <div class="mt-4 py-5 flex space-x-3 items-center border-t">
                                        <span>{% trans %}Déjà un compte ?{% endtrans %}</span>
                                        <a href="{{ path('app_login') }}" class="text-blue-500 font-semibold">{% trans %}Se connecter{% endtrans %}</a>
                                    </div>
                                    <div class="py-5 border-t">
                                        <button type="submit" class="transition-colors duration-300 border-2 border-invisible hover:border-indigo-400 px-3 rounded-md text-center h-10 cursor-pointer text-white w-full bg-gradient-to-br from-[#6B6FD3] via-indigo-400 to-indigo-500">
                                        {% trans %}S'inscrire{% endtrans %}
                                        </button>
                                    </div>
                            {{ form_end(registrationForm) }}
                    </div>
                </div>
                <div class="text-center pt-10">
                    <p class="text-white">Copyright &copy; EBS-CE ACADEMY 2023</p>
                </div>
            </div>
        </div>
    </div>    
{% endblock %}