<template>
	<div>
		<div class="post__header">
			<div class="post__header__content">
				<breadcrumb-base class="post__breadcrumb" />
				<div class="post__image-wrapper">
					<picture>
						<source :srcset="getAvifImageSource(article.image)"    />
						<img
							:alt="article.title"
							:src="article.image"
							class="post__image"
							width="380"
							height="241"
							loading="eager"
							decoding="sync"
							fetchpriority="high"
						/>
					</picture>
				</div>
			</div>
		</div>
		<div class="post__page">
			<h1 class="post__title">
				{{ article.title }}

				<span class="post__date">
					{{ publishDate }}
				</span>
			</h1>
			<div class="post__body" v-html="blogContent" />
			<blog-comments :post-id="article.id" />
		</div>
		<div v-if="article.seoJsonLd" v-html="article.seoJsonLd"></div>
	</div>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import blogComments from "@/components/blog/blog_comments";

import { getArticle } from "@/api/api_list";
import { getDateDeference, addScopeIdToHtmlStringTags, convertImagePathToAvif } from "@/helper/helper";

export default {
	name: "BlogPostIndex",
	async asyncData({ $axios, i18n, params }) {
		const locale = i18n.locale;
		const slug = encodeURIComponent(params.slug);
		const article = await getArticle($axios, locale, slug);

		return {
			article,
			pageTitle: decodeURIComponent(slug)
		};
	},
	components: {
		breadcrumbBase,
		blogComments
	},
	computed: {
		blogContent() {
			return addScopeIdToHtmlStringTags(
				this.article.content,
				this.$options._scopeId
			);
		},
		publishDate() {
			return getDateDeference(this.article.publishDate, this.translate);
		}
	},
	head() {
		return {
			title: `${this.pageTitle} | ${this.$t("parsmega")}`,
			meta: [
				{
					hid: "description",
					name: "description",
					content: this.article.seoDescription || ""
				}
			]
		};
	},
	methods: {
		translate(key) {
			return this.$t(key);
		},
		getAvifImageSource(value) {
			return convertImagePathToAvif(value);
		}
	}
};
</script>
<style lang="scss" scoped>
.post {
	&__page {
		margin: 0 auto;
		max-width: $app-max-width;
		padding: $padding-default;
		position: relative;
		width: 100%;
	}

	&__header {
		margin-bottom: $padding-default * 2;
		position: relative;

		&__content {
			margin: 0 auto;
			max-width: $app-max-width;
			padding: $padding-default;
			position: relative;
			z-index: 1;
		}

		&::before {
			background: $color-white--dark2;
			content: "";
			display: block;
			height: 75%;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
		}
	}

	&__breadcrumb {
		padding: $padding-default 0;
	}

	&__image-wrapper {
		display: block;
		margin: $padding-default auto;
		max-width: 740px;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		width: 100%;
		z-index: 0;

		&:after {
			content: "";
			display: block;
			padding-top: 63.42%;
		}
	}

	&__image {
		aspect-ratio: 380 / 241;
		animation-name: image-section-transition;
		animation-duration: 0.4s;
		animation-delay: 4s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		height: 100%;
		object-fit: cover;
		transform: scale(0);
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__title {
		display: block;
		font-size: 20px;
		font-weight: bold;
		margin: 0 auto;
		padding: 0 0 $padding-default 0;
	}

	&__date {
		color: $color-text--light;
		float: left;
		font-size: 12px;
		font-weight: bold;
	}

	&__body {
		@extend %html-content;
		content-visibility: auto;
	}
}

[data-lang="en"] {
	.post {
		&__date {
			float: right;
		}

		&__body {
			@extend %html-content--ltr;
		}
	}
}

@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>