{% 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 "Up", "Center", or "Down".
        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 your payoff and to the right the payoff 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>
