{% load otree %}

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

    <h3>
        　説明
    </h3>

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

    <p>
        この研究では、あなたは無作為かつ匿名で他の参加者とペアになります。
        各自が協力するか否かを同時に非公開で選択します。
        あなたのペイオフは、以下のように両者の選択によって決定されます。
    </p>
    <p><i>各セルでは、左にある金額が自分のペイオフ、右にある金額が他の参加者のペイオフです。
        左側が自分の支払い額、右側が他の参加者の支払い額です。</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>{{ Constants.both_cooperate_payoff }}, {{ Constants.both_cooperate_payoff }}</td>
            <td>0, {{ Constants.betray_payoff }}</td>
        </tr>
        <tr>
            <th>Defect</th>
            <td>{{ Constants.betray_payoff }}, 0</td>
            <td>{{ Constants.both_defect_payoff }}, {{ Constants.both_defect_payoff }}</td>
        </tr>
    </table>

</div>
</div>