{% extends 'Signalement/layout.html.twig' %}
{% trans_default_domain 'home' %}

{% block body %}
  <div class="flex flex-col min-h-screen bg-white px-6 py-8">
    {# Main content #}
    <div class="flex-1">
      {# Welcome message #}
      <div class="mb-8">
        <h1 class="text-2xl font-bold mb-4 flex items-center justify-center">
          {{ 'Integration.login_happy'|trans }}
          <span class="text-2xl ml-2">🥰</span>
        </h1>
        <p class="text-gray-600 text-center mb-2">
          {{ 'Integration.login_title'|trans }}
        </p>
        <p class="text-gray-600 text-center">
          {{ 'Integration.login_code_info'|trans }}
        </p>
      </div>

      {# Login form #}
      {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
      <div class="space-y-4">
        <div>
          <label class="block text-lg font-bold mb-2">Ton pseudo</label>
          {{ form_widget(form.pseudo) }}
        </div>

        <div>
          <label class="block text-lg font-bold mb-2">Ton adresse email</label>
          {{ form_widget(form.email) }}
        </div>
      </div>

      {% for label, messages in app.flashes %}
        {% for message in messages %}
          <div class="bg-red-100 rounded-lg border-red-500 text-red-700 p-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                     fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                        clip-rule="evenodd"></path>
                </svg>
              </div>
              <div class="ml-3">
                <p class="text-sm text-red-700">{{ message }}</p>
              </div>
            </div>
          </div>
        {% endfor %}
      {% endfor %}

      <div class="mt-8">
        <button type="submit"
                class="w-full bg-gray-800 text-white rounded-lg py-3 font-medium">
          {{ 'Integration.login_btn'|trans }}
        </button>
      </div>
      {{ form_end(form) }}
    </div>
  </div>
{% endblock %}