<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Event Calendar</title>
	<link rel="icon" type="image/png" href="./static/favicon.png" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="./static/css/common.css">
	<link rel="stylesheet" href="./static/css/style.css">
</head>

<body class="bg-light">

<div id="wrapper" class="d-flex flex-column vh-100">
	<header class="d-flex flex-wrap align-items-stretch flex-shrink-0 p-2 row-gap-2">
		<div class="flex-grow-1 display-6 d-flex align-items-center cea-blue">
			<select class="v-select d-inline-block mx-2 fw-medium cea-blue" id="caltype">
				<option value="daily">Daily</option>
				<option value="monthly">Monthly</option>
			</select>
			<span>Calendar</span>
		</div>
		<div class="d-flex">
			<input type="date" id="selected_date" class="form-control h-100 fs-3 me-2">
			<button type="button" class="btn btn-primary h-100 text-center fs-3 lh-1 text-nowrap" id="checkout" $disabled>
				New Event
			</button>
		</div>
	</header>

	<main class="d-flex flex-grow-1 min-height-0" id="main">
	</main>

	<footer></footer>
</div>

<template id="t-daily">
	<div id="allday" class="d-flex flex-column row-gap-3 overflow-y-auto px-2 border">
		<div class="sticky-top pt-2 bg-light">
			<div class="fs-4">All day</div>
			<hr class="m-0">
		</div>
	</div>
	<div id="timings" class="d-flex flex-column position-relative justify-content-between px-1 text-end"></div>
	<div id="events" class="position-relative border"></div>
</template>

<template id="t-monthly">
	<div class='container-fluid'>
		<div id='daynames' class='row bg-dark text-white p-1'></div>
	</div>
	<div class='container-fluid' id='monthlycalendar'></div>
</template>

<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="eventModalLabel">New Event</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form method="post" id="eventform">
					<div class="mb-3">
						<input type="text" name="name" id="name" class="form-control" placeholder="Name" required="true" autofocus>
						<textarea name="message" id="message" class="form-control" rows="3" placeholder="Message (optional)"></textarea>
					</div>

					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">From</label>
						<div class="col-sm-5">
							<input type="time" name="timefrom" id="timefrom" class="form-control" required="true">
						</div>
						<div class="col-sm-5">
							<input type="date" name="datefrom" id="datefrom" class="form-control" required="true">
						</div>
					</div>

					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">To</label>
						<div class="col-sm-5">
							<input type="time" name="timeto" id="timeto" class="form-control" required="true">
						</div>
						<div class="col-sm-5">
							<input type="date" name="dateto" id="dateto" class="form-control" required="true">
						</div>
					</div>
					<div class="row">
						<div class="form-check col-sm-5 offset-sm-2">
							<input class="form-check-input" type="checkbox" name="timetbd" id="timetbd">
							<label class="form-check-label" for="timetbd">End time TBD</label>
						</div>
						<div class="form-check col-sm-5">
							<input class="form-check-input" type="checkbox" name="datetbd" id="datetbd">
							<label class="form-check-label" for="datetbd">End day TBD</label>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer" id="eventFooter">
				<div class="row">
					<div class="col-6">
						<button type="button" class="btn btn-danger btn-lg w-100" id="eventdelete" $disabled>Delete</button>
					</div>
					<div class="col-6">
						<button type="button" class="btn btn-primary btn-lg w-100" id="eventsubmit" $disabled>Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="./static/js/cookie.js"></script>
<script src="./static/js/dayjs.min.js"></script>
<script src="./static/js/dayjs.customParseFormat.js"></script>
<script src="./static/js/dayjs.minMax.js"></script>
<script src="./static/js/dayjs.isBetween.js"></script>
<script src="./static/js/dayjs.duration.js"></script>
<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
<script src="./static/js/script.js"></script>
<script src="./static/js/${user}.js"></script>
</body>
</html>