<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>datetime.link</title>
	<meta name="viewport" content="width=device-width">

	{{template "resources.html"}}
</head>
<body>
	{{template "resources-body.html"}}

	<main id="app">
		{{$app := .App}}
		{{$t := .Req.Time}}
		{{range .Req.Zones}}
			<d-zone zone="{{.}}">
				{{$zoneName := .}}
				{{with resolveZone $app .}}
					{{if .Error}}
						<d-zoneerror>
							Unable to load zone "{{$zoneName}}". The zone could be invalid
						</d-zoneerror>
					{{else}}
						{{$zt := $t.In .Location}}
						<d-zoneinfo>
							<d-zonename>{{.Name}}</d-zonename>
							{{if not .IsOffset}}
								<d-zoneoffset>{{.TimeOffset $t | formatOffset}}</d-zoneoffset>
							{{end}}
							<d-date date="{{$zt.Format "2006-01-02"}}">{{$zt.Format "2006-01-02"}}</d-date>
						</d-zoneinfo>
						<d-zonefigure>
							<d-time time="{{$zt.Format "15:04"}}">{{$zt.Format "15:04"}}</d-time>
						</d-zonefigure>
					{{end}}
				{{end}}
			</d-zone>
		{{end}}
		<!--
		<d-zone>
			<d-zoneinfo>
				<d-zonename>India Standard Time</d-zonename>
				<d-zoneoffset>+5:30</d-zoneoffset>
				<d-date date="2020-06-02">2020-06-02</d-date>
			</d-zoneinfo>
			<d-zonefigure>
				<d-time time="14:00">14:00</d-time>
			</d-zonefigure>
		</d-zone>
		<d-zone>
			<d-zoneinfo>
				<d-zonename>Singapore Time</d-zonename>
				<d-zoneoffset>+8:00</d-zoneoffset>
				<d-date date="2020-06-02">2020-06-02</d-date>
			</d-zoneinfo>
			<d-zonefigure>
				<d-time time="16:30">16:30</d-time>
			</d-zonefigure>
		</d-zone>
		<d-zone>
			<d-zoneinfo>
				<d-zonename>New York, USA</d-zonename>
				<d-zoneoffset>-4:00</d-zoneoffset>
				<d-date date="2020-06-02">2020-06-02</d-date>
			</d-zoneinfo>
			<d-zonefigure>
				<d-time time="04:30">04:30</d-time>
			</d-zonefigure>
		</d-zone>
		-->
	</main>

	{{template "footer.html"}}

	<!-- Work in progress...
	<script src="/js/third-party/luxon.min.js"></script>
	<script src="/js/interactive.js" async></script>
	-->
</body>
</html>
