{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
        <div id="wa-slot-{{ id }}" hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ id }}&modal=false" hx-target="this" hx-swap="outerHTML" hx-trigger="updateWaBooking from:body">
            <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>

            {% if reservations|length %}
                <h4>Ihre Reservierungen</h4>
                <ul class="reservations">
                    {% for reservation in reservations %}
                        <li class="flex align-items-center">
                            <div class="full fifth-500">
                                <div class="icon-behaelter-outline">{{ reservation.behaelter }}</div>
                            </div>
                            <div class="full three-fifth-500">
                                <div class="icon-reben-outline">{{ reservation.sorten|join(', ') }}</div>
                            </div>
                            <div class="full fifth-500">
                                <div><a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ reservation.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;">Bearbeiten</a></div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}

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