{% extends "base.html" %}
{% block title %}{{order.name}}'s Booking{% 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 Beyond!</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?</th>
				<td>30 May → 3 June 2023</td>
			</tr>
			<tr>
				<th>Your ticket</th>
				<td>
					<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=BEYOND-{{order.code}}.pdf" target="_blank">Download ticket PDF</a>
					{% endif %}
				</td>
			</tr>
		</table>
		
		<h2>Manage your booking</h2>
		{% include 'blocks/payment.html' %}
		{% include 'blocks/room.html' %}
		{% include 'blocks/badge.html' %}
		<!--<details id="security">
			<summary role="button"><img src="/res/icons/lock.svg" class="icon" />Notifications & 2FA <span class="status">⚠️</span></summary>
			<p>To receive updates and to keep your private area safer, you can associate your booking to your Telegram account.</p>
			<a href="https://t.me/FurizonBot?start=aooooooooooo"><img style="display:block;margin:0 auto;" src="/res/icons/login_with_telegram.png" /></a>
		</details>-->
		
		<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="stats">
			<summary role="button"><img src="/res/icons/stats.svg" class="icon" />Statistics</summary>
			<p>We know that furries love numbers and statistics, which is why we've added even more statistical tracking to this year's convention. Keep an eye out for updates on all the interesting data we'll be collecting throughout the event.</p>
			<a href="/manage/statistics" role="button">See statistics</a>
		</details>-->
		<!--<details id="roommates">
			<summary role="button"><img src="/res/icons/roommates.svg" class="icon" />Roommate search</summary>
		</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>

		<!--
		<details id="carpooling" open>
			<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>
			<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>
		
		<h2>All about the Convention</h2>
		<details id="fursuiters">
			<summary role="button"><img src="/res/icons/mask.svg" class="icon" />Services for Fursuiters</summary>
		</details>
		<details id="badge">
			<summary role="button">Roommate search</summary>
		</details>
		<details id="badge">
			<summary role="button">Group Chat & Summary</summary>
		</details>
	</main> -->

	{% 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 %}