{% extends "base.html" %}
{% block title %}{{order.name}}'s Booking{% endblock %}
{% block head %}
    <!--Open Graph tags here-->
    <meta property="og:title" content="Furizon booking management" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:alt" content="Furizon's logo" />
	<meta property="og:image" content="https://reg.furizon.net/res/furizon.png" />
	<meta property="og:image:secure_url" content="https://reg.furizon.net/res/furizon.png" />

{% endblock %}
{% block main %}
	<main class="container">
		<header>
			<picture>
				<source srcset="/res/furizon.png" media="(prefers-color-scheme:dark)">
				<img src="/res/furizon-light.png" style="height:4rem;text-align:center;">
			</picture>
		</header>
		
		<p>From here, you can easily manage all aspects of your booking, including composing your hotel room, designing your badge, and updating your payment information. Simply use the buttons below to navigate between the different sections.</p>
		<p>Buttons marked with ⚠️ require your attention</p>
		
		<p>If you have any questions or issues while using this page, please don't hesitate to contact us for assistance. We look forward to seeing you at Furizon Overlord!</p>
		<hr />
		<h2 id="info">Useful information</h2>
		<table>
			<tr>
				<th>Where?</th>
				<td>
					<a href="geo:46.29115,11.45731"><img src="/res/icons/location.svg" class="icon" />Park Hotel Sacro Cuore · Cavalese (TN)</a>
				</td>
			</tr>
			<tr>
				<th>When{{' (convention)' if order.has_early or order.has_late else ''}}?</th>
				{# This should be early/late excluded! #}
				<td><img src="/res/icons/calendar.svg" class="icon" />4 June → 8 June 2024</td></td>
			</tr>
			{% if order.has_early or order.has_late %}
				<tr>
					<th>When (check-in)?</th>
					<td>
						{{('3' if order.has_early else '4')|safe}} June → {{('9' if order.has_late else '8')|safe}} June 2024
						{% if order.has_early %}
							<span class="tag">EARLY</span>
						{% endif %}
						{% if order.has_late %}
							<span class="tag">LATE</span><br />
						{% endif %}
					</td>
				</tr>
			{% endif %}
			<tr>
				<th>Your ticket</th>
				<td>
					{% if order.sponsorship %}
						<img src="/res/icons/star.svg" class="icon" />
						You are a {{'super' if order.sponsorship == 'super' else ''}}sponsor!
						<br />
					{% endif %}
					<img src="/res/icons/qr.svg" class="icon" />
					<a href="javascript:document.getElementById('modal-barcode').setAttribute('open', 'true');">Show Check-in Barcode ({{order.code}})</a>
					{% if order.status == 'paid' and order.room_confirmed %}
						<br />
						<img src="/res/icons/pdf.svg" class="icon" />
						<a href="/manage/download_ticket?name=OVERLORD-{{order.code}}.pdf" target="_blank">Download ticket PDF</a>
					{% endif %}
				</td>
			</tr>
		</table>
		
		<h2>Manage your booking</h2>
		{% include 'blocks/payment.html' %}
		{% if not order.daily %}
			{% include 'blocks/room.html' %}
		{% endif %}
		{% include 'blocks/badge.html' %}
		
		<details id="barcard">
			<summary role="button"><img src="/res/icons/bar.svg" class="icon" />Barcard</summary>
			<p>This year's badges will be NFC-enabled and serve as a digital barcard, allowing you to load 'drinks' onto your badge and use it to purchase beverages at the bar without the need for physical cash or the risk of losing a paper barcard. The barcard system will be enabled closer to the convention, so you will have the opportunity to load your badge in advance and enjoy a convenient, cashless experience at the event. Keep an eye out for updates on when the system will be live and available for use.</p>
		</details>
		
		<h2>Get to know others</h2>
		<details id="attendees">
			<summary role="button"><img src="/res/icons/users.svg" class="icon" />Attendee list</summary>
			<p>If you want to find out where your friends are staying at the convention, just click this link to see a list of all attendees and their assigned rooms. You'll be able to see which rooms are already occupied and by whom, so you can easily plan meet-ups with your friends.</p>
			<a href="/manage/nosecount" role="button">Nose count</a>
		</details>
		
		<details id="carpooling">
			<summary role="button"><img src="/res/icons/car.svg" class="icon" />Carpooling</summary>
			<p>We want to make it easy for attendees to find and offer carpooling options. If you have seats available in your car, you can use our carpooling system to offer rides to other attendees. And if you need a ride, you can search for leftover seats in cars that are already heading to the convention. This is a great way to save money on gas and reduce your carbon footprint, while also getting to know other attendees and making new friends.</p>
			<div class="grid"><a href="/manage/carpooling" role="button">Find or offer a trip</a></div>
		</details>
		
		<details id="telegram">
			<summary role="button"><img src="/res/icons/telegram.svg" class="icon" />Group Chat & Channels</summary>
			<p>We encourage you to join these groups and participate in the conversations so you can stay in the loop and connect with other attendees. To join the groups, simply click on the links provided down below!</p>
			<table>
				<tr>
					<td>Noticeboard</td>
					<td><a href="https://t.me/APSFurizon">@APSFurizon</a></td>
				</tr>
				<tr>
					<td>Group Chat</td>
					<td><a href="https://t.me/+H-vcfRyHQAxkODk8">https://t.me/+H-vcfRyHQAxkODk8</a></td>
				</tr>
			</table>
		</details>

	{% include 'blocks/room_extra.html' %}
	
	
	<dialog id="modal-barcode">
		<article>
			<a href="#close" aria-label="Close" class="close" onClick="javascript:this.parentElement.parentElement.removeAttribute('open')"></a>
			<img src="/manage/barcode/{{order.barcode}}" style="max-width:20em;margin:0 auto;display:block;" class="icon" />
			<p style="text-align:center;font-family:monospace;">{{order.code}}</p>
		</article>
	</dialog>
	
{% endblock %}