<template>
    <article>
        <router-link :to="'/blog?category=' + category.link">
            {{ category.name }}
        </router-link>
        <h1>{{ title }}</h1>
        <span>{{ $t('author') }}: {{ userID.firstName }} {{ userID.lastName }}</span>
        <div>
            <i class="isax isax-calendar-1"></i>
            <span>{{ new Date(createdAt).toLocaleString('fa') }}</span>
        </div>
        <img :src="coverImage" :alt="title" />
        <div v-html="content" />
    </article>
</template>

<script setup>
const data = inject('data')
const { category, userID, createdAt, coverImage, title, content } = data.post
</script>

<style lang="scss">
.blog-post>section>article {
    @apply w-full max-lg:container max-w-[64.6rem] flex flex-col max-lg:px-6;

    &>a {
        @apply text-primary-600 font-vazir w-max hover:underline;
        @apply text-xs lg:text-2xl lg:leading-[2.7rem] mt-3 lg:mt-0;
    }

    &>h1 {
        @apply text-[#404040] font-bold font-vazir;
        @apply text-base lg:text-3xl mt-2 lg:mt-6;
    }

    &>span {
        @apply text-[#BFBFBF] font-normal font-vazir;
        @apply text-sm lg:text-xl lg:leading-9 mt-[1.1rem] lg:mt-8;
    }

    &>div:first-of-type {
        @apply flex items-center gap-1.5 lg:gap-2 text-[#BFBFBF] mt-2;

        &>span {
            @apply font-normal font-vazir;
            @apply text-sm lg:text-xl;
        }

        i {
            @apply text-[1.4em] lg:text-2xl;
        }
    }

    &>img {
        @apply w-full bg-zinc-300 order-first lg:order-none lg:mt-6;
    }

    &>div:last-of-type {
        @apply text-[#595959] font-vazir mt-9 lg:mt-12 text-justify;
        @apply text-sm leading-6 lg:text-xl lg:leading-9;
    }
}
</style>
