{% import "includes/macros" as macros %}
{% import "includes/forms/log" as log %}
{% extends "base" %}
{% block content %}
    <div class="max-w-screen-lg w-full">
        <h1 class="h1">Bootsreservierungen</h1>
        <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
            Neue Reservierung
            <a href="#"
               class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
               data-sidebar="true"
               data-trigger="sidebar"
               data-header="Neue Reservierung anlegen"
               data-body="#new-reservation">
                {% include "includes/plus-icon" %}
                <span class="sr-only">Neue Reservierung eintragen</span>
            </a>
        </h2>
        <div class="hidden">
            <div id="new-reservation">
                <form action="/boatreservation" method="post" class="grid gap-3">
                    {{ log::boat_select(only_ones=false, id='boat') }}
                    {% if not loggedin_user %}{{ macros::select(label='Reserviert von', data=user, name='user_id_applicant') }}{% endif %}
                    {{ macros::input(label='Beginn', name='start_date', type='date', required=true, wrapper_class='col-span-4') }}
                    {{ macros::input(label='Ende', name='end_date', type='date', required=true, wrapper_class='col-span-4') }}
                    {{ macros::input(label='Uhrzeit (zB ab 14:00 Uhr, ganztägig, ...)', name='time_desc', type='text', required=true, wrapper_class='col-span-4') }}
                    {{ macros::input(label='Zweck (Wanderfahrt, ...)', name='usage', type='text', required=true, wrapper_class='col-span-4') }}
                    <input type="submit"
                           class="btn btn-primary w-full col-span-4"
                           value="Reservierung eintragen" />
                </form>
            </div>
        </div>
        <div class="search-wrapper">
            <label for="name" class="sr-only">Suche</label>
            <input type="search"
                   name="name"
                   id="filter-js"
                   class="search-bar"
                   placeholder="Suchen nach Namen...">
        </div>
        <div id="filter-result-js" class="search-result"></div>
        {% for reservation in boatreservations %}
            <div data-filterable="true"
                 data-filter="{{ reservation.user_applicant.name }} {{ reservation.boat.name }}"
                 class="w-full border-t bg-white dark:bg-primary-900 text-black dark:text-white p-3">
                <div class="w-full">
                    <strong>Boot:</strong>
                    {{ reservation.boat.name }}
                    <br />
                    <strong>Reservierung:</strong>
                    {{ reservation.user_applicant.name }}
                    <br />
                    <strong>Datum:</strong>
                    {{ reservation.start_date }}
                    {% if reservation.end_date != reservation.start_date %}
                        -
                        {{ reservation.end_date }}
                    {% endif %}
                    <br />
                    <strong>Uhrzeit:</strong>
                    {{ reservation.time_desc }}
                    <br />
                    <strong>Zweck:</strong>
                    {{ reservation.usage }}
                    {% if loggedin_user %}
                        {% if loggedin_user.id == reservation.user_applicant.id or "admin" in loggedin_user.roles %}
                            <div class="mt-3 text-right">
                                <a href="/boatreservation/{{ reservation.id }}/delete"
                                   class="w-28 btn btn-alert"
                                   onclick="return confirm('Willst du diese Reservierung wirklich löschen?');">
                                    {% include "includes/delete-icon" %}
                                    Löschen
                                </a>
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}