<script lang="ts">
    import { DateTime } from "luxon";

    import { RiHistoryLine, RiHome2Line, RiUserLine } from "svelte-remixicon";
    import type { PostEntry } from "./backend";
    import SLayout from "./SLayout.svelte";
    import GuildAbout from "./GuildAbout.svelte";
    import UserAbout from "./UserAbout.svelte";
    import UserMenu from "./UserMenu.svelte";
    import PostMeta from "./PostMeta.svelte";
    import GuildMenu from "./GuildMenu.svelte";
    import { SvelteShowdown } from "svelte-showdown";



let { post }: { post: PostEntry }  = $props();
let { title, created_at, id, content = '', to } = post;
</script>

<SLayout title={to.display_name + (to.type === 'guild' ? ` (+${to.name})` : to.type === 'user' ? ` (@${to.username})` : '')}>
    <article class="card">
      <div class="post-frame" id={id}>
        <div class="post-body">
          <h1>{title}</h1>
          <PostMeta {post} />
          <!-- here go reports -->
          <!-- here goes removal message -->
          <div class="post-content">
            <SvelteShowdown content={ content || "" } />
            <!-- content, formatted as markdown -->
          </div>
        </div><!-- .post-body -->
        <div class="message-stats">
          <!-- upvotes / downvotes -->
        </div>
        <ul class="message-options row">
        </ul>
      </div>
    </article>

    {#snippet left()}
      {#if to.type === 'guild'}
        <GuildMenu guild={to} />
      {:else if to.type == 'user'}
        <UserMenu user={to} />
      {/if}
    {/snippet}

    {#snippet right()}
        {#if to.type === 'guild'}
        <GuildAbout guild={to} />
        {:else if to.type === 'user'}
        <UserAbout user={to} />
        {/if}
    {/snippet}
</SLayout>

<style>
  .post-content {
    overflow-x: auto;
  }
</style>