{% macro new() %}
    <div class="w-full">
        <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
            Neues Boot
            <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="Neues Boot anlegen"
               data-body="#new-boat">
                {% include "includes/plus-icon" %}
                <span class="sr-only">Neues Boot anlegen</span>
            </a>
        </h2>
        <div class="hidden">
            <div id="new-boat">
                <form action="/admin/boat/new" method="post" class="grid gap-3">
                    {{ macros::input(label="Name", name="name", type="text", required=true) }}
                    {{ macros::input(label="Anzahl Sitze", name="amount_seats", type="number", required=true, min=1) }}
                    {{ macros::input(label="Baujahr", name="year_built", type="number", min=1950, max=2050) }}
                    {{ macros::input(label="Bootsbauer", name="boatbuilder", type="text") }}
                    {{ macros::select(label="Standort", data=locations, name='location_id', selected_id=1) }}
                    {{ macros::select(label="Besitzer", data=users, name='owner', default="Verein") }}
                    {{ macros::input(label='Default destination', name='default_destination', type='text') }}
                    <div>
                        {{ macros::checkbox(label="handgesteuert", name="default_shipmaster_only_steering") }}
                        {{ macros::checkbox(label="Umbau Hand-/Fußsteuerung möglich", name="convert_handoperated_possible") }}
                        {{ macros::checkbox(label="Skull", name="skull", checked=true) }}
                        {{ macros::checkbox(label="Externes Boot (anderer Verein)", name="external") }}
                    </div>
                    <input value="Hinzufügen"
                           type="submit"
                           class="w-full mt-2 rounded-md bg-primary-500 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" />
                </form>
            </div>
        </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>
{% endmacro new %}
{% macro edit(boat, uuid) %}
    <div data-filterable="true"
         data-filter="{{ boat.name }}"
         class="w-full border-t">
        <form action="/admin/boat/{{ boat.id }}"
              data-filterable="true"
              method="post"
              class="bg-white dark:bg-primary-900 p-4 w-full">
            <div class="w-full">
                <input type="hidden" name="id" value="{{ boat.id }}" />
                <div class="font-bold mb-1 text-black dark:text-white">
                    {{ boat.name }}
                    <br />
                </div>
                <div class="grid md:grid-cols-3 gap-3">
                    {{ macros::input(label='Name', name='name', type='text', value=boat.name) }}
                    {{ macros::input(label='Plätze', name='amount_seats', type='number', min=0, value=boat.amount_seats) }}
                    {{ macros::select(data=locations, label='Standort', name='location_id', selected_id=boat.location_id) }}
                    {{ macros::select(data=users, label='Besitzer', name='owner', selected_id=boat.owner, default="Vereinsboot") }}
                    {{ macros::input(label='Baujahr', name='year_built', type='number', min=1950, value=boat.year_built) }}
                    {{ macros::input(label='Bootsbauer', name='boatbuilder', type='text', value=boat.boatbuilder) }}
                    {{ macros::checkbox(label='handgesteuert', name='default_shipmaster_only_steering', id=uuid , checked=boat.default_shipmaster_only_steering) }}
                    {{ macros::checkbox(label='Umbau Hand-/Fußsteuerung möglich', name='convert_handoperated_possible', id=uuid , checked=boat.convert_handoperated_possible) }}
                    {{ macros::input(label='Default destination', name='default_destination', type='text', value=boat.default_destination) }}
                    {{ macros::checkbox(label='Skull', name='skull', id=uuid , checked=boat.skull) }}
                    {{ macros::checkbox(label='Externes Boot', name='external', id=uuid , checked=boat.external) }}
                </div>
            </div>
            <div class="text-right mt-3">
                <a href="/admin/boat/{{ boat.id }}/delete"
                   class="inline-block btn btn-alert"
                   onclick="return confirm('Wirklich löschen?');">
                    {% include "includes/delete-icon" %}
                    Löschen
                </a>
                <input value="Ändern" type="submit" class="w-28 btn btn-primary" />
            </div>
        </form>
    </div>
{% endmacro edit %}