<template>
	<section class="your-projects">
		<section-title icon="mdi mdi-folder-open">
			{{ $t('HOMEPAGE_SECTION_PROJECTS') }}
		</section-title>
		<project-list :projects="projects" :rows="2">
			<template #empty>
				<div class="your-projects__empty">
					<HomeEmptyGraphic />
					<h2 class="your-projects__empty-title">
						{{ $t('HOMEPAGE_NO_PROJECTS') }}
					</h2>
					<p class="your-projects__empty-text">
						{{ $t('HOMEPAGE_CREATE_PROJECT_CLICK') }}
						<a href="#" @click="$emit('create')">{{ $t('HOMEPAGE_CREATE_PROJECT_HERE') }}</a>
						{{ $t('HOMEPAGE_CREATE_PROJECT_FIRST_PROJECT') }}
					</p>
				</div>
			</template>
		</project-list>
	</section>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';

export default Vue.extend({
	name: 'YourProjects',

	props: {
		projects: {
			type: Array as PropType<any[]>,
			required: true
		}
	}
	
});
</script>

<style lang="scss">
.your-projects {
	@include margin(14, b);

	&__empty {
		@include margin(5, y);

		text-align: center;

		svg {
			height: 10rem;
			margin: 0 auto;
		}

		p {
			margin: 0 auto;
			max-width: 480px;
		}
	}

	&__empty-title {
		@include font-size(xl);
		@include font-weight(medium);
		@include margin(4, t);

		color: #737373;
	}

	&__empty-text {
		@include font-size(lg);

		color: #a3a3a3;
	}
}
</style>