<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>client</title>
</head>
<body>

<!-- Title Table Begin -->
<div class="title">
    <table class="title-table">
        <tr>
            <th class="number">{{ number }}</th>
            <th class="name">{{ name | safe }}</th>
        </tr>
    </table>
</div>
<!-- Title Table End -->

<!-- Check Table Begin -->
<div class="check">
    <table class="check-table">
        {% set d = namespace(value=1) %}
        {% for genre_i, (k, v) in enumerate(items.items()) %}
            <tr class="check-column">
            <td class="genre" rowspan="{{ len(v) }}">
                <p>{{ k }}</p></td>
                {% for col_i, column in enumerate(v) %}
                    {% if col_i > 0 %}
                        <tr class="check-column"> {% endif %}
                <td class="column">{{ column | safe }}</td>
                <td class="stamp" id="{{ "{}-{}".format(genre_i, col_i) }}">
                    <p class="box_num">{{ d.value }}</p>
                    {% set d.value = d.value + 1 %}
                    <img src="{{ Images.rose }}" style="visibility: hidden" class="rose"
                         id="{{ "{}-{}rose".format(genre_i, col_i) }}"></td>
                </tr>
                {% endfor %}

        {% endfor %}
    </table>
</div>
<!-- Check Table End -->
</body>

<style>
    html {
        font-family: sans-serif;
    }

    body {
        margin: 1%;
    }

    /* Title Table */
    div.title {
        margin: 5px 1 0px 1;
    }

    table.title-table {
        border: solid 1px{{ Client.border_color }};
        padding: 0;
        border-spacing: 0;
        width: 95%;
        vertical-align: middle;
    }

    th.number {
        color: {{ Client.number_color }};
        background: {{ Client.number_background }};
        font-size: {{ Client.number_size }}px;
        line-height: {{ Client.number_size*1.1 }}px;
    }

    th.name {
        color: {{ Client.name_color }};
        background: {{ Client.name_background }};
        font-size: {{ Client.name_size }}px;
        width: 75%;
        height: 100%;
    }


    /* Check Table */
    div.check {
        margin: 10px 0 0 0;
        font-weight: bolder;
    }

    table.check-table {
        border: solid 1px{{ Client.border_color }};
        border-spacing: 0;
        padding: 0;
        width: 95%;
        vertical-align: middle;
        text-align: center;
    }

    tr.check-column {
        height: 75px;
    }

    td.genre {
        border: solid 1px{{ Client.border_color }};
        background: {{ Client.genre_background }};
        width: 13%;
    }

    td.genre > p {
        margin: 10px auto;
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        white-space: nowrap;
        color: {{ Client.genre_color }};
        font-size: {{ Client.genre_size * 2 }}vh;
        width: {{ Client.genre_size * 0.8 }}px;
        transform: translateX({{ Client.genre_size }}vh);

    }

    td.column {
        border: solid 1px{{ Client.border_color }};
        background: {{ Client.column_background }};
        color: {{ Client.column_color }};
        width: 72%;
        font-size: {{ Client.column_size }}px;
    }

    td.stamp {
        width: 15%;
        height: 75px;
        border: solid 1px{{ Client.border_color }};
        position: relative;
    }

    img.rose {
        max-width: 70px;
        height: auto;
    }

    p.box_num {
        position: absolute;
        font-size: 0.5em;
        left: 0.5em;
        bottom: 0.5em;
    }
</style>
<script>
    const ws = new WebSocket(ws_url());
    ws.onclose = function (event) {
        location.reload();
    };
    let ids = {{ data.__str__().replace("False", "false").replace("True", "true") | safe}};

    for (let key in ids) {
        if (ids[key]) {
            document.getElementById(key + "rose").style.visibility = "visible";
        }
    }

    function ws_url() {
        let loc = window.location, new_uri;
        if (loc.protocol === "https:") {
            new_uri = "wss:";
        } else {
            new_uri = "ws:";
        }
        return new_uri + "//" + loc.host + "/ws/client"
    }

    document.querySelectorAll(".stamp").forEach(item => {
        item.addEventListener("click", event => {
            let c_id = event.target.id;
            if (c_id.endsWith("rose")) {
                c_id = c_id.replace("rose", "");
            }
            let col_name = document.getElementById(c_id).parentElement.querySelector("td.column").textContent;
            if (ids[c_id]) {
                if (confirm("『" + col_name + "』を削除しますか?")) {
                    ids[c_id] = false;
                    document.getElementById(c_id + "rose").style.visibility = "hidden";
                    ws.send(c_id + " " + "off")
                }
            } else {
                if (confirm("『" + col_name + "』をチェックしますか?")) {
                    ids[c_id] = true;
                    document.getElementById(c_id + "rose").style.visibility = "visible";
                    ws.send(c_id + " " + "on")

                }
            }
        })
    });


</script>
</html>