{{ block title }} round {{ player.round_number }} {{ endblock }}
{{ block content }}
    <div class="content">
        {{ if treatment == 0 }}
            <p>カードをどちらか一枚選択してクリックしてください</p>
        {{ else }}
            <p>カードをどちらか選択してクリックしてください</p>
            <p>また、最初に選択したカードが所持金に反映されますが、選択しなかったカードも見ることができます</p>
        {{ endif }}

        <div class="space" style="margin: 50px"></div>

        <div id="panel">
            <div class="cards back">
                <img src="{{ static 'regret/back.jpg' }}" />
            </div>
            <div class="cards back">
                <img src="{{ static 'regret/back.jpg' }}" />
            </div>
        </div>

        <div class="space" style="margin: 50px"></div>
        
        <span id="output"></span>
        <input type="hidden" class="data" />
        <input type="hidden" class="data" />
    </div>

    <div class="space" style="margin: 50px"></div>

    {{ next_button }}
    <p>注）必ずカードを選択してから次へ進むようにしてください</p>
    <style>
        #panel {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: auto;
            height: auto;
        }
    
        .cards {
            width: 120px;
            height: 160px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .back img {
            width: 120px;
            height: 160px;
        }
    
        .front {
            border: 2px solid black;
            font-size: 30px;
            font-weight: bold;
            background: aliceblue;
            animation:rotation 200ms forwards;
        }
    
        .bold {
            font-weight: bold;
            font-size: larger;
            color: crimson;
        }
    
        @keyframes rotation {
            0% { transform: rotateY(-90deg); }
            100% { transform: rotateY(0); }
        }
    
    </style>
    
    <script>
        const div = document.getElementsByClassName("cards");
        let flgFirst = true;
        const numbers = js_vars.cards;
        const treatment = js_vars.treatment;
        const input = document.getElementsByClassName("data");
        const output = document.getElementById("output");
    
        function turn() {
            if (flgFirst) {
                flgFirst = false;
                this.disabled = true;
                output.innerHTML = "あなたが選択したカードは <span class='bold'>" + this.number + "</span> です";
    
                if (this.index == 0) {
                    input[0].name = "yours";
                    input[1].name = "other";
                } else {
                    input[0].name = "other";
                    input[1].name = "yours";
                }
            } else if (!flgFirst && treatment == 0) {
                return;
            }
    
            this.innerHTML = this.number;
            this.className = "cards front";
        }
    
        window.onload = function () {
            for (var i = 0; i < div.length; i++) {
                div[i].index = i;
                div[i].onclick = turn;
                div[i].number = numbers[i];
                input[i].value = numbers[i];
            }
        };
    </script>
{{ endblock }}