furizon_webint/tpl/carpooling.html

{% extends "base.html" %}
{% block title %}Furizon 2023 Carpooling{% 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>Welcome to the carpooling page! Here you can see all of the available seats of other people attending the con. Use the form below to report if you want to offer a ride yourself or are looking for one!</p>
		<p class="notice" style="background:var(--primary);">ℹ️ Did you know? Now you can also <strong>offer</strong> rides and change the destination!</p>
		<form action="" method="post">
			{% if error %}
				<p class="notice">⚠️ {{error}}</p>
			{% endif %}
			<section>
				<label for="switch"><input type="checkbox" id="wants_carpool" name="wants_carpool" role="switch" onchange="document.getElementById('tripform').style.display = this.checked?'initial':'none';" {{'checked' if order.carpooling_message else ''}}> I want to offer or request a ride</label>
			</section>

			<div id="tripform" style="{{'display:none;' if not order.carpooling_message else ''}}">
				<h3>Trip details</h3>
				<div class="grid">
					<label for="from_location">
						Departure
						<input type="text" id="from_location" name="from_location" placeholder="Example: Milan, Italy" value="{{order.carpooling_message.from_location}}" required>
					</label>
					<label for="to_location">
						Arrival (empty if to Furizon)
						<input type="text" id="to_location" name="to_location" value="{{order.carpooling_message.to_location}}" placeholder="Furizon, Cavalese">
					</label>
				</div>
				
				<!-- Depending on this, show or hide the below form parts -->
				<label for="offer_or_need">Are you offering or need a ride?</label>
				<select name="offer_or_need" id="offer_or_need">
					<option value="need" {{'selected' if order.carpooling_message.offer_or_need == 'need'}}>I'm looking for a ride</option>
					<option value="offer" {{'selected' if order.carpooling_message.offer_or_need == 'offer'}}>I'm offering a ride</option>
				</select>				
								
				<label for="day_departure">
					Day of departure
					
					<select name="day_departure" id="day_departure">
					  <option value="m29th" {{'selected' if order.carpooling_message.day_departure == 'm29th'}}>May 29th</option>
					  <option value="m30th" {{'selected' if order.carpooling_message.day_departure == 'm30th'}}>May 30th</option>
					  <option value="m31st" {{'selected' if order.carpooling_message.day_departure == 'm31st'}}>May 31st</option>
					  <option value="j1st" {{'selected' if order.carpooling_message.day_departure == 'j1st'}}>June 1st</option>
					  <option value="j2nd" {{'selected' if order.carpooling_message.day_departure == 'j2nd'}}>June 2nd</option>
					  <option value="j3rd" {{'selected' if order.carpooling_message.day_departure == 'j3rd'}}>June 3rd</option>
					  <option value="j4th" {{'selected' if order.carpooling_message.day_departure == 'j4th'}}>June 4th</option>
					</select>
				</label>
				<textarea id="message" name="message" style="height:10em;" placeholder="Write here your message" required>{{order.carpooling_message.message}}</textarea>
				<small>Don't forget to write <strong>how you want to be contacted</strong>, how many seats are available, the estimated time of departure and what kind of baggage you allow. Also, perhaps time to plan the trip back?</small>
			</div>

			<!-- Button -->
			<button type="submit">Save changes</button>
		</form>
		
		<hr />
		{% if not orders %}
			<p style="text-align:center;">Nobody sharing a trip yet :(<br />Check back later!</p>
		{% endif %}
		{% for o in orders %}
			<blockquote>
				<p style="margin-bottom:1em;"><strong>{{o.name}}</strong> {{'is offering' if o.carpooling_message.offer_or_need == 'offer' else 'needs'}} a trip from <strong>{{o.carpooling_message.from_location}}</strong> {% if o.carpooling_message.to_location %}to <strong>{{o.carpooling_message.to_location}}</strong>{% endif %} on the <strong>{{o.carpooling_message.day_departure[1:]}} of {{'May' if o.carpooling_message.day_departure[0] == 'm' else 'June'}}</strong>.</p>
				<img class="propic propic-{{o.sponsorship}}" style="margin-top:0.5em;margin-right:1em;float:left;max-width:4em;" src="/res/propic/{{o.ans('propic') or 'default.png'}}" />
				<span style="font-size:.8em;">{{o.carpooling_message.message|escape|replace("\n", "<br />"|safe)}}</span>
				<br clear="both" />
			</blockquote>
		{% endfor %}
	</main>
{% endblock %}