<template>
	<LazyHydrate when-visible>
		<div class="slider">
		<div class="slider__image-wrapper" @click="goPostItem">
			
			<picture>
				<source :srcset="getAvifImageSource(dataSource.image)"    />
				<img
					class="slider__image"
					:alt="dataSource.title"
					:src="dataSource.image"
					loading="eager"
					decoding="async"
					width="737.9"
					height="470"
				/>
			</picture>
		</div>
		<h2 class="slider__title">
			{{ dataSource.title }}
		</h2>
		<div class="slider__date">
			{{publishDate}}
		</div>
		<div class="slider__summary" v-html="sammary"></div>
		<action-btn @click="goPostItem" :text="$t('more details') + ' ...'" />
		
	</div>
	</LazyHydrate>
	
</template>
<script>
import actionBtn from "@/components/shared/other/action_btn";
import { addScopeIdToHtmlStringTags , getDateDeference, convertImagePathToAvif} from "../../helper/helper";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "BlogSlider",
	components: {
		actionBtn,
		LazyHydrate
	},
	computed: {
		publishDate() {
			return getDateDeference(this.dataSource.publishDate, this.translate);
		},
		sammary() {
			return addScopeIdToHtmlStringTags(
				this.dataSource.summary,
				this.$options._scopeId
			);
		},
	},
	methods: {
		goPostItem() {
			let newPath = this.localePath(this.dataSource.link);
			this.$router.push(newPath);
		},
		translate(key) {
			return this.$t(key);
		},
		getAvifImageSource(value) {
			return convertImagePathToAvif(value);
		}
	},
	props: {
		dataSource: {
			required: true,
		},
	},
};
</script>
<style lang="scss" scoped>
@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

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

.slider {
	margin-bottom: $padding-default;
	padding: 0 $padding-default * 1.5;

	&__image-wrapper {
		cursor: pointer;
		display: block;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		width: 100%;
		z-index: 0;

		&::before {
			background: rgba(0, 0, 0, .4);
			content: "";
			display: block;
			height: 100%;
			opacity: 0;
			position: absolute;
			right: 0;
			top: 0;
			transition: all ease-in-out 0.2s;
			width: 100%;
			z-index: 2;
		}

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

		&:hover {
			&::before {
				opacity: 1;
			}
			.slider__image {
				transform: scale(1.3);
			}
		}
	}

	&__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);
		aspect-ratio: 768 / 488;
		object-fit: cover;
		position: absolute;
		right: 0;
		top: 0;
		transition: all ease-in-out 0.4s;
		width: 100%;
	}

	&__title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: $padding-default/2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__date {
		color: $color-text--light;
		font-size: 13px;
		margin-bottom: $padding-default/2;
	}

	&__summary {
		color: $color-text--light;
		line-height: 1.8;
		margin: 0 auto $padding-default/2 auto;
		max-height: 105px;
		overflow: hidden;

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

	@media (min-width: 768px) {
		margin-bottom: $padding-default * 3;

		&::after {
			clear: both;
			content: "";
			display: block;
		}

		&__image-wrapper {
			float: right;
			margin-left: $padding-default;
			width: 45%;
		}

		&__title {
			font-size: 18px;
		}

		&__summary {
			font-size: 14px;
			line-height: 2;
			margin-bottom: $padding-default;
			max-height: 85px;
			overflow: hidden;
			text-align: justify;
			text-align-last: right;
			text-overflow: ellipsis;
		}
	}

	@media (min-width: 960px) {
		padding: 0 $padding-default;

		&__image-wrapper {
			width: 50%;
		}

		&__title {
			padding-top: 30px;
		}

		&__summary {
			min-height: 110px;
		}
	}
}

[data-lang="en"] {
	.slider {
		@media (min-width: 768px) {
			&__image-wrapper {
				float: left;
				margin-left: 0;
				margin-right: $padding-default;
			}

			&__summary {
				text-align-last: left;
			}
		}
	}
}
</style>