{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
    <div id="wa-slot-{{ id }}" class="frame">
        <div class="frame__header">
            <h3>Reservierung</h3>
            <div class="row">
                <div class="col">
                    <i class="icon-uhr-outline u-justify-center"></i>
                    <div class="t-label">Tag/Urzeit</div>
                    <div class="">{{ slot.time|date('d.m.Y H:i') }}</div>
                </div>

                <div class="col">
                    <i class="icon-behaelter-outline u-justify-center"></i>
                    <div class="t-label">Verfügbare Behälterkapazität</div>
                    <div class="">{{ buchung.behaelter }}</div>
                </div>

                <div class="col">
                    <i class="icon-reben-outline u-justify-center"></i>
                    <div class="t-label">Verarbeitete Sorten</div>
                    <div class="">{{ buchung.sorten|join(', ') }}</div>
                </div>
            </div>
        </div>

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

        <div class="frame__body">

            <h3>Reservierung ändern</h3>
            <form hx-post="/_ajax/vr_wa/v1/slot?do=updateReservation">
                <input type="hidden" name="id" value="{{ id }}">
                <fieldset>
                    <label for="res-behaelter">Liefernde Behältermenge</label>
                    <select id="res-behaelter" name="behaelter" required>
                        <option value="">-</option>
                        {% for option in buchen.behaelter %}
                            <option value="{{ option }}"{{ buchung.behaelter == option ? ' selected' : '' }}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </fieldset>
                <fieldset>
                  <legend>Anliefernde Rebsorte(n)</legend>
                    {% for value,label in buchen.sorten %}
                        <label><input type="checkbox" name="sorten[]" value="{{ value }}"{{ value in buchung.sorten|keys ? ' checked' : '' }}> <span class="checkable">{{ label }}</span></label><br>
                    {% endfor %}
                </fieldset>
                <fieldset>
                    <button type="submit">Speichern</button>
                </fieldset>
            </form>
        </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 %}