<div hx-get="{{ insert_tag('env::request') }}" hx-headers='{"VR-Ajax": "WaSlotsModule"}' hx-trigger="updateWaList from:body, updateWaBooking from:body" hx-swap="outerHTML" 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 u-justify-center">
<div class="col-md-2 kapazitaet">
<select name="filter_kapazitaet">
<option value="">-- Bottiche --</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-2 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-2 day">
<select name="filter_tag">
<option value="">-- Datum --</option>
{% for key, option in filter.tag.options %}
<option value="{{ key }}"{% if filter.tag.selected is defined and filter.tag.selected == key %} selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
{#<div class="col-md-2 ernteart">
<select name="filter_ernteart">
<option value="">-- Ernteart --</option>
{% for key, option in filter.ernteart.options %}
<option value="{{ key }}"{% if filter.ernteart.selected is defined and filter.ernteart.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>
{# Todo: Future feature #}
{#<div class="u-flex u-gap-2 u-justify-center">
<div class="col">
<div class="tag-container group-tags group-tags--rounded">
<div class="tag tag--dark">Datum:</div>
<div class="tag">19.09.1980</div>
<div class="tag tag__close-btn"></div>
</div>
</div>
<div class="col">
<div class="tag-container group-tags group-tags--rounded">
<div class="tag tag--dark">Standort:</div>
<div class="tag">Annahmestelle 1</div>
<div class="tag tag__close-btn"></div>
</div>
</div>
</div>#}
{% 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 py-2 u-flex-nowrap-md u-items-center{{ not slot.buchbar ? ' error' : '' }}{{ slot.gebucht ? ' booked' : '' }}">
<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-flex-wrap u-gap-1">
<i class="icon-uhr-outline"></i>
<span class="t-label">Uhrzeit ab</span>
{{ slot.time|date('H:i') }}
</div>
</div>
<div class="grid-c-3 time bg-white p-1">
<div class="u-flex u-flex-wrap u-gap-1">
<i class="icon-uhr-outline"></i>
<span class="t-label">Uhrzeit bis</span>
{{ (slot.time + slot.duration * 60)|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">Verfügbare Bottiche</span>
{{ slot.behaelterAvailable }}
</div>
</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>
{{ slot.standort }}
</div>
</div>
{% if slot.anmerkungen is defined and 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>
{{ 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>
</div>
{% endif %}
</div>
</div>
<div class="col u-text-right action mt-2 mt-0-md">
<a hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ slot.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--sm btn-info 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>