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

{% block title %}{{ 'ForgotPassword.titleForgotPage'|trans }}{% endblock %}

{% 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-4" src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="logo_umay">
      </div>

      <h1 class="text-xl text-white mb-6">{{ 'ForgotPassword.titleForgotPage'|trans }}</h1>
      {% for flash_error in app.flashes('reset_password_error') %}
        <div id="alert_flash_error" class="flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
          <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
          </svg>
          <span class="sr-only">Info</span>
          <div class="ms-3 text-sm font-medium">
            {{ flash_error }}
          </div>
          <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700"
                  data-dismiss-target="#alert_flash_error" aria-label="Close">
            <span class="sr-only">Close</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
            </svg>
          </button>
        </div>
      {% endfor %}

      {{ form_start(requestForm) }}
      <div class="mb-6">
        {{ form_row(requestForm.email) }}
      </div>
      <div class="mb-6">
        <p class="text-white text-xs">{{ 'ForgotPassword.enterEmail'|trans }}</p>
      </div>

      <div class="flex items-center">
        <a href="{{ path('app_login') }}" class="w-1/3 flex items-center 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 px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
          <span class="material-symbols-outlined mr-2 text-xs">arrow_back</span>
          {{ 'ForgotPassword.back'|trans }}
        </a>
        <button type="submit" class="ml-2 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">
          {{ 'ForgotPassword.sendPasswordResetEmail'|trans }}
        </button>
      </div>
      {{ form_end(requestForm) }}
    </div>
  </div>
{% endblock %}