<template>
	<section class="explore-page">
		<div class="explore-page__header">
			<div class="explore-page__title">
				{{ $t('EXPLORER_EXPLORE_PROJECTS') }}
			</div>
			<div>
				{{ $t('EXPLORER_EXPLORE_PROJECTS_DESC') }}
			</div>
		</div>

		<div class="explore-page__content container">
			<template v-if="authenticProjects.length > 0">
				<section-title icon="mdi mdi-folder-open">
					{{ $t('EXPLORER_AUTHENTIC_PROJECTS') }}
				</section-title>
				
				<project-list
					:projects="authenticProjects"
					:rows="1"
					class="explore-page__authentic-list"
				>
					<template #empty>
						{{ $t('EXPLORER_AUTHENTIC_NO_PROJECTS') }}
					</template>
				</project-list>
			</template>

			<section-title icon="mdi mdi-folder-open">
				{{ $t('EXPLORER_PUBLIC_PROJECTS') }}
			</section-title>
			
			<project-list :projects="publicProjects" :rows="4">
				<template #empty>
					{{ $t('EXPLORER_PUBLIC_NO_PROJECTS') }}
				</template>
			</project-list>
		</div>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import fetchExplorableProjects from '~/assets/query/explore/fetchExplorableProjects.gql';

export default Vue.extend({
	name: "ExplorerPage",

	async asyncData({ $api }) {
		const result = await $api.query(fetchExplorableProjects);
		
		return {
			authenticProjects: result.authentic,
			publicProjects: result.public
		};
	},

	data: () => ({
		publicProjects: [],
		authenticProjects: []
	}),

	async created() {
		const result = await this.$api.query(fetchExplorableProjects);

		this.authenticProjects = result.authentic;
		this.publicProjects = result.public;
	}
});
</script>


<style lang="scss">
.explore-page {

	&__header {
		height: $header-height-small;
		margin-top: -$toolbar-height;
		background-color: var(--color-shade-0);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	&__title {
		@include font-size('2xl');
		@include font-weight(semibold);
		@include margin(6, t);
		@include padding(2, b);

		line-height: 1.375;
	}

	&__content {
		@include padding(12, t);
	}

	&__authentic-list {
		@include margin(10, b);
	}
}
</style>