{% load otree %}

<div class="card bg-light instructions">
    <div class="card-body">

    <h3>
        All choices so far
    </h3>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p>
        The choices that you and the bot made in all rounds so far (including the round you just played) are shown below:
    </p>
    <p><i><b>C = Cooperate, D = Defect</b></i></p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>

        <tr>
            <!--<th colspan=1 rowspan=1></th>-->
            <th>Round</th>
            <th>Your choice</th>
            <th>Bot's choice</th>
            <th>Your payoff</th>
            <th>Bot's payoff</th>
        </tr>

        {% for round_num in round_nums %}
            <tr>
                <th>{{ round_num }}</th>
                <th>{{ all_my_decisions|get_choices:round_num }}</th>
                <th>{{ all_bot_decisions|get_choices:round_num }}</th>
                <th>{{ all_my_payoffs|get_choices:round_num }}</th>
                <th>{{ all_bot_payoffs|get_choices:round_num }}</th>
            </tr>
        {% endfor %}

    </table>

    <br>

    <h3>
        Total payoff so far
    </h3>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p>
        The sum of your payoffs and the bot's payoffs in the rounds played so far are shown below:
    </p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=1 rowspan=1></th>
            <th>Your total payoff</th>
            <th>Bot's total payoff</th>
        </tr>
        <tr>
            <th>Total payoff so far</th>
            <th>{{ my_total_payoff }}</th>
            <th>{{ bot_total_payoff }}</th>
        </tr>
    </table>
</div>
</div>