---
import { getCollection } from 'astro:content';
import MainGridLayout from "../../layouts/MainGridLayout.astro";
import ImageBox from "../../components/misc/ImageBox.astro";
import {Icon} from "astro-icon/components";
import PostMetadata from "../../components/PostMetadata.astro";
import Button from "../../components/control/Button.astro";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import {getPostUrlBySlug} from "../../utils/url-utils";
import License from "../../components/misc/License.astro";
import {licenseConfig} from "../../config";

export async function getStaticPaths() {
    const blogEntries = await getCollection('posts');
    return blogEntries.map(entry => ({
        params: { slug: entry.slug }, props: { entry },
    }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();

const { remarkPluginFrontmatter } = await entry.render();

---
<MainGridLayout banner={entry.data.image} title={entry.data.title}>
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
        <div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-4 relative w-full ",
            {}
        ]}>
            <!-- word count and reading time -->
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition">
                <div class="flex flex-row items-center">
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
                        <Icon name="material-symbols:notes-rounded"></Icon>
                    </div>
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
                </div>
                <div class="flex flex-row items-center">
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
                    </div>
                    <div class="text-sm">{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
                </div>
            </div>

            <!-- title -->
            <div class="relative">
                <div
                    class="transition w-full block font-bold mb-3
                    text-3xl md:text-[40px]/[44px]
                    text-black/90 dark:text-white/90
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
                    before:absolute before:top-[12px] before:left-[-18px]
                ">
                    {entry.data.title}
                </div>
            </div>

            <!-- metadata -->
            <PostMetadata
                    class="mb-5"
                    published={entry.data.published}
                    tags={entry.data.tags}
                    categories={entry.data.categories}
            ></PostMetadata>

            <!-- always show cover as long as it has one -->

            {entry.data.image &&
                <ImageBox src={entry.data.image} class="mb-8 rounded-xl"/>
            }

            {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}

            <div class="mb-6 prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
            ">
            <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
            <!--<div class="max-w-none custom-md">-->
                <Content />
            </div>

            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl"></License>}

        </div>
    </div>

    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
        <a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
            {entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
                <Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
                <div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
                    {entry.data.nextTitle}
                </div>
            </Button>}
        </a>

        <a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden active:scale-95">
            {entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
                <div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
                    {entry.data.prevTitle}
                </div>
                <Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />
            </Button>}
        </a>
    </div>

</MainGridLayout>

<style lang="stylus" is:global>
.custom-md
  a
    position: relative
    background: none
    margin: -4px
    padding: 4px
    border-radius: 6px
    color: var(--primary)
    text-decoration-line: none;
    /*&:after*/
    /*  content: ''*/
    /*  position: absolute*/
    /*  left: 2px*/
    /*  right: 2px*/
    /*  bottom: 4px*/
    /*  height: 6px*/
    /*  border-radius: 3px*/
    /*  background: var(--link-hover)*/
    /*  transition: background 0.15s ease-in-out;*/
    /*  z-index: -1;*/
    &:hover
      background: var(--link-hover)
    &:active
      background: var(--link-active)
      /*&:after*/
      /*  background: var(--link-active)*/
  code
    font-family: monospace
    background: var(--inline-code-bg)
    color: var(--inline-code-color)
    padding: 2px 4px
    border-radius: 4px
    overflow: hidden
    &:before
        content: none
    &:after
        content: none
  pre
    background: var(--codeblock-bg) !important
    border-radius: 12px
    padding-left: 20px
    padding-right: 20px
    code
      padding: 0
      background: none
      ::selection
        background: var(--codeblock-selection)
      span.br::selection
          background: var(--codeblock-selection)
  ul
    li
      &::marker
        color: var(--primary)
  ol
    li
      &::marker
        color: var(--primary)
  blockquote
    font-style: normal
    border-left-color: rgba(0,0,0,0)
    position: relative;
    &:before
      content: ''
      position: absolute
      left: -0.25rem
      display: block
      transition: background 0.15s ease-in-out;
      background: var(--btn-regular-bg)
      height: 100%
      width: 0.25rem
      border-radius: 1rem
    p
      &:before
        content: none
      &:after
        content: none
  img
    border-radius: 12px
  hr
    border-color: var(--line-divider)
    border-style: dashed
  iframe
    border-radius: 12px
    margin-left: auto
    margin-right: auto
    max-width: 100%

</style>