<template>
    <NuxtLayout :name="device" :config="config">
        <main class="blog-post">
            <AppBreadcrumbs :items="breadcrumbs" />
            <section>
                <BlogContent />
                <div>
                    <BlogShare />
                    <BlogTags />
                </div>
                <BlogAside />
            </section>
            <BlogRelateds />
        </main>
    </NuxtLayout>
</template>

<script setup>
definePageMeta({ path: '/blog/:link' })

const config = reactive({
    mobile: { header: { search: true, menu: true }, navigation: false },
})

const { device, t } = inject('service')
const breadcrumbs = reactive([
    { name: t('asanMarketOnlineStore'), link: '/' },
    { name: t('media'), link: '/blog' },
])

const route = useRoute()
const link = route.params.link
const { status, data, error } = await useFetch(`/api/posts/link/${link}`)

if (status.value == 'success') {
    const { sidebar } = inject('service')
    sidebar.is = resolveComponent('BlogCategories')
    sidebar.props = { data }

    const post = data.value.post
    breadcrumbs.push(...[
        { name: post.category.name, link: '/blog?category=' + post.category.link },
        { name: post.title, link: route.path }
    ])
    useSeoMeta(data.value.meta || {})
    provide('data', data.value)
}
else throw createError(error.value)
</script>

<style lang="scss">
.blog-post {
    @apply w-full container flex flex-col gap-[1.1rem];
    @apply lg:gap-12 pb-8 pt-[1.1rem] lg:pt-14 lg:pb-[7.5rem];

    &>section:not([class]) {
        @apply w-full flex flex-wrap flex-col lg:flex-row gap-12 justify-between;

        &>div {
            @apply w-full flex flex-col lg:flex-row-reverse justify-between border-[#E5E5E5];
            @apply gap-5 lg:gap-0 lg:items-center lg:pb-8 lg:border-b-2 max-lg:mt-1.5;
            @apply mt-1.5 lg:mt-[4.5rem] lg:order-last;
        }

        aside {
            @apply w-auto container;

            &>div:nth-child(2) {
                @apply max-lg:hidden;
            }
        }

    }

    .blog-relateds {
        @apply mt-6 lg:mt-4;
    }
}
</style>
