<template>
	<section class="project-calendar">
		
		<aside>
			<header class="project-calendar__day-header">
				<h1 class="project-calendar__day-header__title">1</h1>
				<small class="project-calendar__day-header__subtitle">Monday</small>
			</header>

			<section class="project-calendar__day-list">
				<div
					v-for="j in 24"
					:key="j"
					class="project-calendar__day-list__entry"
				>
					<h2>Demo</h2>
					<!-- {{ j < 10 ? `0${j-1}:00` : `${j-1}:00` }} -->
				</div>
			</section>
		</aside>

		<section
			v-for="i in 7" 
			:key="i"
			class="project-calendar__day"
		>
			<header class="project-calendar__day-header">
				<h1 class="project-calendar__day-header__title">1</h1>
				<small class="project-calendar__day-header__subtitle">Monday</small>
			</header>

			<section class="project-calendar__day-list">
				<div
					v-for="j in 24"
					:key="j"
					class="project-calendar__day-list__entry"
				>
					<h2>Demo</h2>
					<!-- <TaskTile 
						:task="{ id: 0, labels: [], localId: 0, summary: '', isWatching: false, assignees: [], childTasks: [], description: ''}"
					/> -->
				</div>
			</section>
		</section>
		
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import dayjs from "dayjs";

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

<style lang="scss" scoped>

$border: 1px solid rgba(0, 0, 0, 0.15);

.project-calendar
{
	display: grid;
	grid-template-columns: 120px repeat(7, 1fr);

	height: max-content;
	max-height: 100%;
	overflow: auto;

	aside {
		border-right: $border;
	}

	&__day {
		border-right: $border;
		height: 354.3vh;

		&:last-child {
			border-right: none;
		}

		&:nth-child(odd) {
			background-color: var(--color-shade-4);
		}

		&-header {
			border-bottom: $border;
			padding: 14px 20px;

			&__title {
				font-size: 2rem;
				font-weight: 500;
			}

			&__subtitle {
				font-size: 1.2rem;
			}
		}

		&-list {
			display: grid;
			grid-template-rows: repeat(24, 140px);
			height: 250vh;

			&__entry {
				border-bottom: $border;
				@include padding(2, a);
			}
		}
	}
}

</style>