{% extends "global/Page.html" %}
{% load otree static %}
{% block styles %}
    <style>
        .page-header {
            display: none
        }

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

        body {
            background-color: ghostwhite;
        }

        table.fixed_header {
            width: 80%; /* Optional */
            /* border-collapse: collapse; */
            border-spacing: 0;
        }

        table.fixed_header tbody,
        table.fixed_header thead {
            display: block;
        }

        table.fixed_header thead tr th {
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-top: 3px solid black;
            /*text-align: left;*/
        }

        .fixed_header tr:hover {
            background-color: lightgray;
        }

        .fixed_header tbody {
            height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            border-bottom: none;
        }

        .fixed_header tbody {
            border-top: 2px solid black;
        }

        .fixed_header td, thead th {
            min-width: 120px;
            border-right: 1px solid black;
        }

        .fixed_header td:last-child, thead th:last-child {
            border-right: none;
        }

        .mpayoffs {
            min-width: 50px;
            border: solid black;
        }

        .details {
            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24), 0 5px 10px 0 rgba(0, 0, 0, 0.19);

        }
    </style>
{% endblock %}
{% block content %}


    <div style="text-align: center;margin-top: 40px">
        <h1>The Session is Over </h1>
    </div>

    <div class="details"
         style=" border: 1px solid black; background-color: white; border-radius: 10px; width:550px; height:210px;margin:auto;margin-top: 15px;text-align: center">
        <h4 style="color: orangered; margin-top: 15px"><i>Payment from Part One</i></h4>
        <div class="row">
            <div>
                <table style="margin-left: 65px;margin-top: 10px">
                    <tbody>
                    <tr class="empty">
                        <td class="empty"></td>
                        <td style="font-size: medium;font-weight: bold">1</td>
                        <td style="font-size: medium;font-weight: bold">2</td>
                    </tr>
                    <tr>
                        {#                <td rowspan="2" style="border: none; width: 10px;font-size: medium;"> Your Choice</td>#}
                        <td height="40px" style="font-size: medium;font-weight: bold;padding-right: 5px">1</td>
                        <td class="mpayoffs choice-one other-one ee"
                            style="font-size: medium">{{ sh_game_ee }},{{ sh_game_ee }}</td>
                        <td class="mpayoffs choice-one other-two es"
                            style="font-size: medium">{{ sh_game_es }},{{ sh_game_se }}</td>
                    </tr>
                    <tr>
                        <td height="40px" style="font-size: medium;font-weight: bold;padding-right: 5px">2</td>
                        <td class="mpayoffs choice-two other-one se"
                            style="font-size: medium">{{ sh_game_se }},{{ sh_game_es }}</td>
                        <td class="mpayoffs choice-two other-two ss"
                            style="font-size: medium">{{ sh_game_ss }},{{ sh_game_ss }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <ul>
                    <li style="margin-top: 15px; text-align: left"> This environment was randomly chosen <br> to
                        determine
                        your part one payment.
                    </li>
                    <li style="margin-top: 15px; text-align: left;"> Thus, you earned <b>{{ sh_points }} points </b> in
                        part one <br> of the session, which converts to <b>${{ sh_dollars }} </b>.
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="details"
         style=" border: 1px solid black; background-color: white; border-radius: 10px; width:550px; height:180px;margin:auto;margin-top: 20px;text-align: center">
        <h4 style="color: orangered; margin-top: 15px"><i>Payment from Part Two</i></h4>
        <div class="row" style="width: 550px;margin: 0">
            <div style="width: 275px;text-align: center">
                <h4 style="margin-top: 20px">Points Earned</h4>
                <div style="font-size: xx-large;">{{ pd_points }}</div>
            </div>
            <div>
                <div style="width: 275px;text-align: center">
                    <h4 style="margin-top: 20px">Dollars Earned</h4>
                    <div style="font-size: xx-large;">{{ pd_dollars }}</div>
                </div>
                <div>

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

    <div class="details"
         style=" border: 1px solid black; background-color: white; border-radius: 15px; width:550px; height:130px;margin:auto;margin-top: 20px;text-align: center">
        <div style="text-align: center; margin-top: 15px;"><h4><i style="color: orangered">Total Payment</i></h4>
            <div style="margin-top: 15px;font-size: xx-large"><b>{{ payment }} </b>= ${{ sh_dollars }}
                + {{ pd_dollars }}
                </div>
        </div>
    </div>



    <script>

        let choice = {{ sh_action }};
        let others_choice = {{ sh_action_other }};

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

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

        }


    </script>

{% endblock %}