<div hx-get="{{ insert_tag('env::request') }}" hx-headers='{"VR-Ajax": "WaBookedModule"}' hx-trigger="updateWaBooking from:body" class="{{ class }} content-wrapper block"{{ cssID }}{% if style is defined and style is not empty %} style="{{ style }}"{% endif %}>

    {% block content %}
        {% if days is defined and days|length %}
            <div class="list">
                {% for day,bookings in days %}
                    <h3 class="toggler-dis u-flex u-items-center mt-2">{{ day|date('d.m.Y') }}</h3>
                    <div class="accordion-dis">
                        <div class="bookings">
                            {% for booking in bookings %}
                                <div class="row py-2 u-flex-nowrap-md u-items-center">
                                    <div class="col-12">
                                        <div class="grid-md u-gap-1">
                                            <div class="grid-c-3 time bg-white p-1">
                                                <div class="u-flex u-items-center u-gap-1">
                                                    <i class="icon-uhr-outline"></i>
                                                    <span class="t-label">Uhrzeit</span>
                                                    {{ booking.slot.time|date('H:i') }}
                                                </div>
                                            </div>
                                            <div class="grid-c-3 behaelter bg-white p-1">
                                                <div class="u-flex u-flex-wrap u-gap-1">
                                                    <i class="icon-behaelter-outline"></i>
                                                    <span class="t-label">Gebuchte Behälterkapazität</span>
                                                    {{ booking.behaelter }}
                                                </div>
                                            </div>
                                            <div class="grid-c-6 rebsorten bg-white p-1">
                                                <div class="u-flex u-flex-wrap u-gap-1">
                                                    <i class="icon-reben-outline"></i>
                                                    <div class="t-label">Anliefernde Sorten</div>
                                                    &nbsp;
                                                </div>
                                                {{ booking.sorte|join(', ') }}
                                            </div>
                                            <div class="grid-c-3 standort bg-white p-1">
                                                <div class="u-flex u-flex-wrap u-gap-1">
                                                    <i class="icon-standort-outline"></i>
                                                    <span class="t-label">Standort</span>
                                                    {{ booking.standort }}
                                                </div>
                                            </div>
                                            <div class="grid-c-3 ernteart bg-white p-1">
                                                <div class="u-flex u-flex-wrap u-gap-1">
                                                    <i class="icon-schere-outline"></i>
                                                    <div class="t-label">Erntearten</div>
                                                    {{ booking.ernteart|join(', ') }}
                                                </div>
                                            </div>
                                            <div class="grid-c-6 lage bg-white p-1">
                                                <div class="u-flex u-flex-wrap u-gap-1">
                                                    <i class="icon-lage-outline"></i>
                                                    <span class="t-label">Lagen</span>
                                                    {{ booking.lage|join(', ') }}
                                                </div>
                                            </div>
                                            {% if booking.slot.anmerkungen is defined and booking.slot.anmerkungen %}
                                                <div class="grid-c-12 bg-white p-1">
                                                    <div class="u-flex u-flex-wrap u-gap-1">
                                                        <i class="icon-info-outline"></i>
                                                        <span class="t-label">Anmerkungen</span>
                                                        {{ booking.slot.anmerkungen|raw }}
                                                        <a hx-get="/_ajax/vr_wa/v1/slot?do=annotation&id={{ booking.slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;">mehr lesen</a>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="col u-text-right u-text-nowrap action">
                                        <a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--sm btn-info m-0">Ändern</a>
                                        <a hx-get="/_ajax/vr_wa/v1/slot?do=delete&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" hx-confirm="Sind Sie sicher, dass Sie diese Reservierung löschen möchten?" href="javascript:;" class="btn btn--sm btn-danger m-0">Löschen</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="placeholder">
                <h6 class="placeholder-title">Sie haben noch keine Anlieferungszeiten reserviert</h6>
                <div class="placeholder-subtitle">Sobald Sie Anlieferungszeiten reserviert haben, werden diese hier aufgelistet.</div>
                <div class="placeholder-commands u-center">
                    <div class="m-1">
                        <a href="{{ insert_tag('link_url::2') }}" class="btn btn-info">Zur Reservierung</a>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endblock %}

</div>