{% extends 'base.html.twig' %}
{% trans_default_domain 'home' %}

{% block body %}
  <div class="bg-gradient-to-r from-gray-800 to-gray-900 text-center h-screen">
    <div class="p-2 flex justify-end w-full">
      <twig:SelectLanguage />
    </div>
    <div class="p-[30px] w-[440px] h-[495px] inline-block fixed rounded-10"
         style="top: 50%; transform: translate(-50%,-50%);">
      <div class="flex justify-evenly">
        <img class="w-[200px] mb-6" src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="logo_umay">
      </div>
      <form action="{{ path('app_login') }}" method="post">
        <div class="mb-6">
          <input required type="email" id="username_login" name="_username" value="{{ last_username }}" autocomplete="email username"
                 placeholder="{{ 'Login.email'|trans }}"
                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
        </div>
        <div class="toggle-password-container">
          <input required type="password" id="password_login" name="_password" placeholder='{{ 'Login.password'|trans }}' autocomplete="current-password"
                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              {{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
                visibleLabel: 'Login.visible_label'|trans,
                hiddenLabel: 'Login.hidden_label'|trans,
                buttonClasses: ['toggle-password-button']
              }) }}>
        </div>

        <a href="{{ path('app_forgot_password_request') }}" class="cursor-pointer text-[#a7d2ff] text-right block my-3" type="button">
          {{ 'Login.btnForgotPassword'|trans }}
        </a>

        <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
          {{ 'Login.btnLogin'|trans }}
        </button>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        <input type="hidden" name="_target_path" value="/">
        {% if error %}
          <div class="login_error mt-2">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}
      </form>
    </div>
  </div>
{% endblock %}