{% comment %}
Cotton Toast Container Component
Converts the existing toast container to use Django Cotton's component system
{% endcomment %}

{% load static %}

<!-- Cotton Toast Container Component -->
<c-vars
  container_classes="{{ container_classes|default:'fixed top-4 right-4 z-50 space-y-2 max-w-sm' }}"
  toast_classes="{{ toast_classes|default:'p-4 rounded-lg shadow-lg border backdrop-blur-sm transition-all duration-300 flex items-start gap-3' }}"
  icon_classes="{{ icon_classes|default:'w-5 h-5 flex-shrink-0 mt-0.5' }}"
  content_classes="{{ content_classes|default:'flex-grow min-w-0' }}"
  close_classes="{{ close_classes|default:'p-1 hover:bg-black/10 rounded transition-colors flex-shrink-0' }}"
  progress_classes="{{ progress_classes|default:'absolute bottom-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear' }}"
/>

<div 
  x-data="{}"
  x-show="$store.toast.toasts.length > 0"
  x-cloak
  class="{{ container_classes }}"
>
  <template x-for="toast in $store.toast.toasts" :key="toast.id">
    <div
      x-show="toast.visible"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="transform opacity-0 scale-95 translate-x-full"
      x-transition:enter-end="transform opacity-100 scale-100 translate-x-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="transform opacity-100 scale-100 translate-x-0"
      x-transition:leave-end="transform opacity-0 scale-95 translate-x-full"
      class="{{ toast_classes }}"
      :class="{
        'bg-green-50 border-green-200 text-green-800': toast.type === 'success',
        'bg-red-50 border-red-200 text-red-800': toast.type === 'error',
        'bg-blue-50 border-blue-200 text-blue-800': toast.type === 'info',
        'bg-yellow-50 border-yellow-200 text-yellow-800': toast.type === 'warning'
      }"
    >
      <!-- Toast Icon -->
      <div class="{{ icon_classes }}">
        <i 
          :class="{
            'fas fa-check-circle text-green-600': toast.type === 'success',
            'fas fa-exclamation-circle text-red-600': toast.type === 'error',
            'fas fa-info-circle text-blue-600': toast.type === 'info',
            'fas fa-exclamation-triangle text-yellow-600': toast.type === 'warning'
          }"
        ></i>
      </div>

      <!-- Toast Content -->
      <div class="{{ content_classes }}">
        <p class="font-medium text-sm" x-text="toast.message"></p>
        <p x-show="toast.description" class="text-xs opacity-90 mt-1" x-text="toast.description"></p>
      </div>

      <!-- Close Button -->
      <button
        @click="$store.toast.remove(toast.id)"
        class="{{ close_classes }}"
        type="button"
      >
        <i class="fas fa-times w-4 h-4"></i>
      </button>

      <!-- Progress Bar (if duration is set) -->
      <div 
        x-show="toast.duration"
        class="{{ progress_classes }}"
        :style="`width: ${toast.progress}%`"
      ></div>
    </div>
  </template>
</div>