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

    {% block filter %}
        <form hx-get="{{ pageUrl is defined ? pageUrl : '' }}" hx-push-url="true" hx-headers='{"VR-Ajax": "WaSlotsModule"}' hx-trigger="change, submit" hx-target="closest .content-wrapper" class="filter">
            <div class="row">
                <div class="col-md-3 kapazitaet">
                    <select name="filter_kapazitaet">
                        <option value="">-- Behälterkapazität --</option>
                        {% for option in filter.kapazitaet.options %}
                            <option value="{{ option }}"{% if filter.kapazitaet.selected is defined and filter.kapazitaet.selected == option %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 standort">
                    <select name="filter_standort">
                        <option value="">-- Standort --</option>
                        {% for key, option in filter.standort.options %}
                            <option value="{{ key }}"{% if filter.standort.selected is defined and filter.standort.selected == key %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 sorte">
                    <select name="filter_sorte">
                        <option value="">-- Sorte --</option>
                        {% for key, option in filter.sorte.options %}
                            <option value="{{ key }}"{% if filter.sorte.selected is defined and filter.sorte.selected == key %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 leseart">
                    <select name="filter_leseart">
                        <option value="">-- Leseart --</option>
                        {% for key, option in filter.leseart.options %}
                            <option value="{{ key }}"{% if filter.leseart.selected is defined and filter.leseart.selected == key %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </div>
{#                <div class="col submit"><button class="u-block w-100p">Filter übernehmen</button></div>#}
            </div>
        </form>
    {% endblock %}

    {% block content %}
        {% if days is defined and days|length %}
            <div class="list">
                {% for day,slots 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="slots">
                            {% for slot in slots %}
                                <div class="row u-items-center{{ not slot.buchbar ? ' error' : '' }}{{ slot.gebucht ? ' booked' : '' }}">
                                    <div class="col-10">
                                        <div class="row">
                                            <div class="col-3 time pl-0">
                                                <div class="icon-uhr-outline u-flex u-items-center u-gap-1">
                                                    <span class="t-label">Uhrzeit</span>
                                                    {{ slot.time|date('H:i') }}
                                                </div>
                                                <div class="icon-uhr-standort u-flex u-items-center u-gap-1">
                                                    <span class="t-label">Standort</span>
                                                    {{ slot.standort }}
                                                </div>
                                            </div>
                                            <div class="col-3 behaelter">
                                                <div class="icon-behaelter-outline u-flex u-items-center u-gap-1">
                                                    <span class="t-label">Verfügbare Behälterkapazität</span>
                                                    {{ slot.behaelterAvailable }}
                                                </div>
                                            </div>
                                            <div class="col-6 rebsorten pr-0">
                                                <div class="icon-reben-outline u-flex u-items-center u-gap-1">
                                                    <div class="t-label">Verarbeitete Sorten</div>
                                                </div>
                                                {{ slot.sorte|join(', ') }}
                                            </div>
                                            {% if slot.anmerkungen is defined and slot.anmerkungen %}
                                                <div class="col-12 px-0">
                                                    <div class="icon-info-outline u-flex u-items-center u-gap-1">
                                                        <span class="t-label">Anmerkungen</span>
                                                    </div>
                                                    {{ slot.anmerkungen|raw }}
                                                    <a hx-get="/_ajax/vr_wa/v1/slot?do=annotation&id={{ slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;">mehr lesen</a>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col u-text-right action">
                                        <a hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--xs m-0">Buchen</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="placeholder">
                <h6 class="placeholder-title">Derzeit sind keine buchbaren Anlieferungszeiten verfügbar</h6>
                <div class="placeholder-subtitle">Sie können uns auch gerne anrufen.</div>
            </div>
        {% endif %}
    {% endblock %}

    {% block script %}
        {#<script>
            jQuery(function($) {
                $(".mod_wa_slots_list").accordion({
                    // Put custom options here
                    heightStyle: 'content',
                    header: '.toggler',
                    collapsible: true,
                    create: function(event, ui) {
                        ui.header.addClass('active');
                        $('.toggler').attr('tabindex', 0);
                    },
                    activate: function(event, ui) {
                        ui.newHeader.addClass('active');
                        ui.oldHeader.removeClass('active');
                        $('.toggler').attr('tabindex', 0);
                    }
                });
            });
        </script>#}
    {% endblock %}

</div>