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

{% block title %}Log in!{% 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_register') }}" class="hidden sm:block px-3 text-white cursor-pointer border-b border-transparent hover:border-gray-200 duration-500">
                            <span>S'inscrire</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">French</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">
            <form method="post">
                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="p-4 rounded-md shadow-md bg-{{label}}-100 flex justify-between items-center">
                            <div class="text-{{label}}-500">
                                {{ message|raw }}
                            </div>
                            <button class="text-xl">x</button>
                        </div>
                        </br>
                    {% endfor %}
                {% endfor %}
                <div class="p-4 shadow-lg rounded-lg bg-white sm:w-[500px] min-w-[400px]">
                    {% if error %}
                        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                    {% endif %}
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <h2 class="text-center font-semibold text-2xl mb-3 mt-3">Se connecter</h2>
                    <p class="text-sm text-center">Connectez-vous pour continuer</p>
                    <div class="mt-4 flex flex-col">
                        <div class="flex items-center relative">
                            <input id="email" class="px-2 border border-gray-300 h-10 outline-none w-full" placeholder="Adresse email" type="email" value="{{ last_username }}" name="email" id="inputEmail" autocomplete="email" required autofocus placeholder="{% trans %}Email{% endtrans %}">
                        </div>
                    </div>

                    <div class="mt-4 flex flex-col">
                        <div class="flex items-center relative">
                            <input id="password" class="px-2 border border-gray-300 h-10 outline-none w-full" placeholder="Mot de passe" type="password" name="password">
                        </div>
                    </div>
                    <div class="flex justify-between items-center py-5 text-sm">
                        <div class="flex flex-row space-x-3 items-center">
                            <input type="checkbox" name="_remember_me"/>
                            <span>Se souvenir de moi</span>
                        </div>
                        <a href="{{ path('app_recover') }}">Mot de passe oublié ?</a>
                    </div>
                    <div class="flex items-center justify-between pb-5">
                        <input 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" 
                        value="Se connecter">
                    </div>

                    <div class="mt-4 py-5 flex space-x-3 items-center border-t text-sm">
                        <span>Pas encore membre ?</span>
                        <a href="{{ path('app_register') }}" class="text-blue-500 font-semibold">S'inscrire</a>
                    </div>
                </div>
                <div class="text-center pt-10">
                    <p class="text-white">Copyright &copy; EBS-CE ACADEMY 2023</p>
                </div>
            </form>
        </div>
    </div>
{% endblock %}