{% load otree %}

<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>
        これは１対１の取引です。<br>
        同じ相手と再度取引を行うことはありません。<br>
        あなたは<b>相手と協力する"Cooperate"か</b>、<b>相手を裏切る"Defect"か</b>、いずれかを選択します。<br>
        同時に相手プレイヤーも、あなたと協力するか、あなたを裏切るかを選択します。<br>
        そして両者の選択の組み合わせによって両者の獲得ポイントが決まります。
        具体的には下表のように決まります。
    </p>
    <p>それぞれのセルにおいて、<b>左側に示されている数字があなたが得るポイント</b>で、
        <b>右側に示されている数字が相手が得るポイント</b>です。<br>
        （例）あなたが"Defect"、相手が"Cooperate"を選択した場合、
        あなたは100ポイントを得て、相手は50ポイントを失います（表の左下のセル参照）。
    </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>{{ Constants.both_cooperate_payoff }}, {{ Constants.both_cooperate_payoff }}</td>
            <td>{{ Constants.betrayed_payoff }}, {{ Constants.betray_payoff }}</td>
        </tr>
        <tr>
            <th>Defect</th>
            <td>{{ Constants.betray_payoff }}, {{ Constants.betrayed_payoff }}</td>
            <td>{{ Constants.both_defect_payoff }}, {{ Constants.both_defect_payoff }}</td>
        </tr>
    </table>

</div>
</div>