<!DOCTYPE html>
<head>
    <title>Obscreen - Fleet View</title>
    <style>
        html {margin:0;padding:0;display:flex;flex:1;background: #0f0035;font-family: 'Arial', 'sans-serif'; color: white;height:100vh;}
        body {margin:0;padding:0;display:flex;flex:1;flex-direction: column}
        ul {list-style:none;margin: 0;padding:0;display: flex;flex-direction: row;border-bottom: 1px solid #0eef5f;}
        ul li {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;border-right: 1px solid #0eef5f;}
        ul li a {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20px 5px;color:#0eef5f;font-weight: bold;text-decoration: none;}
        ul li.active a { background: #0eef5f;color:white; }
        main {display: flex;flex:1;}
        main .studio-frame {display: flex; flex:1;}
        main .studio-frame iframe {display: flex; flex: 1;}
        .hidden {display: none !important;}
    </style>
</head>
<body>
<ul>
    {% for studio in studios %}
    <li class="{% if loop.first %}active{% endif %}">
        <a href="javascript:void(0);" class="studio-switch" data-id="{{ studio.id }}" onclick="tab('{{ studio.id }}')">
            {{ studio.name }}
        </a>
    </li>
    {% endfor %}
</ul>
<main>
    {% for studio in studios %}
        <div class="studio-frame {% if not loop.first %}hidden{% endif %}" data-id="{{ studio.id }}">
            <iframe src="http://{{ studio.host }}:{{ studio.port }}/slideshow?fleet_mode=1" frameborder="0" allowtransparency=""></iframe>
        </div>
    {% endfor %}
</main>
<script type="text/javascript">
    const tab = function(id) {
        const $switches = document.getElementsByClassName('studio-switch');
        const $frames = document.getElementsByClassName('studio-frame');
        for (let i = 0; i < $switches.length; i++) {
            const $switch = $switches[i];
            $switch.parentElement.className = $switch.dataset.id === id ? 'active' : '';
        }
        for (let j = 0; j < $frames.length; j++) {
            const $frame = $frames[j];
            $frame.className = $frame.dataset.id === id ? 'studio-frame' : 'studio-frame hidden';
        }
        document.location.hash = id;
    };

    var hash = document.location.hash.replace('#', '');

    if (hash) {
        tab(hash);
    }
</script>
</body>
</html>