{% import "includes/macros" as macros %}
{% import "includes/forms/log" as log %}
{% extends "base" %}
{% block content %}
    <div class="w-full">
        <h1 class="h1">Logbuch</h1>
        {% if flash and not loggedin_user %}
            <div class="pt-3 max-w-lg m-auto">
                {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
            </div>
        {% endif %}
        <div class="w-full grid lg:grid-cols-5 gap-3 mt-5">
            <div>
                <div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
                    <h2 class="h2">Boote</h2>
                    <div>{{ log::show_boats(only_ones=false) }}</div>
                </div>
                <div class="bg-white dark:bg-primary-900 rounded-md hidden lg:block shadow mt-3">
                    <h2 class="h2">Schnellauswahl</h2>
                    <div>
                        {% for boat in boats | reverse %}
                            {% if boat.id in [42, 36] %}
                                <div class="p-3 boats-js text-black dark:text-white border-t {% if boat.damage != 'locked' and not boat.on_water %} cursor-pointer hover:text-primary-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-primary-950 {% 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>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3">
                <div class="bg-white dark:bg-primary-900 rounded-md shadow">
                    <h2 class="h2">Neue Ausfahrt</h2>
                    <div class="p-3">{{ log::new(only_ones=false, shipmaster=-1) }}</div>
                </div>
            </div>
            <div>
                <div class="bg-white dark:bg-primary-900 rounded-md shadow pb-2">
                    <h2 class="h2">Am Wasser</h2>
                    <div>
                        {% if on_water | length > 0 %}
                            {% for log in on_water %}
                                {{ log::show(log=log, state="on_water", allowed_to_close=true, only_ones=false) }}
                            {% endfor %}
                        {% else %}
                            <p class="p-3 text-center text-black dark:text-white">Kein Boot am Wasser</p>
                        {% endif %}
                    </div>
                </div>
                {{ macros::boatreservation() }}
                {{ macros::plannedtrips() }}
            </div>
        </div>
    </div>
    <script src="/public/logbook.js"></script>
{% endblock content %}