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

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

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

        .selected {
            background: #a0cff8 !important;
        }

        #my_table th {
           text-align: center;
        }
        #my_table th {
            background: #0671ce;
        }
        tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
{% endblock %}


{% block content %}

    <p>
        Your decision row that was randomly selected to be played is:
        <br>
        <strong>Row # {{ player.random_draw }}</strong>
        <br><br><br>
        Now, click on the button below to roll the dice and see you payment.

    </p>

    <button id="submit" class="otree-btn-next btn btn-primary" >Roll the dice</button>

     <p>
          <br><br><br><br><br><br><br><br> These were your choices:<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>
            <td>{{ '1' }}</td> <td id="L1" >{{ L1 }}</td>   <td id="R1" >{{ R1 }}</td>
        </tr>
        <tr>
            <td>{{ '2' }}</td> <td id="L2" >{{ L2 }}</td>   <td id="R2" >{{ R2 }}</td>
        </tr>
    </table>

{% endblock %}


{% block script %}
    <script>
        let num_rows = {{ num_rows }};
        let responses = js_vars.response;
        let i;
        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');
                }
            }
        });

    </script>

{% endblock %}