{% extends 'otree/WaitPage.html' %}
{% load otree %}
{% block styles %}

    <style>
        body {
            background-color: white;
        }

        .otree-wait-page {
            max-width: 1103px;
        }


        .card {
            box-shadow: none;
            border: none;
            margin-top: 10px;
        }

        .card-body {
            padding: 0;
        }

        .progress-bar {
            display: none;
        }

        .otree-wait-page__title {
            text-align: center;
            display: none;

        }



        .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;
        }

        .left {
            width: 550px;
        }

        .right {
            width: 550px;
        }

        .choice {
            margin-left: 30px
        }

        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
        }

        #fade {
            animation-delay: 0s;
            animation: highlight 0s;
        }

    </style>
{% endblock %}

{% block content %}
    <h1><i>Match: {{ current_match }} &nbsp; Round: {{ period_number }}</i></h1>

    <div class="row">

    <div class="left" style="border-top: solid black 3px;">
        {% include 'prisoners_dilemma/History.html' %}
    </div>
    <div class="vertical-row"></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>
            </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: 20px;margin-top: 40px;text-align: center">
            <div style="margin-top: 20pt; font-size: large"> Waiting for others

            </div>
        </div>
    </div>
    <script>

        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);
                }

            }


        };


    </script>

{% endblock %}