{% extends "layout/default.html" %}

{% block extend_head %}
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<style>
    display:before {
        content: attr(title);
    }

    displaylist:before {
        content: "Displays";

        background-color: #333;
        padding: 1em;
    }

    displaylist {
        display: grid;
        grid-template-rows: auto 1fr;

        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

        background-color: #242424;

        transition: transform .2s ease, opacity .2s ease;
        transform: scale(1);
        opacity: 1;
    }

    displaylist[hidden], displaylist:focus {
        transform: scale(.96);
        opacity: 0;
    }

    scrollcontainer {
        display: block;
        overflow: auto;
    }

    displaylist list {
        display: grid;
        gap: 1em;

        padding: 1em;
    }

    displaylist list > a {
        border: 2px solid black;
        padding: 1em;
    }

    displaylist fallback {
        padding: 1em;
    }

    list:not(:empty) + fallback {
        display: none;
    }

    fallback {
        display: grid;

        place-content: center;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<displaylist hidden>
    <scrollcontainer>
        <list></list>
        <fallback>
            <span>
                There is no displays available.<br>
                Create new displays in edit mode.
            </span>
        </fallback>
    </scrollcontainer>
</displaylist>
<display></display>
<script>
    const displayList = document.getElementsByTagName("displaylist")[0];
    const display = document.getElementsByTagName("display")[0];
    const socket = io();

    socket.on("connect", () => {
        socket.emit("display", {action: "list"});
        //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
    });

    socket.on("display", (json) => {
        switch(json.action) {
            default:
                console.warn("Unknown data: " + json);
                break;
            case "list":
                onDisplayList(json.value);
                break;
        }
    });

    /*socket.on("display", (title, grid_column, grid_row) => {
        a = title;
        b = grid_column;
        c = grid_row;
        display.title = title;
        display.grid_column = grid_column;
        display.grid_row = grid_row;
    });*/

    function onDisplayList(list) {
        console.log(list);

        function add(item) {
            let displayOption = document.createElement("a");
            displayOption.innerText = item;
            displayList.getElementsByTagName("list")[0].appendChild(displayOption);
        }

        displayList.getElementsByTagName("list")[0].innerHTML = "";
        for (item in list) {
            add(item);
        }

        displayList.hidden = false;
    }
</script>
{% endblock %}