{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Results: Round {{ player.round_number }}
{% endblock %}

{% block content %}
    <p>
        You are the {{ player.role }} Player and you chose {{ player.choice.lower }}. The {{ other.role }} Player chose
        {{ other.choice.lower }}.
    </p>
    <div class="container">
        <div class="row">
            <div class="col-auto">
            {% if session.config.display_all_history %}
                <table class="table table-sm table-striped text-center" style="width: 15em;">
                    <thead>
                        <tr>
                            <th scope="col" colspan="3">History of Play</th>
                        </tr>
                        <tr>
                            <th scope="col">Your Choice</th>
                            <th scope="col">{{ other.role }}'s Choice</th>
                            <th scope="col">Your Payoff</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for a, b in players %}
                            <tr>
                                <td>{{ a.choice }}</td>
                                <td>{{ b.choice }}</td>
                                <td>{{ a.payoff }}</td>
                            </tr>
                        {% endfor %}
                        <tr>
                            <td/><td/>
                            <th>{{ participant.payoff }}</th>
                        </tr>
                    </tbody>
                </table>
            {% else %}
                {% if player.round_number == 1 %}
                    <table class="table table-sm table-striped text-center" style="width: 15em;">
                        <thead>
                            <tr>
                                <th scope="col" colspan="3">History of Play</th>
                            </tr>
                            <tr>
                                <th scope="col">Your Choice</th>
                                <th scope="col">{{ other.role }}'s Choice</th>
                                <th scope="col">Your Payoff</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ player.choice }}</td>
                                <td>{{ other.choice }}</td>
                                <td>{{ player.payoff }}</td>
                            </tr>
                            <tr>
                                <td colspan="2"/>
                                <th>{{ participant.payoff }}</th>
                            </tr>
                        </tbody>
                    </table>
                {% else %}
                    <table class="table table-sm table-striped text-center" style="width: 15em;">
                        <thead>
                            <tr>
                                <th scope="col" colspan="3">History of Play</th>
                            </tr>
                            <tr>
                                <th scope="col">Your Choice</th>
                                <th scope="col">{{ other.role }}'s Choice</th>
                                <th scope="col">Your Payoff</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ p1_last.choice }}</td>
                                <td>{{ p2_last.choice }}</td>
                                <td>{{ p1_last.payoff }}</td>
                            </tr>
                            <tr>
                                <td>{{ player.choice }}</td>
                                <td>{{ other.choice }}</td>
                                <td>{{ player.payoff }}</td>
                            </tr>
                            <tr>
                                <td colspan="2"/>
                                <th>{{ participant.payoff }}</th>
                            </tr>
                        </tbody>
                    </table>
                {% endif %}
            {% endif %}
            </div>
            <div class="col-auto">

            <table class="table table-sm table-striped text-center" style="width: 15em;">
                <thead>
                    <tr>
                        <th></th>
                        <th colspan="4" scope="col">Column<br></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="4" scope="row" class="align-middle">Row</th>
                        <td></td>
                            <th>Aay</th>
                            <th>Bee</th>
                    </tr>
                    <tr>
                        <th scope="row">One</th>
                            <td>(6, 2)</td>
                            <td>(3, 5)</td>
                    </tr>
                    <tr>
                        <th scope="row">Two</th>
                            <td>(3, 5)</td>
                            <td>(5, 3)</td>
                    </tr>
                </tbody>
            </table>

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

    <style>
        .input-group {
            padding: 2rem;
        }
        .slider-label-text {
            padding: 70px;
        }
    </style>

    {% if not subsession.end_round%}
        <p>
            You may now indicate your belief about what the other player will do on the next round using the slider below. Moving the slider towards one option signfies that
            you believe there is a higher probability that this will be the opponent's choice. 
        </p>
        <label class="col-form-label">
            Probability for Opponent Strategy:
        </label>
        
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="slider-label-text" name = "left" id = "left">{{ if player.role == "Row" }} Aay {{ else }} One {{ endif }}</span>
            </div>
            <div class="input-group-append">
                <span class="slider-label-text" name = "right" id = "right">{{ if player.role == "Row" }} Bee {{ else }} Two {{ endif }}</span>
            </div>
            <input type="range" name="slider" id = "slider" min="-2" max="2" step="1" class="form-range">
        </div>
        <br>
        <div style="margin-left: 1em;" class="input-group-append" >
        <span class="input-group-text"><input style = "border: none; background:none; text-align: center;" type = "text" name = "opponent_next_move_belief" id="opponent_next_move_belief" value="50/50"></input></span>
        </div>

        <script>
            document.getElementById("slider").addEventListener("change", probChange);
            function probChange() {
                var inputVal = document.getElementById("slider").value;
                if(inputVal == 2){
                    document.getElementById("opponent_next_move_belief").value = document.getElementById("right").textContent + "with probability " + "1"
                }
                else if(inputVal == 0){
                    document.getElementById("opponent_next_move_belief").value = "50/50"
                }
                else if(inputVal == -2){
                    document.getElementById("opponent_next_move_belief").value = document.getElementById("left").textContent + "with probability " + "1"
                }
                else if(inputVal == -1){
                    document.getElementById("opponent_next_move_belief").value = document.getElementById("left").textContent + "with probability " + ".75"
                }
                else if(inputVal == 1){
                    document.getElementById("opponent_next_move_belief").value = document.getElementById("right").textContent + "with probability " + ".75"
                }
            }
            


            </script>
        <br>

        {% next_button %}
    {% endif %}

{% endblock %}