{% load otree %}

<div class="card bg-light instructions">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

    <table class='table table-bordered text-center'>

        <tr>
            <th>Price</th>
            <td> {{player.p1}} </td>
            <td></td>
            <td></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td></td>
        </tr>
        <tr>
            <th>Change</th>
            <td> </td>
            <td></td>
            <td></td>
            <td>12</td>
            <td>18</td>
            <td>24</td>
            <td>32</td>
            <td>40</td>
            <td>50</td>
            <td>60</td>
            <td></td>
        </tr>
        <tr>
            <th>Period</th>
          <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
    </table>

</div>
</div>