<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            const time_with_seconds = {{ 'true' if time_with_seconds.as_bool() else 'false' }};
            let external_url = '{{ external_url.strip() }}';

            function updateTime() {
                const date = new Date();
                const hours = (date.getHours() < 10 ? '0' : '') + date.getHours();
                const minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
                const seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
                const dayInMonth = date.getDate();
                const month = date.getMonth();
                const year = date.getFullYear();
                const day = date.getDay();
                const day_labels = ["{{l.basic_day_7}}", "{{l.basic_day_1}}", "{{l.basic_day_2}}", "{{l.basic_day_3}}", "{{l.basic_day_4}}", "{{l.basic_day_5}}", "{{l.basic_day_6}}"];
                const month_labels = ["{{l.basic_month_1}}", "{{l.basic_month_2}}", "{{l.basic_month_3}}", "{{l.basic_month_4}}", "{{l.basic_month_5}}", "{{l.basic_month_6}}", "{{l.basic_month_7}}", "{{l.basic_month_8}}", "{{l.basic_month_9}}", "{{l.basic_month_10}}", "{{l.basic_month_11}}", "{{l.basic_month_12}}"];

                const timeLabel = hours + ":" + minutes + (time_with_seconds ? ':' + seconds : '');
                const dateLabel = day_labels[day] + " " + dayInMonth + " " + month_labels[month] + " " + year;

                document.getElementById('time').innerHTML = timeLabel;
                document.getElementById('date').innerHTML = dateLabel;
                setTimeout(updateTime, 5000);
            }

            window.addEventListener("load", updateTime);
            const urlParams = new URLSearchParams(window.location.search);

            setInterval(function(){
                const xhr = new XMLHttpRequest();
                xhr.open("GET", "{{ url_for('sysinfo_get_ipaddr') }}", true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        const json_response = JSON.parse(xhr.responseText);
                        external_url = json_response.external_url;
                        setIps(json_response.interfaces)
                    }
                };
                xhr.send();
            }, 5000);
        </script>
        <style>
            * { font-family: 'Tahoma', 'Arial', 'sans-serif'; }
            body { text-align: center; color: white;  background-color: black; }
            #bottom { display: flex; justify-content: center; align-items: center; flex-direction: column; background: #111; position: fixed; left: 0; right: 0; bottom: 0; padding: 30px 0 50px 0; min-height: 50px; }
            #time { font-size: 10em; }
            #date { font-size: 3em; }
            .caption { font-size: 1.25em; color: #888888; font-weight: bold; margin-bottom: 10px; }
            .ipaddrs { display: flex; list-style: none; flex-direction: column; align-items: center; align-self:stretch; margin: 20px 40px 0 40px; padding: 10px 0; background: rgba(0,0,0,.3); border-radius: 14px; }
            .ipaddr { color: white; text-decoration: none; font-weight: bold; margin: 5px 0 5px 0; display:flex; flex-direction:row; align-self: stretch; justify-content:center; align-items:center; }
            .ipaddr a { text-decoration: none; font-weight: normal; font-size: 1.2em; color: #666; transition: .1s ease-in all; display:block; flex-direction:row; align-self: stretch; flex: 1; text-align: center; margin: 0 20px; border-radius: 6px; padding: 10px 0; }
            .ipaddr a span { color: white; font-size: 1.2em; }
            .ipaddr a:hover { color: #fff; background: #017BFF; }
            #hidden-container { display: none; }
        </style>
    </head>
    <body>
        <div id="hidden-container"></div>
        <div id="time"></div>
        <div id="date"></div>
        <div id="bottom">
        </div>
        <script>
            const interfaces = {{ json_dumps(interfaces) | safe }};
            const translation_common_unknown_ipaddr = '{{ l.common_unknown_ipaddr }}';
            const translation_player_default_welcome_message = '{% if noplaylist %}{{ l.player_noplaylist_welcome_message }}{% else %}{{ l.player_default_welcome_message }}{% endif %}';
            const manage_url_template = '{{ 'http://%ipaddr%:' ~ PORT ~ url_for('manage') }}';

            const setIps = function(ips) {
                const $container = document.getElementById('bottom');
                $container.innerHTML = '';
                const $empty = document.createElement('div');
                Object.assign($empty, { className: 'caption'});

                if (ips.length === 0) {
                    $empty.innerHTML = translation_common_unknown_ipaddr;
                    $container.appendChild($empty);
                } else {
                    $empty.innerHTML = translation_player_default_welcome_message;
                    $container.appendChild($empty);
                    const $ipaddrs = document.createElement('ul');
                    Object.assign($ipaddrs, { className: 'ipaddrs'});
                    $container.appendChild($ipaddrs);

                    if (external_url.length) {
                        const isHttps = external_url.indexOf('https://') === 0;
                        let href = external_url.replace('http://', '').replace('https://', '').replace(/\/$/, '');
                        const path = '{{ url_for('manage') }}';
                        const scheme = (isHttps ? 'https://' : 'http://');
                        const href_label = scheme + '<span>' + href + '</span>' + path;
                        addLink($ipaddrs, href_label, scheme + href + path, 'external');
                    }

                    for (let i = 0; i < ips.length; i++) {
                        addIp($ipaddrs, ips[i]);
                    }
                }
            };

            const addIp = function($container, ip) {
                const href_label = manage_url_template.replace('%ipaddr%', '<span>'+ip+'</span>');
                const href = manage_url_template.replace('%ipaddr%', ip);
                addLink($container, href_label, href, 'ip');
            };

            const addLink = function($container, href_label, href, classname) {
                const link = '<a href="' + href + '" target="_blank" class="' + classname + '">' + href_label + '</a>';
                const $ipaddr = document.createElement('li');
                Object.assign($ipaddr, { className: 'ipaddr'});
                $ipaddr.innerHTML = link;
                $container.appendChild($ipaddr);
            };

            setIps(interfaces);
        </script>
    </body>
</html>