<div
  x-show="visible"
  x-cloak
  class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 py-8"
  @keydown.escape.window="close"
>
  <div class="bg-white max-w-2xl w-full rounded-lg shadow-xl p-6 relative" @click.outside="close">
    <!-- Close button -->
    <button class="absolute top-2 right-3 text-gray-400 hover:text-black text-xl font-bold" @click="close">
      &times;
    </button>

    <template x-if="loading">
      <div class="text-center text-gray-500 py-12">Loading subtask details...</div>
    </template>

    <template x-if="!loading && task">
      <div>
        <h2 class="text-lg font-semibold text-gray-800 mb-2" x-text="task.name"></h2>

        <div class="text-sm text-gray-500 mb-4 space-x-4">
          <template x-if="task.assignee">
            <span>Assigned to: <strong x-text="task.assignee.name"></strong></span>
          </template>
          <template x-if="task.due_on">
            <span>Due: <strong x-text="(new Date(task.due_on)).toLocaleDateString()"></strong></span>
          </template>
        </div>

        <div class="space-y-3 mt-6">
          <h3 class="text-sm font-semibold text-gray-700">Comments</h3>
          <template x-if="comments.length > 0">
            <template x-for="comment in comments" :key="comment.gid">
              <div class="border rounded px-3 py-2 bg-gray-50">
                <p class="text-gray-700 text-sm" x-text="comment.text"></p>
                <div class="text-xs text-gray-400 mt-1" x-text="(new Date(comment.created_at)).toLocaleString()"></div>
              </div>
            </template>
          </template>

          <template x-if="comments.length === 0">
            <p class="text-sm text-gray-400">No comments on this subtask yet.</p>
          </template>
        </div>
      </div>
    </template>
  </div>
</div>
