<script lang="ts" module>
  export * from './Post';
</script>

<script lang="ts">
  import { building, dev } from '$app/environment';
  import { page } from '$app/state';
  import theme from '../theme.svelte';

  import { parsePostMetadata, type Post } from './Post';

  let {
    post,
    filename,
  }: {
    post: Post;
    filename?: string;
  } = $props();

  let meta = $derived(parsePostMetadata(post.metadata));

  let PostComp = $derived(post.default);

  let ignorePublishedStatus = $derived(
    !building && page.url.searchParams.has('ignore-unpublished'),
  );
</script>

<svelte:head>
  <title>{meta.title} - /~mem/blog/</title>
  <meta name="description" content={meta.blurb} />
</svelte:head>

{#snippet unpublished()}
  <div
    class="p-4 rounded-lg bg-neutral-950 border-accent-primary border-[1.8px] my-4 sticky top-4 z-50"
  >
    <h1 class="text-xl mb-2">Unpublished</h1>
    <p class="my-1.5 leading-5">
      This article has either not yet been published or has been retracted.<br
      />
      This could be due to being unfinished, factual errors, bad formulations, pending
      significant corrections, or any number of other reasons.
    </p>
    {#if !ignorePublishedStatus && dev}
      <p class="mt-1 5">
        <a href="?ignore-unpublished" class="quicklink"
          >Ignore and read anyway</a
        >
      </p>
    {:else if ignorePublishedStatus}
      <p class="mt-1.5">Here be dragons.</p>
    {/if}
  </div>
{/snippet}

<div class="flex justify-center">
  <div class="max-w-2xl w-full">
    <h1 class="font-space-grotesk text-5xl mt-8 mb-4">
      <span class="select-none"
        ><span class="text-red-400">❯ </span> less
        <span class="text-red-400">'</span></span
      >{meta.title}<span class="text-accent-primary select-none">';</span>
    </h1>
    <p class="my-4 font-genericmono flex gap-1 md:gap-2 flex-wrap">
      <a href={encodeURI(`../`)} class="quicklink">../</a
      >{#if filename && (meta.published || ignorePublishedStatus || dev)}<span
          class="select-none">▒</span
        ><a
          href={encodeURI(
            `https://codeberg.org/dmpmem/tilde/src/branch/master/src/routes/blog/${filename}`,
          )}
          class="quicklink"
          target="_blank"
          rel="noopener noreferrer">src</a
        >{/if}<span class="select-none">▒</span><a
        href="?theme={theme.opposite}"
        class="quicklink theme-selector"
        onclick={(e) => {
          theme.flip();
          e.currentTarget.blur();
          e.preventDefault();
        }}>toggle theme</a
      ><span class="select-none theme-selector">▒</span>ctime: {meta.created
        .toISOString()
        .split('T')[0]}<span class="select-none">▒</span>mtime: {meta.updated
        .toISOString()
        .split('T')[0]}
    </p>
    {#if meta.published || ignorePublishedStatus}
      {#if !meta.published}
        {@render unpublished()}
      {/if}
      <article id="postmd" class="post-markdown">
        <PostComp />
      </article>
    {:else}
      {@render unpublished()}
    {/if}
  </div>
</div>
