<template>
    <div class="agents-page">
        <breadcrumb-base class="agents-page__breadcrumb" />
        <h1 class="agents-page__title">
            {{ title }}
        </h1>
        <p class="agents-page__description">
            {{ $t("agentPageDescription") }}
        </p>
        <div class="agents-page__cards-wrapper">
            <div v-for="agentInfo in agentsList"
                :key="agentInfo.id"
                class="agents-page__card">
                <agentCard :info="agentInfo" />
            </div>
        </div>
    </div>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import agentCard from "../../components/agents/agent_card.vue";
import { getAgents } from "../../api/api_list";

export default {
    name: "AgentsIndex",
    async asyncData({ $axios, i18n, query }) {
		const locale = i18n.locale;
		const pageId = 1;
		const itemPerPage = 100;
		const agents = await getAgents($axios, locale, itemPerPage, pageId);

		return {
			agentsList: agents,
            title:  i18n.t("agents")
		};
	},
    head() {
		return {
			title: `${this.$t("agents")} | ${this.$t("parsmega")}`,
			meta: [
                { hid: "robots", name: "robots", content: "noindex,nofollow" }
            ]
		};
	},
    components: {
		breadcrumbBase,
        agentCard
	},
};
</script>
<style lang="scss" scoped>
.agents-page {
    margin: 0 auto;
    max-width: $app-max-width;
    position: relative;
    padding: 0 $padding-default;
    width: 100%;

	&__breadcrumb {
		padding-left: 0;
		padding-right: 0;
	}

	&__title {
		font-size: 18px;
		font-weight: bold;
		margin: 0 auto;
		padding: $padding-default 0;
	} 
    
	&__description {
		color: $color-text--light;
		font-size: 14px;
		line-height: 2;
        margin: 0 auto;
        padding: 0;
	}

    &__cards-wrapper {
        font-size: 0;
        margin: $padding-default auto;
    }

    &__card {
        display: inline-block;
        margin-bottom: $padding-default;
        vertical-align: top;
        width: 100%;

        @media (min-width: 640px) {
            width: calc(50% - (#{$padding-default} * 0.5));
            
            &:nth-child(2n) {
                margin-right: $padding-default;

                [data-lang="en"] &{
                    margin-left: $padding-default;
                }
            }
        }

        @media (min-width: $tablet) {
            width: calc(33.3% - (#{$padding-default * 2} * 0.33));

            &:nth-child(2n) {
                margin-right:0;
                
                [data-lang="en"] &{
                    margin-left: 0;
                }
            }

            &:nth-child(3n-1) {
                margin-left: $padding-default;
                margin-right: $padding-default;
                
                [data-lang="en"] &{
                    margin-left: $padding-default;
                    margin-right: $padding-default;
                }
            }
        }
    }
}
</style>