{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
        <div id="wa-slot-annotation-{{ id }}" class="frame">
            <div class="frame__header">
                <h3>Info</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>
        </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.annotation{{ id }} === undefined)
                {
                    window.modals.wa_slots.annotation{{ id }} = new jBox('Modal', {
                    closeButton: 'box',
                    content: $('#wa-slot-annotation-{{ id }}'),
                    maxWidth: 650,
                    minWidth: 100,
                    minHeight: 100,
                    width: 650,
                    overlay: true,
                    closeOnClick: false,
                    zIndex: 'auto',
                    addClass: ''
                }).open();
                } else {
                    window.modals.wa_slots.annotation{{ id }}.content.empty();
                    window.modals.wa_slots.annotation{{ id }}.setContent($('#wa-slot-annotation-{{ id }}')).open();
                }

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