{% extends "global/Page.html" %}
{% load otree %}
<!-- {% load otree_tags staticfiles %} -->

{% block title %}
    Instructions
{% endblock %}

{% block content %}

<div class="card bg-light m-3">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

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

    <p>
        In this phase of the experiment, you will be randomly and anonymously paired with another
        participant.
        Each of you simultaneously and privately chooses whether you want to
        cooperate or defect.
        The number of points you earn will be determined by the choices of both as below:
    </p>
    <p><i>In each cell, the amount to the left is the payoff for
        you and to the right for the other participant.</i></p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2>The Other Participant</th>
        </tr>
        <tr>
            <th>Cooperate</th>
            <th>Defect</th>
        </tr>
        <tr>
            <th rowspan=2><span style="transform: rotate(-90deg);">You</span></th>
            <th>Cooperate</th>
            <td>{{ both_cooperate_payoff }}, {{ both_cooperate_payoff }}</td>
            <td>0, {{ betrayer_payoff }}</td>
        </tr>
        <tr>
            <th>Defect</th>
            <td>{{ betrayer_payoff }}, 0</td>
            <td>{{ both_defect_payoff }}, {{ both_defect_payoff }}</td>
        </tr>
    </table>

</div>
</div>

    {% next_button %}

{% endblock %}