{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
        <div id="wa-slot-{{ id }}" class="frame" hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ id }}&modal=false" hx-target="this" hx-swap="outerHTML" hx-trigger="updateWaBooking from:body">
            <div class="frame__header">
                <h3>Zeitslot</h3>
                <div class="grid-md u-gap-2">
                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-uhr-outline"></i>
                            <div class="t-label">Tag/Urzeit</div>
                        </div>
                        <div class="">{{ slot.time|date('d.m.Y H:i') }}</div>
                    </div>

                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-standort-outline"></i>
                            <div class="t-label">Standort</div>
                        </div>
                        <div class="">{{ standort.title }}</div>
                    </div>

                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-behaelter-outline"></i>
                            <div class="t-label">Verfügbare Behälterkapazität</div>
                        </div>
                        <div class="">{{ slot.behaelterAvailable }}</div>
                    </div>

                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-schere-outline"></i>
                            <div class="t-label">Erntearten</div>
                        </div>
                        <div class="">{{ ernteart|join(', ') }}</div>
                    </div>

                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-reben-outline"></i>
                            <div class="t-label">Verarbeitete Sorten</div>
                        </div>
                        <div class="">{{ slot.sorte|join(', ') }}</div>
                    </div>

                    <div class="grid-c-6 mb-2 mb-0-md">
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="icon-lage-outline"></i>
                            <div class="t-label">Lagen</div>
                        </div>
                        <div class="">{{ lage|join(', ') }}</div>
                    </div>

                    {% if slot.anmerkungen %}
                        <div class="grid-c-12 mb-2 mb-0-md">
                            <div class="u-flex u-items-center u-gap-1">
                                <i class="icon-info-outline"></i>
                                <div class="t-label">Anmerkungen</div>
                            </div>
                            {{ slot.anmerkungen|raw }}
                        </div>
                    {% endif %}
                </div>
            </div>

            {% if reservations|length %}
                <div class="divider m-0 mb-2"></div>

                <div class="frame__body">

                    <h4>Ihre Reservierungen</h4>
                    <ul class="no-bullets mx-0 reservations">
                        {% for reservation in reservations %}
                            {% if reservation.approved == '1' %}
                                {% set status = 'approved' %}
                            {% elseif reservation.approved == '0' %}
                                {% set status = 'canceled' %}
                            {% else %}
                                {% set status = 'pending' %}
                            {% endif %}

                            <li class="row u-items-center p-0 py-1 status status--{{ status }}">
                                <div class="col-1">
                                    <div class="u-flex u-items-center u-gap-1">
                                        <i class="status-icon">{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}</i>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="u-flex u-items-center u-gap-1">
                                        <i class="icon-behaelter-outline"></i>
                                        {{ reservation.behaelter }}
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="u-flex u-items-center u-gap-1">
                                        <i class="icon-reben-outline"></i>
                                        {{ reservation.sorten|join(', ') }}
                                    </div>
                                </div>
                                <div class="col u-text-right">
                                    {% if reservation.approved != '0' and not reservation.checked_in %}<div><a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ reservation.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--sm m-0">Bearbeiten</a></div>{% endif %}
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="u-flex u-items-center u-gap-2 px-1 text-sm">
                        <div><strong>Legende:</strong></div>
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="status-icon status--approved status--small"></i>
                            angenommen
                        </div>
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="status-icon status--pending status--small"></i>
                            Freigabe ausstehend
                        </div>
                        <div class="u-flex u-items-center u-gap-1">
                            <i class="status-icon status--canceled status--small"></i>
                            abgelehnt
                        </div>
                    </div>
                </div>
            {% endif %}

                <div class="divider m-0 mb-2"></div>

            <div class="frame__body">
                <h4>Reservieren</h4>
                {% if toast is defined %}
                  {{ toast|raw }}
                {% endif %}
                {% if slot.behaelterAvailable < 1 %}
                    <div class="toast toast--warning mx-0">
                        <p class="warning">Für diesen Slot können nur noch Reservierungsanfragen gestellt werden.</p>
                    </div>
                {% endif %}
                {% if buchen.buchbar %}
                    <form hx-post="/_ajax/vr_wa/v1/slot?do=reservate" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ id }}">
                        <fieldset>
                            <label for="res-behaelter"><strong>Liefernde Behältermenge<sup class="text-danger">*</sup></strong></label>
                            <select id="res-behaelter" name="behaelter" required>
                                <option value="">-</option>
                                {% for option in buchen.behaelter %}
                                    {% if option > slot.behaelterAvailable %}
                                        <option value="{{ option }}" data-oc>{{ option }} ({{ 'MSC.wa_approval_needed'|trans([], 'contao_default') }})</option>
                                    {% else %}
                                        <option value="{{ option }}">{{ option }}</option>
                                    {% endif %}
                                {% endfor %}
                                {#{% for option in buchen.behaelter %}
                                    <option value="{{ option }}">{{ option }}</option>
                                {% endfor %}#}
                            </select>
                        </fieldset>
                        <fieldset>
                          <legend>Anliefernde Rebsorte(n)<sup class="text-danger">*</sup></legend>
                            {% for value,label in buchen.sorten %}
                                <label><input type="checkbox" name="sorten[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
                            {% endfor %}
                        </fieldset>
                        <fieldset>
                            <legend>Ernteart(en)<sup class="text-danger">*</sup></legend>
                            {% for value,label in buchen.ernteart %}
                                <label><input type="checkbox" name="ernteart[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
                            {% endfor %}
                        </fieldset>
                        <fieldset>
                            <legend>Lage(n)<sup class="text-danger">*</sup></legend>
                            {% for value,label in buchen.lage %}
                                <label><input type="checkbox" name="lage[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
                            {% endfor %}
                        </fieldset>
                        <fieldset>
                            <label for="res-upload"><strong>Dateianhang</strong></label>
                            <input type="file" id="res-upload" name="upload">
                        </fieldset>
                        <fieldset>
                            <button id="res-submit" type="submit" data-label-oc="Anfragen" data-label-default="Reservieren">Reservieren</button>
                        </fieldset>
                    </form>
                {% else %}
                    <div class="toast toast--warning mx-0">
                        <p class="warning">Dieser Zeit-Slot ist bereits ausgebucht</p>
                    </div>
                {% endif %}

            </div>
        </div>
    {% if modal %}</div>{% endif %}
{% endblock %}

{% block modal %}
    {% if modal %}
        <script>
            (function ($) {

                window.modals = window.modals || []
                window.modals.wa_slots = window.modals.wa_slots || []

                if (window.modals.wa_slots.details{{ id }} === undefined)
                {
                    window.modals.wa_slots.details{{ id }} = new jBox('Modal', {
                    closeButton: 'box',
                    content: $('#wa-slot-{{ id }}'),
                    maxWidth: 650,
                    minWidth: 100,
                    minHeight: 100,
                    width: 650,
                    overlay: true,
                    closeOnClick: false,
                    zIndex: 'auto',
                    addClass: ''
                }).open();
                } else {
                    window.modals.wa_slots.details{{ id }}.content.empty();
                    window.modals.wa_slots.details{{ id }}.setContent($('#wa-slot-{{ id }}')).open();
                }

            })(jQuery);
        </script>
    {% endif %}
{% endblock %}