{% extends "global/Page.html" %}
{% load otree static %}
{% block styles %}

    <style>
        .debug-info {
            display: none;
        }

        html, body {
            margin: 0;
        }

        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            background-color: ghostwhite;
        }

        .otree-body {
            background-color: white;
            height: 650px;
            max-width: 1153px;
            margin-top: 50px;
            border-radius: 30px;
            border: solid black;
        }

        .page-header {
            padding: 0;
            margin: 20px;
        }

        .btn-primary:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }

        h1 {
            text-align: center;
        }

        .main {

            display: grid;
            grid-template-columns: 50% 50%;
        }

        .left {
            border-right: black solid 3px;
            height: 550px;
        }

        .right {
        }

        .choice {
            margin: auto
        }

        td {
            text-align: center;
            font-size: xx-large;
        }

        .payoffs {
            min-width: 100px;
            border: solid black;
        }

        .your_choice {
            border: none;
            min-width: 50px;
            font-weight: bold;
        }

        .empty {
            border: none;
        }

        .vertical-row {
            Float: left;
            height: 560px;
            width: 3px; /* edit this if you want */
            background-color: black
        }

        {#@keyframes highlight {#}
        {#    0% {#}
        {#        background: yellow;#}
        {#    }#}
        {#    100% {#}
        {#        background: none;#}
        {#    }#}

        {##fade {#}
        {#    animation-delay: 1s;#}
        {#    animation: highlight 3s;#}


        .otree-timer {
            display: none;
        }

    </style>
{% endblock %}
{% block content %}
    <h1 style="padding-top:5px">{% if match_number > 9 %}<i style="margin-left: -18px"></i>{% endif %}
        <i>Match: {{ current_match }} &nbsp;
            Round: {{ period_number }}</i></h1>

    <div class="main" style="margin-left: 10px">

        <div class="left" style="border-top: solid black 3px;">
            {% include 'prisoners_dilemma/History.html' %}
        </div>
        <div class="right" style="border-top: solid black 3px;">
            <h1 style="text-align: center; color: orangered;margin-top: 15px;height: 47px">&nbsp;&nbsp;Round
                Outcome </h1>
            <table id="choice_matrix" class="choice">
                <tbody>
                <tr class="empty">
                    <td class="empty"></td>
                    <td class="empty"></td>
                    <td colspan="2">Other's Choice</td>
                </tr>
                <tr class="empty">
                    <td class="empty"></td>
                    <td class="empty"></td>
                    <td class="your_choice other-one">1</td>
                    <td class="your_choice other-two ">2</td>
                    <td style="width:102px "></td>

                </tr>
                <tr class="row-one" id="one">
                    <td rowspan="2" style="border: none; width: 50px;padding-right: 5px"> Your Choice</td>
                    <td height="100" class="your_choice choice-one debug">1</td>
                    <td class="payoffs choice-one other-one cc">{{ cc }}, {{ cc }}</td>
                    <td class="payoffs choice-one other-two cd">{{ cd }}, {{ dc }}</td>
                </tr>
                <tr class="row-two" id="two">
                    <td height="100" class="your_choice choice-two ">2</td>
                    <td class="payoffs choice-two debug other-one dc">{{ dc }}, {{ cd }}</td>
                    <td class="payoffs choice-two other-two dd">{{ dd }}, {{ dd }}</td>
                </tr>
                </tbody>
            </table>
            <div style="margin-left: 15px;;text-align: center">
                <div style="margin-top: 20pt; font-size: x-large"> Computer generated random number:
                    <b>{{ dice_roll }}</b></div>
                <div style="margin-top: 5pt; font-size: x-large"> . . . is {{ gl }} than: <b>{{ delta }}</b></div>
                <div style="margin-top: 5pt; font-size: x-large; font-weight: bold"> This match
                    will {{ terminate }}</div>

            </div>
        </div>
    </div>
    {#    <div class="text-center" style="margin-top: 15px">#}
    {#        <button id="click_to" class="b btn btn-primary btn-lg  button2" id='confirm'#}
    {#                style="align-self:center; width:50%;height:60px; border-radius:15px;margin-bottom:10px;#}
    {#                        background-color:orangered;font-size:xx-large; line-height: 0">#}
    {#            {{ click_to }}#}
    {#        </button>#}
    {##}
    {#    </div>#}
    <script>
        let push = {{push}};

        window.onload = function () {
            let choice = {{ choice }};
            let others_choice = {{ others_choice }};
            if (choice == 1) {
                $('.choice-one.payoffs').css('background-color', 'cornflowerblue').css('opacity', .5);
                if (others_choice == 1) {
                    $('.other-one.payoffs').css('background-color', 'cornflowerblue').css('opacity', .5);
                    $('.cc').css('background-color', 'yellow').css('opacity', 1);
                }
                if (others_choice == 0) {
                    $('.other-two.payoffs').css('background-color', 'forestgreen').css('opacity', .5);
                    $('.cd').css('background-color', 'yellow').css('opacity', 1);
                }

            }
            if (choice == 0) {
                $('.choice-two.payoffs').css('background-color', 'forestgreen').css('opacity', .5);
                if (others_choice == 1) {
                    $('.other-one.payoffs').css('background-color', 'cornflowerblue').css('opacity', .5);
                    $('.dc').css('background-color', 'yellow').css('opacity', 1);
                }
                if (others_choice == 0) {
                    $('.other-two.payoffs').css('background-color', 'forestgreen').css('opacity', .5);
                    $('.dd').css('background-color', 'yellow').css('opacity', 1);
                }

            }
            if (push) {
                let confirm = Math.random() * 1000;
                setTimeout(function () {
                    document.getElementById('click_to').click()
                }, confirm)
            }


        };


    </script>

{% endblock %}