---
import Icon from '../AstroIcon.astro';
import Loader from '../Loader.astro';

export interface Props {
  contentContributionLink: string;
}

const { contentContributionLink } = Astro.props;
---

<div id='topic-overlay' class='hidden'>
  <div
    class='fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6'
    tabindex='-1'
    id='topic-body'
  >
    <div id='topic-loader' class='hidden'>
      <Loader />
    </div>

    <div id='topic-actions' class='mb-2 hidden'>
      <div data-guest-required class='hidden'>
        <button
          data-popup='login-popup'
          class='inline-flex items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
        >
          <Icon icon='check' />
          <span class='ml-2'>Done</span>
        </button>
      </div>

      <div data-auth-required>
        <button
          id='mark-topic-done'
          class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
        >
          <Icon icon='check' />
          <span class='ml-2'>Done</span>
        </button>

        <button
          id='mark-topic-pending'
          class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700'
        >
          <Icon icon='reset' />
          <span class='ml-2'>Pending</span>
        </button>
      </div>

      <button
        type='button'
        id='close-topic'
        class='absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900'
      >
        <Icon icon='close' />
      </button>
    </div>

    <div
      id='topic-content'
      class='prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5'
    >
    </div>

    <p
      id='contrib-meta'
      class='mt-10 hidden border-t pt-3 text-sm text-gray-400'
    >
      We are still working on this page. You can contribute by submitting a
      brief description and a few links to learn more about this topic <a
        target='_blank'
        class='text-blue-700 underline'
        href={contentContributionLink}>on GitHub repository.</a
      >.
    </p>
  </div>
  <div class='fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80'>
  </div>
</div>

<script src='./topic.js'></script>