{% extends "base.html" %}
{% block title %}Your Booking{% endblock %}
{% block main %}
	<main class="container">
		<header>
			<h1><img src="{{order.ans('propic') or '/res/avatar.jpg'}}" class="propic"> {{order.ans('fursona_name')}}'s booking</h1>
		</header>
		{% if order.status() == 'pending' %}
			<p class="notice">⚠️ Your order is still pending. You will not be able to reserve a room. <a href="#">Check your payment status</a></p>
		{% endif %}
		{% if not order.ans('propic') %}
			<p class="notice">⚠️ You still haven't uploaded a profile pic. <a href="#">Upload one now</a></p>
		{% endif %}
		
		<section id="room_prompt">
			<h3>Room Status:
				{% if order.ans('room_confirmed') %}
					{{order.ans('room_confirmed')}}
					<span style="color: green;">room confirmed</span></h3>
					<p>Your room is confirmed! Enjoy the convention :)</p>
				{% elif order.ans('room_members') %}
					<span style="color: yellow;">pending room</span></h3>
					<p>You have a room, but it is not confirmed! Make sure all room owners have paid, then use the button below to reserve the room for two people.</p>
					
					<h5>Your room</h5>
					<div class="grid people">
						{% set room = namespace(forbidden=false) %}
						{% for person in roommate_orders %}
							<div>
								<img class="propic" src="https://picsum.photos/200" />
								<h3>{{person.ans('fursona_name')}}</h3>
								<p>{{person.ans('staff_title') if person.ans('staff_title') else ''}}{{' · Fursuiter' if person.ans('is_fursuiter') != 'No'}}</p>
								<p>{{('<strong style="color:red;">UNPAID</strong>' if person.status() == 'pending')|safe}}</p>
							</div>
							{% if person.status() != 'paid' %}
								{% set room.forbidden = True %}
							{% endif %}
						{% endfor %}
					</div>
					
					<h5>Available rooms</h5>
					<table>
						<tr>
							<td>Single room</td>
							<td>{{room_qty[1]}} available</td>
						</tr>
						<tr>
							<td>Double room</td>
							<td>{{room_qty[2]}} available</td>
						</tr>
						<tr>
							<td>Triple room</td>
							<td>{{room_qty[3]}} available</td>
						</tr>
						<tr>
							<td>Quadruple room</td>
							<td>{{room_qty[4]}} available</td>
						</tr>
						<tr>
							<td>Quintuple room</td>
							<td>{{room_qty[5]}} available</td>
						</tr>
					</table>
					
					{% if room.forbidden %}
						<p>Since at least one of your roommates still have a pending reservation, you will not be able to reserve a room for now.</p>
						<button disabled>Reserve a room for 3 people</button>
					{% else %}
						<button>Reserve a room for 3 people</button>
					{% endif %}
				{% else %}
					<span style="color: red;">no room</span></h3>
					<p>You currently don't have any room. If you don't create or join one within 42 days, 10 hours, 32 minutes, 13 seconds, we will assign you to a random one.</p>
					<form>
						<div class="grid">
							<button>Create a room</button>
							<button>Join another room</button>
						</div>
					</form>
				{% endif %}		


		</section>
	</main>


		<!--<section id="room_prompt">
			<h3>Room status: </h3>
			<p>Good news</p>
					<div class="grid">
						<button>Create a room</button>
						<button>Join another room</button>
					</div>

				</section>
			</main>-->
{% endblock %}