{% 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">Hängerreservierungen</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="/trailerreservation/new" method="post" class="grid gap-3">
                    {{ macros::select(label="Anhänger", data=trailers, name="trailer_id", id="trailer_id", display=["name"], wrapper_class="col-span-4", nonSelectableDefault=" -- Wähle einen Hänger aus ---", required=true) }}
                    {% 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 trailerreservations %}
            {% set allowed_to_edit = false %}
            {% if loggedin_user %}
                {% if loggedin_user.id == reservation.user_applicant.id or "admin" in loggedin_user.roles %}
                    {% set allowed_to_edit = true %}
                {% endif %}
            {% endif %}
            <div data-filterable="true"
                 data-filter="{{ reservation.user_applicant.name }} {{ reservation.trailer.name }}"
                 class="w-full border-t bg-white dark:bg-primary-900 text-black dark:text-white p-3">
                <div class="w-full">
                    <strong>Hänger:</strong>
                    {{ reservation.trailer.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 />
                    {% if not allowed_to_edit %}
                        <strong>Uhrzeit:</strong>
                        {{ reservation.time_desc }}
                        <br />
                        <strong>Zweck:</strong>
                        {{ reservation.usage }}
                    {% endif %}
                    {% if allowed_to_edit %}
                        <form action="/trailerreservation"
                              method="post"
                              class="bg-white dark:bg-primary-900 pt-3 rounded-md w-full">
                            <div class="w-full grid gap-3">
                                <input type="hidden" name="id" value="{{ reservation.id }}" />
                                {{ macros::input(label='Uhrzeit', name='time_desc', id=loop.index, type="text", value=reservation.time_desc, readonly=false) }}
                                {{ macros::input(label='Zweck', name='usage', id=loop.index, type="text", value=reservation.usage, readonly=false) }}
                            </div>
                            <div class="mt-3 text-right">
                                <a href="/trailerreservation/{{ 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>
                                <input value="Ändern" type="submit" class="w-28 btn btn-primary ml-1" />
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}