<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">{{ day|date('d.m.Y') }}</h3>
                    <div class="accordion-dis">
                        <div class="bookings">
                            {% for booking in bookings %}
                                <div class="row u-items-center">
                                    <div class="col-2 time icon-uhr-outline">
                                        <span class="t-label">Uhrzeit</span>
                                        {{ booking.slot.time|date('H:i') }}
                                    </div>
                                    <div class="col-3 behaelter icon-behaelter-outline">
                                        <span class="t-label">Gebuchte Behälterkapazität</span>
                                        {{ booking.behaelter }}
                                    </div>
                                    <div class="col-5 rebsorten icon-reben-outline">
                                        <span class="t-label">Anliefernde Sorten</span>
                                        {{ booking.sorte|join(', ') }}
                                    </div>
                                    <div class="col u-text-right 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--xs m-0">Anzeigen</a>
                                        <a hx-get="/_ajax/vr_wa/v1/slot?do=delete&id={{ booking.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs btn-danger m-0">Löschen</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endblock %}

</div>