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

    <style>

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

        html, body {
            margin: 0;
        }

        body {
            background-color: ghostwhite;
        }

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

        .card {
            box-shadow: none;
            border: none;
            margin-top: 0px;
            height: 600px;
        }

        .debug-info {
            display: none;
        }

        .card-body {
            padding: 0;
            margin-top: 20px;
        }

        .progress-bar {
            display: none;
        }

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

        }

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

        .main {

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

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

        .right {
        }

        .choice {
            margin: auto;
        }

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

    </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;<i>Please
                Wait </i></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>
                    <td style="width:102px "></td>

                </tr>
                <tr class="empty">
                    <td class="empty"></td>
                    <td class="empty"></td>
                    <td class="your_choice">1</td>
                    <td class="your_choice">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">{{ cc }}, {{ cc }}</td>
                    <td class="payoffs choice-one">{{ 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">{{ dc }}, {{ cd }}</td>
                    <td class="payoffs choice-two">{{ dd }}, {{ dd }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        let row = {{ row }};

        if (row == 1) {
            $('.choice-one.payoffs').css('background-color', 'cornflowerblue')
        } else {
            $('.choice-two.payoffs').css('background-color', 'forestgreen')
        }

    </script>

{% endblock %}