<div x-data="{ show: true }" 
     x-show="show"
     x-init="setTimeout(() => show = false, 7000)"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform translate-x-full"
     x-transition:enter-end="opacity-100 transform translate-x-0"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="bg-yellow-50 border-l-4 border-yellow-500 text-yellow-900 p-4 rounded shadow-lg"
     role="alert">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="font-bold text-lg">⚠️ Task In Progress</p>
      <p class="mt-1 text-sm">
        Cannot delete "<strong>{{ task_title }}</strong>" while it's in progress.
      </p>
      <p class="mt-2 text-xs text-yellow-700">
        💡 <em>Tip: Change the status to "Done" or "Todo" before deleting.</em>
      </p>
    </div>
    <button @click="show = false" class="flex-shrink-0 ml-4">
      <svg class="h-5 w-5 text-yellow-600 hover:text-yellow-800" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
</div>
