{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
    <div id="wa-booking-{{ id }}" hx-target="this" hx-swap="outerHTML" class="frame" hx-indicator="#wa-booking-{{ id }}">
        <div class="frame__header">
            <h3>Reservierung</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">Beginn</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-uhr-outline"></i>
                        <div class="t-label">Ende</div>
                    </div>
                    <div class="">{{ (slot.time + slot.duration * 60)|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>

                {% 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>

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

        <div class="frame__body">
            <h3>Reservierung ändern</h3>
            {% if toast is defined %}
                {{ toast|raw }}
            {% endif %}
            <form hx-post="/_ajax/vr_wa/v1/slot?do=updateReservation" enctype="multipart/form-data">
                <input type="hidden" name="id" value="{{ id }}">
                <div class="grid-md u-gap-2">
                    <div class="grid-c-6 mb-2 mb-0-md">
                        <fieldset>
                            <label for="res-behaeltereinheit"><strong>Liefernde Botticheinheit<sup class="text-danger">*</sup></strong></label>
                            <select id="res-behaeltereinheit" name="unit" hx-get="/_ajax/vr_wa/v1/slot?do=availableBookingUnitAmount&id={{ id }}" hx-target="#wa-booking-{{ id }} #res-behaelter">
                                <option value="">{{ 'tl_vr_wa_units.containers.0'|trans([], 'contao_tl_vr_wa_units') }}</option>
                                {% for value, option in buchen.units %}
                                    <option value="{{ value }}"{{ buchung.unit == value ? ' selected' : '' }}>{{ option }}</option>
                                {% endfor %}
                            </select>
                        </fieldset>
                    </div>
                    <div class="grid-c-6 mb-2 mb-0-md">
                        <fieldset>
                            <label for="res-behaelter"><strong>Menge<sup class="text-danger">*</sup></strong></label>
                            <select id="res-behaelter" name="behaelter" required>
                                <option value="">-</option>
                                {% for option in buchen.behaelter %}
                                    {% if option > buchen.default %}
                                        <option value="{{ option }}"{{ buchung.amount == option ? ' selected' : '' }}>{{ option }} ({{ 'MSC.wa_overbooking'|trans([], 'contao_default') }})</option>
                                    {% else %}
                                        <option value="{{ option }}"{{ buchung.amount == option ? ' selected' : '' }}>{{ option }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </fieldset>
                    </div>
                </div>
                <fieldset>
                    <label for="res-annotation"><strong>Anmerkung</strong></label>
                    <textarea id="res-annotation" name="annotation">{{ buchung.annotation }}</textarea>
                </fieldset>
                {% if file is defined %}
                    <fieldset>
                        <div class="t-label">Aktuelle Datei</div>
                        <div class="u-flex u-items-center u-gap-1"><a href="{{ file.link }}">{{ file.name }}</a> <a href="javascript:;" hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ id }}&modal=false&deleteFile=true" hx-target="closest .frame" hx-swap="outerHTML" class="tag tag__close-btn tag--danger tag--xs"></a></div>
                    </fieldset>
                    <fieldset>
                        <label for="res-upload"><strong>Datei überschreiben</strong></label>
                {% else %}
                    <fieldset>
                        <label for="res-upload"><strong>Datei hochladen</strong></label>
                {% endif %}
                    <input type="file" id="res-upload" name="upload">
                </fieldset>
                <fieldset>
                    <button type="submit">Speichern</button>
                </fieldset>
            </form>
        </div>

        <div class="loader animated loading"></div>
    {% if modal %}</div>{% endif %}
{% endblock %}

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

                window.modals = window.modals || []
                window.modals.wa_bookings = window.modals.wa_bookings || []

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

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