{# Shows a fancy, optional lists of boats. They are grouped by boat category. 
   
   Inputs: boats
 #}
{% macro show_boats() %}
    {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
        <div class="pb-2">
            <div class="bg-gray-100 dark:bg-primary-600 text-primary-950 dark:text-white text-center text-sm mb-2">
                <strong>{{ amount_seats }}x</strong>
            </div>
            {% for boat in grouped_boats | sort(attribute="name") %}
                <div id="boat-{{ boat.id }}"
                     class="px-3 boats-js text-black dark:text-white {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 {% endif %}"
                     {% if boat.damage != 'locked' and not boat.on_water %} data-seats="{{ boat.amount_seats }}" data-default_shipmaster_only_steering="{{ boat.default_shipmaster_only_steering }}" data-default-destination="{{ boat.default_destination }}" 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(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() }}
        <div class="col-span-4 md:col-span-1">
            <div class="text-sm text-gray-600 dark:text-gray-100">Bootssteuerung</div>
            <div class="h-10 flex items-center">
                {{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
            </div>
        </div>
        {{ log::rower_select(id="newrower", selected=[], class="col-span-4", init=true) }}
        {{ 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 dark:text-gray-100">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 dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-primary-950 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(id="boat_id") %}
    {{ 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", "default_destination"], wrapper_class="col-span-4", show_seats=true) }}
{% 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 dark:text-gray-100">
            Ruderer (inkl. Schiffsführer und Steuerperson)
        </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": {{ "cox" in user.roles }}, "is_racing": {{ "Rennrudern" in user.roles }}, "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) %}
    <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 dark:text-white">
                            {{ 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) }}</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 or rower.id == log.steering_person %}
                                    <small class="text-gray-600 dark:text-primary-100">(
                                        {%- if rower.id == log.shipmaster %}Schiffsführer
                                        {% endif -%}
                                        {% if rower.id == log.shipmaster and rower.id == log.steering_person %}/{% endif %}
                                        {%- if rower.id == log.steering_person %}Steuerperson
                                        {% endif -%}
                                    )</small>
                                {% endif %}
                            </p>
                        {% endfor %}
                        {% set amount_rowers = log.rowers | length %}
                        {% set amount_guests = log.boat.amount_seats - amount_rowers %}
                        {% if amount_guests > 0 %}
                            Gäste <small class="text-gray-600">(ohne Account)</small>:
                            {{ 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, index) %}
    <div class="border-t bg-white dark:bg-primary-900 py-3 px-4 relative"
         data-filterable="true"
         data-filter="{{ log.boat.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 class="text-black dark:text-white">{{ log.boat.name }}</strong> <small class="text-gray-600 dark:text-gray-100">({{ log.shipmaster_user.name -}}
                {% if log.shipmaster_only_steering %}
                    - handgesteuert
                {% endif -%}
            )</small>
            <small class="block text-gray-600 dark:text-gray-100">
                {% 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 %}
            {% if allowed_to_close and state == "on_water" %}
                {{ log::home(log=log) }}
            {% else %}
                <div class="text-black dark:text-white">
                    {{ log.destination }}
                    {% if state == "completed" %}
                        <small class="text-gray-600 dark:text-gray-100">({{ 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 dark:text-gray-100">
                        Ruderer:
                        {% for rower in log.rowers -%}
                            {{ rower.name -}}
                            {% if not loop.last or amount_guests > 0 and log.boat.name != 'Externes Boot' %},{% endif %}
                        {% endfor %}
                        {% if amount_guests > 0 and log.boat.name != 'Externes Boot' %}
                            Gäste <small class="text-gray-600 dark:text-gray-100">(ohne Account)</small>: {{ amount_guests }}
                        {% endif %}
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endmacro show_old %}
{% macro home(log) %}
    <form class="grid grid-cols-1 gap-3"
          action="/log/{{ log.id }}"
          method="post">
        {{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', required=true, class="change-id-js rounded-md current-date-time") }}
        <div>
            <label for="destination" class="text-sm text-gray-600 dark:text-gray-100">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 dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-primary-950 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") }}
        <details class="bg-gray-200 bg-opacity-80 dark:bg-primary-900 rounded-md p-2">
            <summary class="cursor-pointer">Details ändern</summary>
            <div class="grid grid-cols-1 gap-3">
                {{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, class="change-id-js rounded-md", value=log.departure) }}
                {{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats, 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, 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, class="change-id-js", selected_id=log.steering_user.id, required=true) }}
                <div>
                    {{ 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>
                {{ macros::select(label="Typ", data=logtypes, name="logtype", id="logtype" ~ log.id, default="Normal", selected_id=log.logtype, class="rounded-md change-id-js") }}
            </div>
        </details>
        <input class="btn btn-primary" type="submit" value="Ausfahrt beenden" />
    </form>
{% endmacro home %}