{% load otree_tags staticfiles %}

<div class="instructions well well-lg">

    <h3 class="panel-sub-heading">
        Instructions
    </h3>

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

    <p>
 
        In this study, you will be randomly and anonymously paired with another individual.
        In each round, your pairing will be randomly reassigned. Each of you simultaneously and privately chooses whether you want to play <strong>Up</strong>, <strong>Center</strong>, or <strong>Down</strong>.
        Your payoffs will be determined by the choices of both as below:
    </p>
    <p><i>In each cell, the amount (in points) to the left is the payoff for you and to the right for the other individual.</i></p>

    <table class='table table-bordered text-center' style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3>The other individual</th>
        </tr>
        <tr>
            <th>Up</th>
      <th>Center</th>
      <th>Down</th>
        </tr>
        <tr>
            <th rowspan=3><span class=rotate90>You</span></th>
            <th>Up</th>
            <td>{{Constants.Up_up_amount}}, {{Constants.up_Up_amount}}</td>
   <td>{{Constants.Up_center_amount}}, {{Constants.center_Up_amount}}</td>
          <td>{{Constants.Up_down_amount}}, {{Constants.down_Up_amount}}</td>
        </tr>
    <tr>
            <th>Center</th>
            <td>{{Constants.Center_up_amount}}, {{Constants.up_Center_amount}}</td>
   <td>{{Constants.center_amount}}, {{Constants.center_amount}}</td>         <td>{{Constants.Center_down_amount}}, {{Constants.down_Center_amount}}</td>
        </tr>
      <tr>
            <th>Down</th>
            <td>{{Constants.Down_up_amount}}, {{Constants.up_Down_amount}}</td>
   <td>{{Constants.Down_center_amount}}, {{Constants.center_Down_amount}}</td>         <td>{{Constants.Down_down_amount}}, {{Constants.down_Down_amount}}</td>
        </tr>
    </table>

</div>