{% 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">
      {# Title and instructions #}
      <div class="mb-8">
        <h1 class="text-2xl font-bold mb-4 text-center">
          {{ 'Integration.login_happy'|trans }}
          <span class="text-2xl ml-2">🥰</span>
        </h1>
        <p class="text-gray-600 text-center">
          {{ 'Integration.login_code'|trans }}
        </p>
      </div>

      {# Code verification form #}
      {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
      <div>
        <label class="block text-lg font-bold mb-2">{{ 'Integration.login_code_label'|trans }}</label>
        {{ form_widget(form.code, {
          'attr': {
            'placeholder': 'Integration.login_code_placeholder'|trans,
          }
        }) }}
      </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">
          Vérifier
        </button>
      </div>
      {{ form_end(form) }}

      <div class="mt-6 text-center">
        <a href="{{ path('signalement_module_login') }}" class="text-gray-600 hover:text-gray-800">
          {{ 'Integration.login_code_empty'|trans }}
        </a>
      </div>
    </div>
  </div>
{% endblock %}