<template>
	<section class="project-calendar">
		<!--
			<div class="project-view-empty">
			<ProjectCalendarEmptyGraphic
				:color="project.accentColor"
			/>
			<h2>
				Schedule your tasks
			</h2>
			<p>
				Define start and due dates for your tasks to plot them into the project calendar
			</p>
			<w-button
				bg-color="primary"
				color="white"
				@click="openTaskCreator"
			>
				Create task
				<w-icon class="right">
					mdi mdi-plus
				</w-icon>
			</w-button>
		</div>
		-->
		
		<container>
			<header class="d-flex justify-space-between pb5 pt2">
				<w-button bg-color="shade-2" @click="() => {}">
					<w-icon>mdi mdi-chevron-left</w-icon>
				</w-button>
				<h1 class="bold">{{ now.$y }}</h1>
				<w-button bg-color="shade-2" @click="() => {}">
					<w-icon>mdi mdi-chevron-right</w-icon>
				</w-button>
			</header>
			<section class="project-calendar__view">
				<div 
					v-for="i in 35" :key="i" 
					class="project-calendar__card"
				>
					{{ i }}
				</div>
			</section>
		</container>
		
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import Container from '~/components/Container.vue';
import dayjs from "dayjs";

export default Vue.extend({
	components: { Container },
	props: {
		project: Object
	},
	data: () => ({
		now: dayjs()
	}),
	methods: {
		openTaskCreator() {
			this.$store.commit('viewNewTaskDialog', true);
		}
	}
});
</script>

<style lang="scss" scoped>

.project-calendar
{
	@include padding(2, a);
	width: 100%;
	height: 100%;

	&__view
	{
		display: grid;
		grid-template-columns: repeat(7, auto);
		grid-template-rows: repeat(5, min-content);
		gap: 0.5rem;
	}

	&__card
	{
		@include padding(2, a);
		background-color: var(--color-shade-2);
		aspect-ratio: 1;
	}
}

</style>