{% extends "global/Page.html" %}
{% block title %}Part II {% endblock %}

{% block content %}

    <p>
        After rolling a ten-sided dice, the number selected was:
        <strong>{{ player.lottery_random }}</strong>
        <br><br>
        Your payoff is:
        <strong>{{ player.payoff }}</strong><br>

        <br>
    </p>
    {% next_button %}

    <p>
          <br> Your choices were:<br>
    </p>

    <table class="table table-bordered" id="my_table">
        <thead>
        <tr>
             <th>{{ 'Row #' }}</th>   <th>{{ 'Lottery A' }}</th>   <th >{{ 'Lottery B' }}</th>
        </tr>
        </thead>
        <tr id="row1">
            <td>{{ '1' }}</td> <td id="L1" >{{ L1 }}</td>   <td id="R1" >{{ R1 }}</td>
        </tr>
        <tr id="row2">
            <td>{{ '2' }}</td> <td id="L2" >{{ L2 }}</td>   <td id="R2" >{{ R2 }}</td>
        </tr>
        <tr id="row3">
            <td>{{ '3' }}</td> <td id="L3" >{{ L3 }}</td>   <td id="R3" >{{ R3 }}</td>
        </tr>
        <tr id="row4">
            <td>{{ '4' }}</td> <td id="L4" >{{ L4 }}</td>   <td id="R4" >{{ R4 }}</td>
        </tr>
        <tr id="row5">
            <td>{{ '5' }}</td> <td id="L5" >{{ L5 }}</td>   <td id="R5" >{{ R5 }}</td>
        </tr>
        <tr id="row6">
            <td>{{ '6' }}</td> <td id="L6" >{{ L6 }}</td>   <td id="R6" >{{ R6 }}</td>
        </tr>
        <tr id="row7">
            <td>{{ '7' }}</td> <td id="L7" >{{ L7 }}</td>   <td id="R7" >{{ R7 }}</td>
        </tr>
        <tr id="row8">
            <td>{{ '8' }}</td> <td id="L8" >{{ L8 }}</td>   <td id="R8" >{{ R8 }}</td>
        </tr>
        <tr id="row9">
            <td>{{ '9' }}</td> <td id="L9" >{{ L9 }}</td>   <td id="R9" >{{ R9 }}</td>
        </tr>
    </table>


    <p>
          <br> History Table:<br>
    </p>
            <div class="row justify-content-center" >
                <table class = "table">
                    <tr>
                        <th class = "text-center">Round </th>
                        <th class = "text-center">Payoff (points) </th>
                    </tr>
                    <tbody>
                        <tr>
                            <td class = "text-center my_style">Part 1 Round 1</td>
                            <td class = "text-center"> {{ participant.Points_1 }} </td>
                        </tr>
                        <tr>
                            <td class = "text-center my_style">Part 1 Round 2</td>
                            <td class = "text-center"> {{ participant.Points_2 }} </td>
                        </tr>
                        <tr>
                            <td class = "text-center my_style">Part 1 Round 3</td>
                            <td class = "text-center"> {{ participant.Points_3 }} </td>
                        </tr>
                        <tr>
                            <td class = "text-center my_style">Part 2 </td>
                            <td class = "text-center"> {{ player.payoff }} </td>
                        </tr>
                    </tbody>
                </table>
            </div>



{% endblock %}

{% block style %}
    <style>
        #my_table td {
           text-align: center;
        }

        #my_table td.choice_cell:hover {
            background: #a0cff8;
        }

        .selected {
            background: #a0cff8 !important;
        }

        .selectedrow td {
            border-top: 4px solid #cf2c06 !important;
            border-bottom: 4px solid #cf2c06 !important;
        }

        .selectedrow td:first-child {
            border-left: 4px solid #cf2c06 !important;
        }

        .selectedrow td:last-child {
            border-right: 4px solid #cf2c06 !important;
        }

        #my_table th {
           text-align: center;
        }

        #my_table th {
            background: #0d6efd;
        }

        tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
{% endblock %}


{% block script %}
    <script>
        let num_rows = {{ num_rows }};
        let responses = js_vars.response;
        let i;
        let diceroll = {{ player.random_draw }};
        for (i=0; i < num_rows; i++)

        $(document).ready(function() {
              for (i=0; i < responses.length; i++)
            {
                if (responses[i] == 0) {
                    $('#L' + (i+1).toString()).addClass('selected');
                } else {
                    $('#R' + (i+1).toString()).addClass('selected');
                }
            }
            $('#row' + diceroll.toString()).addClass('selectedrow');
        });

    </script>

{% endblock %}