{# Shows a fancy, optional lists of boats. They are grouped by boat category. 
   
   Inputs: boats
   Parameters: only_ones: if set, only 1x boats are shown
 #}
{% macro show_boats(only_ones) %}
	{% if only_ones %}
		{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
	{% endif %}
	{% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
		<div class="pb-2">
			<div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
				<strong>{{ amount_seats }}x</strong>
			</div>
			{% for boat in grouped_boats %}
				<div id="boat-{{ boat.id }}" class="px-3" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value={{ boat.id }}; document.getElementById('newrower-max_rower_allowed').innerHTML={{ boat.amount_seats }}; document.getElementById('departure').value = new Date().toISOString().slice(0,16);" {% endif %}>
					<span class="status-damage status-damage-{{ boat.damage }}"></span>
					<span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}
						{% if boat.owner %}
							<span class="opacity-50">(privat)</span>
						{% endif %}
					</span>
				</div>
			{% endfor %}
		</div>
	{% endfor %}
{% endmacro show_boats %}

{# Shows the form for creating a new logbook entry. #}
{% macro new(only_ones, allow_any_shipmaster, shipmaster) %}
	<form action="/log" method="post" id="form" class="grid grid-cols-2 gap-3" onsubmit="Array.from(this.elements).forEach(e=>!e.value.trim()&&(e.disabled=true));">
		{{ log::boat_select(only_ones=only_ones) }}

		{% if allow_any_shipmaster %}
			<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
				<optgroup label="Steuerleute">
					{% for cox in coxes %}
						<option value="{{ cox.id }}" {% if cox.id == shipmaster%} selected {% endif %}>{{ cox.name }}</option>
					{% endfor %}
				</optgroup>
				<optgroup label="Mitglieder">
					{% for user in users | filter(attribute="is_cox", value=false) %}
						<option value="{{ user.id }}" {% if user.id == shipmaster%} selected {% endif %}>{{ user.name }}</option>
					{% endfor %}
				</optgroup>
			</select>
		{% else %}
			<input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
		{% endif %}
		{% if not only_ones %}
			{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering') }}
		{% endif %}

		{% if not only_ones %}
			{{ log::rower_select(id="newrower", selected=[], class="col-span-2") }}
		{% endif %}

		<div></div>

		<div>
			<label for="destination" class="small text-gray-600">Ziel</label>
			<input type="search" class="input rounded-md" list="destinations" placeholder="Destination" name="destination" id="destination">
			<datalist id="destinations">
				{% for distance in distances %}
					<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
				{% endfor %}
			</datalist>
		</div>
		{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true) }}
		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}

		<div>
			<label for="destination" class="small text-gray-600">Ziel</label>
			<input type="search" class="input rounded-md set-distance-js" list="destinations" placeholder="Destination" name="destination" id="destination" data-relation="distance_in_km">
			<datalist id="destinations">
				{% for distance in distances %}
					<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
				{% endfor %}
			</datalist>
		</div>

		<div class="relative">
			{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=1) }}
			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
		</div>
		{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-2") }}

		<div class="col-span-2">
			<label for="logtype" class=" small text-gray-600 ">Typ</label>
			{{ macros::select(data=logtypes, name='logtype', default="Normal") }}
		</div>
		<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto"/>
	</form>
{% endmacro new %}


{% macro boat_select(only_ones) %}
	{% if not only_ones %}
		{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
	{% else %}
		{% set ones = boats | filter(attribute="amount_seats", value=1) %}
		{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
	{% endif %}
{% endmacro boat_select %}

{% macro rower_select(id, selected, amount_seats='', class='') %}
	<div class="{{ class }}">
		<select style="width: 100px;" multiple="multiple" name="rowers[]" multiselect-search="true" id="{{id}}" class="w-full">
			{% for user in users %}
				{% set_global sel = false %}
				{% for rower in selected %}
					{% if rower.id == user.id %}
						{% set_global sel = true %}
					{% endif %}
				{% endfor %}
				<option value="{{ user.id }}" {% if sel %} selected {% endif %}>{{user.name}}</option>
			{% endfor %}
		</select>
	</div>
	<div>
		<span id="{{id}}-amount_rower_selected"></span>
		<span id="{{id}}-max_rower_allowed">{{amount_seats}}</span>
		Ruderer auszuwählen
	</div>
{% endmacro rower_select %}

{% macro show(log, state, allowed_to_close=false, only_ones) %}
	<div class="grid grid-cols-1 gap-3 mb-3 w-full">
		<div class="pt-2 px-3 {% if not loop.first %} border-t {% endif %}">
			<div class="w-full">
				<div class="flex justify-between">
					<div>
						<strong class="text-primary-900">
							{{ log.departure_timestamp | date(format="%H:%M") }}
							Uhr
						</strong>
						<small class="text-gray-600">({{ log.boat.name }})</small>
					</div>

					<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
						Details
					</a>
				</div>

				<div>
					{% if allowed_to_close and state == "on_water" %}
						<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
							Beenden
						</a>
					{% endif %}
				</div>

				<div class="hidden">
					{% if allowed_to_close and state == "on_water" %}
						<div id="close{{ log.id }}">
							{{ log::home(log=log, only_ones=only_ones) }}
						</div>
					{% endif %}
					<div id="log{{ log.id }}">
						{% if log.destination %}
							{{ log.destination }}
						{% endif %}

						{% for cox in coxes %}
							{% if cox.id == log.shipmaster %}
								<p>
									<strong>{{ cox.name }}</strong>
								</p>
							{% endif %}
						{% endfor %}

						{% for rower in log.rowers %}
							<p>{{ rower.name }}</p>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
{% endmacro show %}

{% macro show_old(log, state, allowed_to_close=false, only_ones) %}
	Bootsname:
	{{ log.boat.name }}<br/>
	Schiffsführer:
	{{ log.shipmaster_user.name }}<br/>
	{% if log.shipmaster_only_steering %}
		Schiffsführer steuert nur
	{% endif %}
	Weggefahren:
	{{ log.departure }}<br/>
	{% if state == "completed" %}
		Angekommen:
		{{ log.arrival}}<br/>
	{% endif %}
	{% set amount_rowers = log.rowers | length %}
	{% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
	{% if allowed_to_close and state == "on_water" %}
		{{ log::home(log=log, only_ones=only_ones) }}
	{% else %}
		Ziel:
		{{ log.destination }}<br/>
		{% if state == "completed" %}
			Km:
			{{ log.distance_in_km }}<br/>
		{% endif %}
		{% if log.comments %}
			Kommentare:
			{{ log.comments }}<br/>
		{% endif %}
		{% if log.logtype %}
			Logtype:
			{{ log.logtype }}<br/>
		{% endif %}
		{% if amount_guests > 0 or log.rowers | length > 0 %}
			Ruderer:
		{% endif %}
		{% if amount_guests > 0 %}
			{{ amount_guests }}
			Gäste (ohne Account)
		{% endif %}
		{% for rower in log.rowers %}
			{{ rower.name }}
		{% endfor %}
	{% endif %}
{% endmacro show_old %}

{% macro home(log, only_ones) %}
	<form class="grid grid-cols-1 gap-3" action="/log/{{log.id}}" method="post">
		{% if not only_ones %}
			{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
		{% endif %}
		<div class="relative">
			<label for="destination" class="small text-gray-600">Ziel</label>

			<input class="input rounded-md set-distance-js change-id-js" type="search" list="destinations" placeholder="Destination" required="required" id="destination{{ log.id }}" name="destination" value="{{log.destination}}" data-relation="distance_in_km{{log.id}}"/>
		</div>

		<div class="relative">
			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }}
			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
		</div>

		{{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}

		<div>
			<label for="logtype" class=" small text-gray-600 ">Typ</label>
			{{ macros::select(data=logtypes, name="logtype", id="logtype" ~ log.id, default="Normal", selected_id=log.logtype, class="rounded-md change-id-js") }}
		</div>
		<input class="btn btn-primary" type="submit" value="Ausfahrt beenden"/>
	</form>
{% endmacro home %}