{{define "cluepopup"}}
<div hx-sse="swap:newClue" hx-swap="none"
    _="on htmx:sseMessage(mimeclue_{{.ID}})
          -- Update content
        set match to event.detail.match(/(.*?)(\d+)$/)
          if match
            set clue to match[1]
            set number to match[2]
          else
            set clue to 'Invalid clue'
            set number to '0'
          end
          
          -- Cancel any previous timeout
          if window.clueTimeout then clearTimeout(window.clueTimeout)
          
          -- Show with animation
          remove .hidden from #clueModal
          remove .opacity-0.-translate-y-4 from #clueModal div
          add .opacity-100.translate-y-0 to #clueModal div
          
          -- Auto-hide after 3 seconds
          set window.clueTimeout to setTimeout(() => 
            trigger closeModal
          end, 3000)
        
        on closeModal
          -- Hide with animation
          add .opacity-0.-translate-y-4 to #clueModal div
          wait 300ms
          add .hidden to #clueModal">
<div id="clueModal" 
     class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full transition-opacity duration-300 ease-in-out">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white 
              transform transition-all duration-300 ease-out 
              opacity-0 -translate-y-4">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900">New Clue Received! 🔍</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500">Clue: <span id="modalClue" class="font-medium"></span></p>
        <p class="text-sm text-gray-500">Number: <span id="modalNumber" class="font-medium"></span></p>
      </div>
      <div class="items-center px-4 py-3">
        <button _="on click trigger closeModal"
                class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-700 transition-colors">
          OK
        </button>
      </div>
    </div>
  </div>
</div>
</div>
{{end}}