{% extends "@ContaoCore/Backend/be_page.html.twig" %}
{% block headline %}
    <span>Weinanlieferung</span> <span>Tages-Übersicht</span>
{% endblock %}

{% block error %}
{% endblock %}

{% block main %}
    <div class="tl_panel">
        <div id="vr-daily-schedule-zoom" class="tl_submit_panel">
            <button id="daily-zoom-in" class="tl_submit">+</button>
            <button id="daily-zoom-out" class="tl_submit">-</button>
            <button id="daily-zoom-reset" class="tl_submit" data-default="3">Reset</button>
        </div>
        <script>
            const zoomPanel = document.querySelector('#vr-daily-schedule-zoom');
            const root = document.querySelector(':root');
            const rootStyles = getComputedStyle(root);
            const defaultZoom = rootStyles.getPropertyValue('--slot-height');

            zoomPanel.querySelectorAll('button').forEach((element) => {
                element.addEventListener('click',() => {
                    let currentVal = rootStyles.getPropertyValue('--slot-height');
                    let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);
                    [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

                    if (element.id == 'daily-zoom-in' && value < 9)
                    {
                        root.style.setProperty('--slot-height',(value + 1.5) + unit);
                    } else if (element.id == 'daily-zoom-out' && value >= 3)
                    {
                        root.style.setProperty('--slot-height',(value - 1.5) + unit);
                    } else if (element.id == 'daily-zoom-reset')
                    {
                        root.style.setProperty('--slot-height',defaultZoom);
                    }
                });
            });
        </script>
    </div>
    <div class="vr-daily-schedule">
        <div class="daily-timeline-container">
            <div class="daily-timeline">
                {% for time in 0..23 %}
                    <div class="daily-timeline-label-container">
                        <div class="daily-timeline-label">{{ '%1$02d:00'|format(time) }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="daily-grid-container">
            <div class="daily-grid">
                <div class="daily-grid-hourlines">
                    {% for line in 1..24 %}
                        <div class="line"></div>
                    {% endfor %}
                </div>
                <div class="daily-grid-cells-container">
                    <div class="daily-grid-cells">
                        {% for line in [4,14,15,38] %}
                            <div class="event-cell" style="grid-row: {{ line }} / {{ line+2 }}">
                                <div class="event-title">Standort 1</div>
                                <div class="event-time">XX:XX - XX:XX</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}