<div class="modal-content">
    <div id="wa-slot-{{ id }}">
        <dl>
            <dt>Tag/Uhrzeit</dt>
            <dd>{{ slot.time|date('d.m.Y H:i') }}</dd>

            <dt>Verfügbare Behälterkapazität</dt>
            <dd>{{ slot.behaelterAvailable }}</dd>

            <dt>Verarbeitete Sorten</dt>
            <dd>{{ slot.sorte|join(', ') }}</dd>
        </dl>
        <h3>Reservieren</h3>
        {% if buchen.buchbar %}
            <form hx-post="/_ajax/vr_wa/v1/slot?do=reservate">
                <input type="hidden" name="id" value="{{ id }}">
                <div class="dflex">
                    <div>
                        <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 }}">{{ option }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <fieldset>
                      <legend>Anliefernde Rebsorte(n)</legend>
                        {% for value,label in buchen.sorten %}
                            <label><input type="checkbox" name="sorten[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
                        {% endfor %}
                    </fieldset>
                    <div>
                        <button type="submit">Reservieren</button>
                    </div>
                </div>
            </form>
        {% else %}
          <p class="warning">Dieser Zeit-Slot ist bereits ausgebucht</p>
        {% endif %}
    </div>
</div>
<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,
            addClass: ''
        }).open();
        } else {
            window.modals.wa_slots.details{{ id }}.content.empty();
            window.modals.wa_slots.details{{ id }}.setContent($('#wa-slot-{{ id }}')).open();
        }

    })(jQuery);
</script>