{% extends 'django_spire/page/page.html' %}

{% block base_head_additional_css %}
    <style>
        {% if request.GET.zoom == 'high' %}
            :root { --signage-zoom: 1.5; }
        {% elif request.GET.zoom == 'medium' %}
            :root { --signage-zoom: 1.25; }
        {% else %}
            :root { --signage-zoom: 1; }
        {% endif %}

        html {
            font-size: calc(100vh / (50 / var(--signage-zoom)));
        }

        body {
            --signage-padding: {{ request.GET.padding|default:'0px' }};
            overflow: hidden;
            height: 100vh;
            box-sizing: border-box;
            padding: var(--signage-padding);
        }

        .kiosk-grid {
            display: grid;
            grid-template-columns: repeat({{ grid_columns }}, 1fr);
            grid-auto-rows: minmax(0, 1fr);
            gap: 1rem;
            height: calc(100vh - 6.5rem - var(--signage-padding) * 2);
        }

        .kiosk-section {
            container-type: size;
        }

        .kiosk-section .card {
            display: flex;
            flex-direction: column;
        }

        .kiosk-section .card [data-chart-glue-name] {
            min-height: 0 !important;
        }
    </style>
{% endblock %}

{% block base_head_additional_js %}
    <script>
        (function () {
            const root = document.documentElement;
            const zoom = parseFloat(getComputedStyle(root).getPropertyValue('--signage-zoom')) || 1;
            if (window.innerHeight / zoom < 240) {
                root.style.setProperty('--signage-zoom', '1');
            }

            const attach = () => {
                if (!window.echarts || echarts._kioskThemePatched) return;
                echarts._kioskThemePatched = true;
                const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
                const theme = {
                    textStyle: { fontSize: fontSize },
                    legend: { textStyle: { fontSize: fontSize } },
                    xAxis: { axisLabel: { fontSize: fontSize } },
                    yAxis: { axisLabel: { fontSize: fontSize } },
                    tooltip: { textStyle: { fontSize: fontSize } },
                };
                const originalInit = echarts.init;
                echarts.init = (el, themeOverride, opts) => {
                    const chart = originalInit(el, themeOverride || theme, opts);
                    const originalSetOption = chart.setOption.bind(chart);
                    chart.setOption = (option, setOpts) => {
                        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
                        option = { ...(option || {}) };

                        option.textStyle = { ...(option.textStyle || {}), fontSize: fontSize };

                        if (option.legend) {
                            option.legend = {
                                ...option.legend,
                                bottom: 8,
                                formatter: (name) => (name.length > 28 ? '…' + name.slice(-27) : name),
                                textStyle: { ...(option.legend.textStyle || {}), fontSize: fontSize },
                            };
                        }
                        for (const axis of [option.xAxis, option.yAxis]) {
                            if (Array.isArray(axis)) {
                                axis.forEach((a) => (a.axisLabel = { ...(a.axisLabel || {}), fontSize: fontSize }));
                            } else if (axis) {
                                axis.axisLabel = { ...(axis.axisLabel || {}), fontSize: fontSize };
                            }
                        }
                        if (option.xAxis || option.yAxis) {
                            option.grid = {
                                ...(option.grid || {}),
                                left: fontSize * 2 + 10,
                                right: fontSize,
                                top: fontSize,
                                bottom: fontSize * 3 + 16,
                            };
                        }
                        for (const series of option.series || []) {
                            if (series.type === 'pie') {
                                series.label = { ...(series.label || {}), show: false };
                            }
                        }

                        return originalSetOption(option, setOpts);
                    };
                    return chart;
                };
            };
            const echartsTag = document.querySelector('script[src*="echarts"]');
            if (window.echarts) {
                attach();
            } else if (echartsTag) {
                echartsTag.addEventListener('load', attach);
            }
        })();
    </script>
{% endblock %}

{% block base_body_class %}bg-primary{% endblock %}

{% block page_content %}
    <div
        class="container-fluid py-3"
        x-data="{
            index: 0,
            count: {{ slide_count }},
            delay: {{ slide_timer_seconds }} * 1000,
            init() {
                if (this.count > 1) {
                    this.rotation = setInterval(() => {
                        this.next_slide()
                    }, this.delay);
                }
                document.addEventListener('keydown', (event) => {
                    if (event.key === 'ArrowLeft') {
                        this.previous_slide()
                        this.reset_timer()
                    }
                    if (event.key === 'ArrowRight') {
                        this.next_slide()
                        this.reset_timer()
                    }
                })
            },
            reset_timer() {
                clearInterval(this.rotation)
                if (this.count > 1) {
                    this.rotation = setInterval(() => {
                        this.next_slide()
                    }, this.delay)
                }
            },
            next_slide() {
                this.index = (this.index + 1) % this.count
            },
            previous_slide() {
                this.index = (this.index - 1)
                if (this.index < 0) {
                    this.index = this.count - 1
                }
            }
        }"
    >

        {% if slides %}
            {% for item in slides %}
                <div x-show="index === {{ forloop.counter0 }}">

                    <div class="row mb-3">
                        <div class="col">

                            <div class="card shadow px-3 py-2">
                                <div class="row">
                                    <div class="col-auto fs-4 fw-semibold">
                                        {{ signage.services.transformation.display_title }}
                                    </div>
                                    <div class="col fs-4 fw-semibold text-end">
                                        {{ item.presentation }} - {{ item.slide }}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="kiosk-grid">
                        {% for section in item.sections %}
                            {% if section.visual %}
                                <div class="kiosk-section" style="{{ section.grid_style }}">
                                    {% include 'django_spire/metric/visual/render/visual.html' with visual=section.visual current_value=section.current_value current_condition=section.current_condition chart=section.chart period_start=section.period_start period_end=section.period_end chart_update_interval=chart_update_interval %}
                                </div>
                            {% else %}
                                <div class="border rounded d-flex align-items-center justify-content-center text-muted"
                                     style="{{ section.grid_style }}">
                                    Empty
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="text-muted">No slides configured.</div>
        {% endif %}

    </div>
{% endblock %}