<template>
	<div>
		<div class="blog__slider-wrapper">
			<div class="blog__slider-contents">
				<breadcrumb-base />
				<blog-slider
					:data-source="sliderArticle"
					v-if="sliderArticle"
				/>
			</div>
		</div>
		<div class="blog__page">
			<blog-card
				v-for="post in articlesDataSource"
				:key="post.id"
				:data-source="post"
			/>
			<img
				v-show="articlesDataSource.length == 0"
				alt=""
				loading="lazy"
				decoding="async"
				src="@/assets/images/empty_list.svg"
				class="blog__empty-data"
			/>
			<div class="blog__pagenation">
				<action-btn
					v-show="isPreviusPageActive"
					:text="$t('previus page')"
					@click="goPrevPage"
				/>
				<action-btn
					v-show="isNextPageActive"
					:text="$t('next page')"
					@click="goNextPage"
				/>
			</div>
		</div>
	</div>
</template>
<script>
import actionBtn from "@/components/shared/other/action_btn";
import blogCard from "@/components/blog/blog_card";
import blogSlider from "@/components/blog/blog_slider";
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import { getArticles, getBlogSlider } from "../../api/api_list";

export default {
	name: "ArticlesIndex",
	async asyncData({ $axios, i18n, query }) {
		const locale = i18n.locale;
		const pageId = query.page || 1;
		const itemPerPage = 15;
		const articles = await getArticles($axios, locale, itemPerPage, pageId);
		const sliderArticle = await getBlogSlider($axios, locale);

		return {
			articlesDataSource: articles,
			itemPerPage,
			pageId,
			sliderArticle
		};
	},
	components: {
		actionBtn,
		blogCard,
		blogSlider,
		breadcrumbBase
	},
	computed: {
		isNextPageActive() {
			return this.articlesDataSource.length >= this.itemPerPage;
		},
		isPreviusPageActive() {
			return this.pageId > 1;
		}
	},
	head() {
		return {
			title: `${this.$t("articles")} | ${this.$t("parsmega")}`,
			meta: []
		};
	},
	methods: {
		goNextPage() {
			const url = "/articles?page=" + (Number(this.pageId) + 1);
			location.href = url;
		},
		goPrevPage() {
			const url = "/articles?page=" + (Number(this.pageId) - 1);
			location.href = url;
		}
	}
};
</script>
<style lang="scss" scoped>
.blog {
	&__page,
	&__slider-contents {
		margin: 0 auto;
		max-width: $app-max-width;
		width: 100%;
	}

	&__page {
		margin-top: $padding-default * 2;

		@media (min-width: 960px) {
			margin-top: $padding-default * 4;
		}
	}

	&__slider-wrapper {
		background: $color-white--dark2;
		padding-bottom: $padding-default;
	}

	&__pagenation {
		padding: $padding-default;
		text-align: center;
	}

	&__empty-data {
		display: block;
		margin: $padding-default auto;
		max-width: 300px;
	}
}
</style>