---
import Icon from "./Icon.astro";
import Loader from "./Loader.astro";

---

<div id='topic-overlay' class='hidden'>
    <div class="fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]" tabindex="-1" id='topic-body'>
      <div id='topic-loader' class='hidden'>
        <Loader />
      </div>
  
      <div id='topic-actions' class='hidden mb-2'>
        <button id='mark-topic-done' class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'>
          <Icon icon="check" /> <span class='ml-2'>Mark as Done</span>
        </button>
  
        <button id='mark-topic-pending' class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 inline-flex items-center'>
          <Icon icon="reset" /> <span class='ml-2'>Mark as Pending</span>
        </button>
  
        <button type="button" id='close-topic' class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
          <Icon icon="close" />
        </button>
      </div>
  
      <div id='topic-content' class='prose prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5  prose-h2:mb-3 prose-h2:mt-0'></div>
    </div>
    <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30"></div>
  </div>