{{ define "toast-container" }}

<!-- Toast notification container with Alpine.js integration -->
<div class="toast-container" x-data="formComponentsData()">
  <template x-for="toast in toasts" :key="toast.id">
    <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0">
      <span x-text="toast.message"></span>
      <button class="toast-close" @click="removeToast(toast.id)" type="button" aria-label="Close notification"></button>
    </div>
  </template>
</div>

{{ end }}