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

{% block stylesheets %}
  {{ parent() }}
  <style>
      @keyframes crossmark {
          0% {
              transform: scale(0);
              opacity: 0;
          }
          50% {
              transform: scale(1.2);
          }
          100% {
              transform: scale(1);
              opacity: 1;
          }
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(20px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .animate-crossmark {
          animation: crossmark 0.5s ease-in-out forwards;
      }

      .animate-fade-up {
          animation: fadeInUp 0.5s ease-out forwards;
      }

      .animate-delay-1 {
          animation-delay: 0.2s;
      }

      .animate-delay-2 {
          animation-delay: 0.4s;
      }
  </style>
{% endblock %}

{% block body %}
  <div class="flex flex-col h-screen bg-white">
    {# Contenu d'erreur d'accès #}
    <div class="flex-1 flex items-center justify-center p-4 bg-gray-50">
      <div class="text-center max-w-md">
        {# Crossmark animation #}
        <div class="mb-8 animate-crossmark">
          <span class="material-symbols-outlined text-red-500 text-8xl">
            error
          </span>
        </div>

        {# Message principal #}
        <h1 class="text-3xl font-bold text-gray-800 mb-4 animate-fade-up">
          {{ 'Integration.not_allowed'|trans }}
        </h1>

        {# Messages explicatifs #}
        <p class="text-lg text-gray-600 mb-3 animate-fade-up animate-delay-1">
          {{ 'Integration.not_allowed_info'|trans }}

        </p>
        <p class="text-lg text-gray-600 mb-8 animate-fade-up animate-delay-2">
          {{ 'Integration.not_allowed_info2'|trans }}
        </p>

        {# Boutons d'action #}
        <div class="flex flex-col md:flex-row gap-4 justify-center animate-fade-up animate-delay-2">
          <a href="{{ path('app_logout') }}"
             class="inline-block w-full md:w-auto md:px-8 p-3 md:p-4 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors text-center">
            <div class="flex items-center justify-center space-x-2">
              <span class="material-symbols-outlined">login</span>
              <span>{{ 'Integration.not_allowed_login'|trans }}</span>
            </div>
          </a>

          <a href="{{ path('app_logout') }}"
             class="inline-block w-full md:w-auto md:px-8 p-3 md:p-4 bg-white border-2 border-gray-800 text-gray-800 rounded-lg hover:bg-gray-100 transition-colors text-center">
            <div class="flex items-center justify-center space-x-2">
              <span class="material-symbols-outlined">home</span>
              <span>{{ 'Integration.not_allowed_logout'|trans }}</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}