{# 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 boats-js" {% if boat.damage != 'locked' %} data-seats="{{boat.amount_seats}}" data-default_shipmaster_only_steering="{{boat.default_shipmaster_only_steering}}" data-onclick="true" {% endif %} data-id="{{ boat.id }}">
					<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, shipmaster) %}
	<form action="/log" method="post" id="form" class="grid grid-cols-4 gap-3" onsubmit="Array.from(this.elements).forEach(e=>!e.value.trim()&&(e.disabled=true));">
		{{ log::boat_select(only_ones=only_ones) }}
		{% if not only_ones %}
			<div class="col-span-4 md:col-span-1">
				<div class="text-sm text-gray-600">Bootssteuerung</div>
				<div class="h-10 flex items-center">
					{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
				</div>
			</div>
		{% endif %}
		{% if not only_ones %}
			{{ log::rower_select(id="newrower", selected=[], class="col-span-4", init=true) }}
		{% endif %}
		{{ macros::select(label="Schiffsführer", data=[], name='shipmaster', id="shipmaster-newrowerjs", wrapper_class="col-span-2") }}
		{{ macros::select(label="Steuerperson", data=[], name='steering_person', id="steering_person-newrowerjs", wrapper_class="col-span-2") }}
		{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, wrapper_class='col-span-2') }}
		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', wrapper_class='col-span-2') }}
		<div class="relative col-span-2">
			<label for="destination" class="text-sm text-gray-600">Ziel</label>
			<input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" 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 col-span-2">
			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }}
			<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-4") }}
		{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
		<input type="submit" value="Ausfahrt eintragen" class="btn btn-primary w-full col-span-4 m-auto"/>
	</form>
{% endmacro new %}


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

{% macro rower_select(id, selected, amount_seats='', class='', init='false', cox_on_boat='', steering_person_id='') %}
	{% if not amount_seats or amount_seats > 1 %}
		<div class="{{ class }}">
			<label for="{{id}}" class="text-sm text-gray-600 ">Ruderer</label>
			<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
				{% 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 %} {% if user.on_water %} disabled="disabled" {% endif %} data-custom-properties='{"is_cox": {{ user.is_cox }}, "steers": {{ user.id == steering_person_id }}, "cox_on_boat": {{ user.id == cox_on_boat}}}'>
						{{user.name}}
						{% if user.on_water %}
							(am Wasser)
						{% endif %}
					</option>
				{% endfor %}
			</select>
		</div>
	{% endif %}
{% 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 items-center">
					<div>
						<strong class="block text-primary-900">
							{{ log.departure | date(format="%H:%M") }}
							Uhr
						</strong>
						<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="text-sm link-primary break-all">
							{{ log.boat.name }}
						</a>
					</div>
					<div>
						{% if allowed_to_close and state == "on_water" %}
							<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="border-0 btn btn-dark text-white flex items-center justify-center ml-3">
								{% include "includes/pencil" %}
							</a>
						{% endif %}
					</div>
				</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>
						<div>
							LÖSCHEN
						</div>
					{% endif %}
					<div id="log{{ log.id }}">
						{% if log.destination %}
							{{ log.destination }}
						{% endif %}
	
						{% for rower in log.rowers %}
							<p>{{ rower.name }} {% if rower.id == log.shipmaster %}Schiffsführer {% endif %}{% if rower.id == log.steering_person%}Steuerperson{% endif %}</p>
							{# @MB: shipmaster + steering_person could be prettier :') #}
						{% endfor %}
	
						{% set amount_rowers = log.rowers | length %}
						{% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
						{% if amount_guests > 0 %}
							Gäste (ohne Account):
							{{ amount_guests }}
						{% endif %}
	
						{% if allowed_to_close and state == "on_water" %}
							<a href="/log/{{ log.id }}/delete" class="btn btn-alert w-full absolute bottom-0 left-0" style="border-radius: 0;" onclick="return confirm('Willst du diesen Eintrag wirklich löschen? Die Daten gehen verloren');">Löschen</a>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
{% endmacro show %}

{% macro show_old(log, state, allowed_to_close=false, only_ones, index) %}
  <div class="border-t bg-white py-3 px-4 relative" data-filterable="true" data-filter="{{ log.boat.name }} {{ log.shipmaster_user.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}">
    {% if log.logtype %}
      <div class="absolute top-0 right-0 bg-primary-100 rounded-bl-md text-primary-950 text-xs w-32 px-2 py-1 text-center font-bold">
        {% if log.logtype == 1 %}
          Wanderfahrt
        {% else %}
           {% if log.logtype == 2 %}
            Regatta
           {% else %}
              {{ log.logtype }}
           {% endif %}
        {% endif %}
      </div>
    {% endif %}
    <div {% if log.logtype %} class="mt-4 sm:mt-0" {% endif %}>
      <strong>{{ log.boat.name }}</strong> <small class="text-gray-600">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuert {% endif %})</small>
      <small class="block text-gray-600">

        {% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %}
          {{ log.departure | date(format='%d.%m.%Y')}} ({{ log.departure | date(format='%H:%M')}} - {{ log.arrival | date(format='%H:%M')}})  
        {% else %}
              {{ log.departure | date(format='%d.%m.%Y (%H:%M)') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y (%H:%M)') }}{% endif %}
        {% endif %}
      </small>
      {% 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 %}
          <div>
            {{ log.destination }}
            {% if state == "completed" %}
              <small class="text-gray-600">({{ log.distance_in_km }} km)</small>
            {% endif %}

            {% if log.comments %}
              <span class="text-sm italic">- "{{ log.comments }}"</span>
            {% endif %}
          </div>
          {% if amount_guests > 0 or log.rowers | length > 0 %}
            <div class="text-sm text-gray-600">
              Mitruderer:
              {% for rower in log.rowers %}
                {{ rower.name }}{% if not loop.last or amount_guests > 0 %}, {% endif %}
              {% endfor %}
              {% if amount_guests > 0 %}
                Gäste (ohne Account): {{ amount_guests }}
              {% endif %}
            </div>
          {% endif %}
        {% endif %}
    </div>
  </div>
{% endmacro show_old %}

{% macro home(log, only_ones) %}
	{# @MB: Maaaarieeee, please fix col-span-2 craziness #}
	<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, class="col-span-2", steering_person_id=log.steering_user.id, cox_on_boat=log.shipmaster_user.id) }}
			{{ macros::select(label="Schiffsführer", data=[], name='shipmaster', id="shipmaster-rowers"~log.id, wrapper_class="col-span-2", class="change-id-js", selected_id=log.shipmaster_user.id, required=true) }}
			{{ macros::select(label="Steuerperson", data=[], name='steering_person', id="steering_person-rowers"~log.id, wrapper_class="col-span-2", class="change-id-js", selected_id=log.steering_user.id, required=true) }}
		{% endif %}

		<div class="col-span-2">
			{{ macros::checkbox(label="Handgesteuert", name="shipmaster_only_steering", id="shipmaster_only_steering" ~ log.id , checked=log.shipmaster_only_steering,class="rounded-md change-id-js") }}
		</div>

		<div class="col-span-2">
			{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, class="change-id-js rounded-md", value=log.departure) }}
		</div>

		<div class="col-span-2">
			{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', required=true, class="change-id-js rounded-md current-date-time") }}
		</div>

		<div class="col-span-2">
			<label for="destination" class="text-sm 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", wrapper_class="col-span-2") }}
    		{{ macros::select(label="Typ", data=logtypes, name="logtype", id="logtype" ~ log.id, default="Normal", selected_id=log.logtype, class="rounded-md change-id-js col-span-2") }}

		<input class="btn btn-primary col-span-2" type="submit" value="Ausfahrt beenden"/>
	</form>
{% endmacro home %}