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

{% block title %}{{ 'ForgotPassword.email_title'|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-6" src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="logo_umay">
      </div>
      <h1 class="text-xl text-white my-4">{{ 'ForgotPassword.titleForgotPage'|trans }}</h1>

      <div class="flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800" role="alert">
        <svg class="flex-shrink-0 inline w-4 h-4 me-3" 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>
          <span>{{ 'ForgotPassword.email_body'|trans }}</span>
          <br /><br />
          <span class="font-medium">{{ 'ForgotPassword.email_expire'|trans }} {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.</span>
          <br /><br />
          <span class="text-xs">{{ 'ForgotPassword.email_check_spam'|trans }} <a class="font-bold" href="{{ path('app_forgot_password_request') }}">{{ 'ForgotPassword.try_again'|trans }}</a>.</span>
        </div>
      </div>
      <a href="{{ path('app_login') }}" type="submit" class="mt-6 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.backToLogin'|trans }}
      </a>
    </div>
  </div>
{% endblock %}