{#
    Notifications Zone Component - Zone pour afficher les toasts et messages flash

    Cette zone est positionnée en haut de l'écran (pleine largeur mobile, droite desktop)
    - Les messages flash Symfony
    - Les toasts/notifications

    Auto-dismiss après 5 secondes avec possibilité de fermeture manuelle
#}

<div id="toast-container" class="space-y-3 sm:space-y-4">
   {# Messages Flash Symfony #}
   {% for type, messages in app.flashes %}
      {% for message in messages %}
         {% set toastId = 'toast-' ~ type ~ '-' ~ random() %}

         {# Mapping des types Symfony vers les types de toast #}
         {% set toastType = type %}
         {% if type == 'danger' %}
            {% set toastType = 'error' %}
         {% endif %}

         {# Configuration des icônes, couleurs et labels #}
         {% set config = {
            'success': {
               'icon': '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>',
               'bgColor': 'bg-green-100',
               'textColor': 'text-green-500',
               'borderColor': 'border-green-500',
               'label': 'Succès'
            },
            'error': {
               'icon': '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
               'bgColor': 'bg-red-100',
               'textColor': 'text-red-500',
               'borderColor': 'border-red-500',
               'label': 'Erreur'
            },
            'warning': {
               'icon': '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
               'bgColor': 'bg-orange-100',
               'textColor': 'text-orange-500',
               'borderColor': 'border-orange-500',
               'label': 'Attention'
            },
            'info': {
               'icon': '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
               'bgColor': 'bg-blue-100',
               'textColor': 'text-blue-500',
               'borderColor': 'border-blue-500',
               'label': 'Information'
            }
         } %}

         {% set toastConfig = config[toastType]|default(config.info) %}

         <div id="{{ toastId }}" class="flex items-center w-full p-3 sm:p-4 text-gray-500 bg-white rounded-lg shadow-lg animate-slide-in border-l-4 {{ toastConfig.borderColor }}" role="alert">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 {{ toastConfig.textColor }} {{ toastConfig.bgColor }} rounded-lg">
               <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  {{ toastConfig.icon|raw }}
               </svg>
            </div>
            <div class="ms-3 flex-1 min-w-0">
               <div class="text-xs font-semibold {{ toastConfig.textColor }} uppercase tracking-wide">{{ toastConfig.label }}</div>
               <div class="text-sm font-normal text-gray-600 break-words">{{ message }}</div>
            </div>
            <button type="button"
                    class="ms-2 flex-shrink-0 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-2 sm:p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-10 w-10 sm:h-8 sm:w-8"
                    data-dismiss-target="#{{ toastId }}"
                    aria-label="Close"
                    onclick="this.closest('#{{ toastId }}').remove()">
               <span class="sr-only">Fermer</span>
               <svg class="w-4 h-4 sm:w-3 sm: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"/>
               </svg>
            </button>
         </div>
      {% endfor %}
   {% endfor %}
</div>

{# JavaScript pour auto-dismiss après 5 secondes #}
<script>
   document.addEventListener('DOMContentLoaded', function() {
      var toasts = document.querySelectorAll('#toast-container > div[id^="toast-"]');
      var isMobile = window.innerWidth < 640;

      toasts.forEach(function(toast) {
         toast.style.opacity = '0';
         toast.style.transform = isMobile ? 'translateY(-100%)' : 'translateX(100%)';

         setTimeout(function() {
            toast.style.transition = 'all 0.3s ease-in-out';
            toast.style.opacity = '1';
            toast.style.transform = 'translate(0, 0)';
         }, 100);

         setTimeout(function() {
            toast.style.opacity = '0';
            toast.style.transform = isMobile ? 'translateY(-100%)' : 'translateX(100%)';

            setTimeout(function() {
               toast.remove();
            }, 300);
         }, 5000);
      });
   });
</script>

<style>
   @keyframes slide-in {
      from { opacity: 0; transform: translateX(100%); }
      to { opacity: 1; transform: translateX(0); }
   }

   @keyframes slide-in-top {
      from { opacity: 0; transform: translateY(-100%); }
      to { opacity: 1; transform: translateY(0); }
   }

   @media (max-width: 639px) {
      .animate-slide-in {
         animation: slide-in-top 0.3s ease-in-out;
      }
   }

   @media (min-width: 640px) {
      .animate-slide-in {
         animation: slide-in 0.3s ease-in-out;
      }
   }
</style>