<template>
	<div class="items__column">
		<div v-if="categoryImage"
			 class="category__image-wrapper">
			<img :src="categoryImage"
				 class="category__image"
				 alt="" />
		</div>
		<product-card v-for="product in dataSource"
					  :key="product.id"
					  :data-source="product" />
		<div v-show="isShowNotFoundMessage"
			 class="notfound">
			{{ $t("notFoundProduc") }}
		</div>
		<LazyHydrate when-visible>
			<div class="category__description"
			 v-html="categoryContents">
		</div>
		</LazyHydrate>
	
	</div>
</template>
<script>
import productCard from "@/components/product/product_full_card";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "ProductsItemsColumn",
	components: {
		productCard,
		LazyHydrate
	},
	computed: {
		isShowNotFoundMessage() {
			return this.dataSource.length == 0;
		},
	},
	props: {
		categoryContents: {
			required: false,
			type: String
		},
		categoryImage: {
			required: false,
			type: String
		},
		dataSource: {
			required: true,
			type: Array,
		}
	},
};
</script>
<style lang="scss" scoped>
.items__column {
	display: block;

	@media (min-width: $desktop) {
		display: inline-block;
		vertical-align: top;
		width: 69%;
	}
}

.category__image-wrapper {
	margin-bottom: $padding-default;
	overflow: hidden;
	position: relative;

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

.category__image {
	display: block;
	height: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.category__description {
	display: block;
	margin-top: $padding-default/2;
	padding: 0 $padding-default;
	font-size: 14px;
	line-height: 1.9;

	@media (min-width: $desktop) {
		padding: 0;
	}

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

.notfound {
	color: $color-text--light;
	font-size: 14px;
	padding: $padding-default * 2 $padding-default;
	text-align: center;
}

[data-lang="en"] {

	.category__description {
		/deep/ p {
			text-align: left !important;
		}
	}
}
</style>