<template>
	<LazyHydrate when-visible>
	<div :to="dataSource.link"
		 class="post">
		<nuxt-link :to="localePath(dataSource.link)"
				   class="post__image-wrapper">
		
			<picture>
				<source :srcset="imageSourceAsAvif"    />
				<img class="post__image"
					:alt="dataSource.title"
					:src="dataSource.image"
					width="340.39" height="216.28"
					decoding="async"
					loading="lazy" />
			</picture>
		</nuxt-link>
		<div class="post__content">
			<div class="post__date">
				{{ publishDate }}
			</div>
			<h3 class="post__title">
				{{ dataSource.title }}
			</h3>
			<div class="post__summary"
				 v-html="sammary"></div>
			<arrow-btn :href="dataSource.link"
					   :title="$t('read more')"
					   class="post__continue" />
		</div>
	</div>
</LazyHydrate>
</template>
<script>
import { convertImagePathToAvif} from "../../helper/helper";
import arrowBtn from "@/components/shared/other/arrow_btn";
import {
	getDateDeference,
	addScopeIdToHtmlStringTags
} from "../../helper/helper";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "BlogCard",
	components: {
		arrowBtn,
		LazyHydrate
	},
	computed: {
		imageSourceAsAvif() {
			return convertImagePathToAvif(this.dataSource.image);
		},
		publishDate() {
			if (this.$i18n.locale === "en") {
				const date = new Date(this.dataSource.publishDate);

				return date.toLocaleDateString("en-US");
			}

			return getDateDeference(
				this.dataSource.publishDate,
				this.translate
			);
		},
		sammary() {
			return addScopeIdToHtmlStringTags(
				this.dataSource.summary,
				this.$options._scopeId
			);
		}
	},
	methods: {
		translate(key) {
			return this.$t(key);
		}
	},
	props: {
		dataSource: {
			required: true,
			type: Object
		}
	}
};
</script>
<style lang="scss" scoped>
@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.post {
	content-visibility: auto;
	margin: 0 auto $padding-default auto;
	position: relative;

	&__image-wrapper {
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
		display: block;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		width: 100%;
		z-index: 0;

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

	&__image {
		animation-name: image-section-transition;
		animation-duration: 0.2s;
		animation-delay: 0.4s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		transform: scale(0);
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__content {
		background: $color-white;
		border-radius: $border-radius;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
		margin: 0 $padding-default;
		margin-top: -18%;
		padding: $padding-default;
		position: relative;
		z-index: 2;
	}

	&__date {
		color: $color-text--light;
		font-size: 12px;
	}

	&__title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: $padding-default;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		white-space: nowrap;

		&:before {
			background-color: $color-primary;
			content: "";
			display: inline-block;
			height: 20px;
			margin-left: $padding-default/2;
			vertical-align: top;
			width: 3px;
		}
	}

	&__summary {
		color: $color-text--light;
		font-size: 13px;
		height: 95px;
		line-height: 1.8;
		overflow: hidden;
		text-align: justify;
		text-align-last: right;
		text-overflow: ellipsis;

		/deep/ p {
			margin: 0;
			padding: 0;
		}
	}

	&__continue {
		display: block;
		margin-top: $padding-default/2;
	}

	@media (min-width: $tablet) {
		display: inline-block;
		margin: 0 $padding-default/2;
		margin-bottom: $padding-default;
		vertical-align: top;
		width: calc(33% - #{$padding-default});

		&__content {
			margin-left: 0;
		}
	}
}

[data-lang="en"] {
	.post {
		&__summary {
			text-align-last: left;
		}
	}
}
</style>