{% 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">Bootschäden</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">
            Neuen Schaden
            <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="Neuen Schaden anlegen"
               data-body="#new-damage">
                {% include "includes/plus-icon" %}
                <span class="sr-only">Neuen Schaden eintragen</span>
            </a>
        </h2>
        <div class="hidden">
            <div id="new-damage">
                <form action="/boatdamage" method="post" class="grid gap-3">
                    {{ log::boat_select(only_ones=false, id='boat') }}
                    {% if not loggedin_user %}{{ macros::select(label='Gemeldet von', data=user, name='user_id') }}{% endif %}
                    {{ macros::input(label='Beschreibung des Schadens', name='desc', type='text', required=true, wrapper_class='col-span-4') }}
                    <div class="col-span-4">
                        {{ macros::checkbox(label='Boot sperren', name='lock_boat', type='text', required=true) }}
                    </div>
                    <input type="submit"
                           class="btn btn-primary w-full col-span-4"
                           value="Schaden 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 boatdamage in boatdamages | sort(attribute="verified") %}
            <div data-filterable="true"
                 data-filter="{{ boatdamage.boat.name }} {{ boatdamage.user_created.name }}"
                 class="w-full border-t bg-white dark:bg-primary-900 text-black dark:text-white p-3 {% if boatdamage.verified_at %}opacity-50{% endif %}">
                <div class="w-full">
                    <strong>{{ boatdamage.created_at | date(format='%d.%m.%Y') }} <span class="font-normal text-gray-600 dark:text-gray-100">({{ boatdamage.boat.name }})</span></strong>
                    {% if boatdamage.boat.damage %}
                        <small class="block text-gray-600 dark:text-gray-100">(Boot gesperrt)</small>
                    {% endif %}
                    <div>{{ boatdamage.desc }}</div>
                    <small class="block text-gray-600 dark:text-gray-100">
                        Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }}
                    </small>
                    {% if boatdamage.fixed_at %}
                        <small class="block text-gray-600 dark:text-gray-100">Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
                    {% else %}
                        {% if loggedin_user and loggedin_user.allowed_to_steer %}
                            <form action="/boatdamage/{{ boatdamage.id }}/fixed"
                                  method="post"
                                  class="flex justify-between mt-3">
                                <input type="text"
                                       name="desc"
                                       value="{{ boatdamage.desc }}"
                                       class="grow input rounded-s" />
                                {% if loggedin_user and "tech" in loggedin_user.roles %}
                                    <input type="submit"
                                           class="btn btn-primary"
                                           style="border-top-left-radius: 0;
                                                  border-bottom-left-radius: 0"
                                           value="Repariert und verifiziert" />
                                {% else %}
                                    <input type="submit"
                                           class="btn btn-primary"
                                           style="border-top-left-radius: 0;
                                                  border-bottom-left-radius: 0"
                                           value="Repariert" />
                                {% endif %}
                            </form>
                        {% endif %}
                    {% endif %}
                    {% if boatdamage.verified_at %}
                        <small class="block text-gray-600 dark:text-gray-100">Verifiziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
                    {% else %}
                        {% if loggedin_user and "tech" in loggedin_user.roles and boatdamage.fixed_at %}
                            <form action="/boatdamage/{{ boatdamage.id }}/verified"
                                  method="post"
                                  class="flex justify-between mt-3">
                                <input type="text"
                                       name="desc"
                                       value="{{ boatdamage.desc }}"
                                       class="grow input rounded-s" />
                                <input type="submit"
                                       class="btn btn-dark"
                                       style="border-top-left-radius: 0;
                                              border-bottom-left-radius: 0"
                                       value="Verifiziert" />
                            </form>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}