{{ extends 'global/Page.html' }}
{{ block title }} {{ endblock }}

{{ block content }}

<style>
    #prevRounds td { text-align: center; }
    #prevRounds table tbody tr:nth-last-child(2) { background-color: #cff4fc; }
</style>
<div>
    {{ if first_round }}
        <div class="card bg-light m-3">
            <div class="card-body">
                {{ if isGameOne }}
                    <h3>Instructions for the First Match</h3>
                    <p>
                        You have just been matched with a partner.
                        You will interact with your partner for 40 rounds.
                    </p>
                {{ else }}
                    <h3>Instructions for the Second Match</h3>
                    {{ if full_info }}
                        <p>
                            You have just been rematched with another partner.
                            You will interact with your partner for 40 rounds.
                        </p>
                    {{ else }}
                        <p>
                            You have just been rematched with another partner.
                            You will interact with your partner for 40 rounds.
                            <b>
                                However, in this match, the feedback you are given after every round
                                consists of information about your choice, your partner's choice,
                                and the payoff that you earned in the round.
                            </b>
                            In other words, in this match, you will not provided with any information
                            regarding the payoff that your partner earned in the round.
                        </p>
                    {{ endif }}
                {{ endif }}
                <p>The payoff table is fixed from round to round and is shown below:</p>

                <table class='table table-bordered text-center'
                       style='width: auto; margin: auto'>
                    <tr>
                        <td>Your Choice</td>
                        <td>Partner's Choice</td>
                        <td>Your Payoff</td>
                        {{ if full_info }}<td>Partner's Payoff</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>A</td>
                        <td>{{ aa1 }}</td>
                        {{ if full_info }}<td>{{ aa2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>{{ ab1 }}</td>
                        {{ if full_info }}<td>{{ ab2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>A</td>
                        <td>{{ ba1 }}</td>
                        {{ if full_info }}<td>{{ ba2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>B</td>
                        <td>{{ bb1 }}</td>
                        {{ if full_info }}<td>{{ bb2 }}</td>{{ endif }}
                    </tr>
                </table>
                <br />
                <p>
                    The experiment proceeds as fast as the slower participant of the pair.
                    Thus, the experiment may take longer than expected if you or your partner
                    take a long time to make a decision.
                </p>
            </div>
        </div>
    {{ endif }}

    <div class="row">
        <div class="col-sm-5">
            <h5>
                Game {{ game_number }} - Round {{ game_round_number }} of {{ C.GAME_ROUNDS }}
            </h5>
            {{ formfields }}

            {{ next_button }}
        </div>
        <div class="col-sm-7">
            {{ if has_prev_rounds }}
                <div>
                    <p>
                        Here are the results of the previous rounds:
                    </p>
                    <table class="table" style="margin-bottom: 0">
                        <thead>
                            <tr>
                                <th style="text-align: center">Round</th>
                                <th style="text-align: center">Your Choice</th>
                                <th style="text-align: center">Partner's Choice</th>
                                <th style="text-align: center">Your Payoff</th>
                                {{ if full_info }}                   
                                    <th style="text-align: center">Partner's Payoff</th>
                                {{ endif }}
                            </tr>
                        </thead>
                    </table>
                    <div id="prevRounds" style="border: 2px solid black; height: 400px; overflow: scroll;">
                        <table class="table">
                            <tbody>
                                {{ for r in prev_rounds }}
                                    {{ if pairPosition == 1 }}
                                        <tr>
                                            <td>{{ r.round_number_in_game }}</td>
                                            <td>{{ if r.pairOneChoiceOne }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ if r.pairOneChoiceTwo }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ r.pairOnePayoffOne }} ECUs</td>
                                            {{ if full_info }}  
                                                <td>{{ r.pairOnePayoffTwo }} ECUs</td>
                                            {{ endif }}
                                        </tr>
                                    {{ endif }}
                                    {{ if pairPosition == 2 }}
                                        <tr>
                                            <td>{{ r.round_number_in_game }}</td>
                                            <td>{{ if r.pairOneChoiceTwo }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ if r.pairOneChoiceOne }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ r.pairOnePayoffTwo }} ECUs</td>
                                            {{ if full_info }}  
                                                <td>{{ r.pairOnePayoffOne }} ECUs</td>
                                            {{ endif }}
                                        </tr>
                                    {{ endif }}
                                    {{ if pairPosition == 3 }}
                                        <tr>
                                            <td>{{ r.round_number_in_game }}</td>
                                            <td>{{ if r.pairTwoChoiceOne }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ if r.pairTwoChoiceTwo }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ r.pairTwoPayoffOne }} ECUs</td>
                                            {{ if full_info }}  
                                                <td>{{ r.pairTwoPayoffTwo }} ECUs</td>
                                            {{ endif }}
                                        </tr>
                                    {{ endif }}
                                    {{ if pairPosition == 4 }}
                                        <tr>
                                            <td>{{ r.round_number_in_game }}</td>
                                            <td>{{ if r.pairTwoChoiceTwo }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ if r.pairTwoChoiceOne }} A {{ else }} B {{ endif }}</td>
                                            <td>{{ r.pairTwoPayoffTwo }} ECUs</td>
                                            {{ if full_info }}  
                                                <td>{{ r.pairTwoPayoffOne }} ECUs</td>
                                            {{ endif }}
                                        </tr>
                                    {{ endif }}
                                {{ endfor }}
                                <tr style="visibility: hidden">
                                    <th style="border-bottom: 0">Round</th>
                                    <th style="border-bottom: 0">Your Choice</th>
                                    <th style="border-bottom: 0">Partner's Choice</th>
                                    <th style="border-bottom: 0">Your Payoff</th>
                                    {{ if full_info }}                   
                                        <th style="border-bottom: 0">Partner's Payoff</th>
                                    {{ endif }}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            {{ endif }}
        </div>        
    </div>

    <br><br>
    {{ if has_prev_rounds }}
        <div class="card bg-light m-3">
            <div class="card-body">
                <h3>
                    Instructions
                </h3>

                <p>Here is the payoff matrix for this match:</p>

                <table class='table table-bordered text-center'
                       style='width: auto; margin: auto'>
                    <tr>
                        <td>Your Choice</td>
                        <td>Partner's Choice</td>
                        <td>Your Payoff</td>
                        {{ if full_info }}<td>Partner's Payoff</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>A</td>
                        <td>{{ aa1 }}</td>
                        {{ if full_info }}<td>{{ aa2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>{{ ab1 }}</td>
                        {{ if full_info }}<td>{{ ab2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>A</td>
                        <td>{{ ba1 }}</td>
                        {{ if full_info }}<td>{{ ba2 }}</td>{{ endif }}
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>B</td>
                        <td>{{ bb1 }}</td>
                        {{ if full_info }}<td>{{ bb2 }}</td>{{ endif }}
                    </tr>
                </table>
            </div>
        </div>
    {{ endif }}
</div>


{{ endblock }}

{{ block scripts }}
<script>
var prevRounds = document.getElementById("prevRounds");

prevRounds.scrollTop = prevRounds.scrollHeight;
</script>
{{ endblock }}