{% extends "global/Page.html" %}  
{% load otree %}

{% block title %}{% endblock %}

{% block content %}
<style>
    body {
    font-size: 17px;}
    table,
    table tr th,
    table tr td {
       border-collapse: collapse;
       vertical-align: middle;
       text-align: center;
       column-width: 100px;
    }
    tr {
        border-bottom: 1.4px solid #404040;
        border-top: 1.4px solid #404040;
    }
    th:nth-child(odd),td:nth-child(odd) {
    background-color:#f4f4f4;
    }
    #form {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: left;
   }
</style>

<ol start="2">
    <li>
        <p>
            If <b>you are Player 2</b> (For every 1 point contributed, the common pool increases by {{ session.config.unit_less }} points), and the coplayer is Player 1 (For every 1 point contributed, the common pool increases by {{ session.config.unit_more }} points)
        </p>
        <ol type="i">
            <li>
                <p>Please fill in your preferred contribution pattern:</p>
                {{formfield player.your_given_less label=your_given_less }}
                {{formfield player.other_given_less label=other_given_less }}
            </li>

            <li>
                <p>If coplayer's contributions are as follows, how many would you contribute? (Integers between 0-24)</p>
                <table>
                    <thead>
                        <tr style="height:50px">
                        <th>Coplayer</th>
                        <th>You</td>
                        <th>Coplayer</td>
                        <th>You</td>
                        <th>Coplayer</td>
                        <th>You</td>
                        <th>Coplayer</td>
                        <th>You</td>
                        </tr></thead>
                        <tbody>
                        <tr>
                            <td>0</td>
                            <td>{{ formfield player.your_given_less_0 label=''}}</td>
                            <td>1</td>
                            <td>{{ formfield player.your_given_less_1 label=''}}</td>
                            <td>2</td>
                            <td>{{ formfield player.your_given_less_2 label=''}}</td>
                            <td>3</td>
                            <td>{{ formfield player.your_given_less_3 label=''}}</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>{{ formfield player.your_given_less_4 label=''}}</td>
                            <td>5</td>
                            <td>{{ formfield player.your_given_less_5 label=''}}</td>
                            <td>6</td>
                            <td>{{ formfield player.your_given_less_6 label=''}}</td>
                            <td>7</td>
                            <td>{{ formfield player.your_given_less_7 label=''}}</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>{{ formfield player.your_given_less_8 label=''}}</td>
                            <td>9</td>
                            <td>{{ formfield player.your_given_less_9 label=''}}</td>
                            <td>10</td>
                            <td>{{ formfield player.your_given_less_10 label=''}}</td>
                            <td>11</td>
                            <td>{{ formfield player.your_given_less_11 label=''}}</td>
                        </tr>
                        <tr>
                            <td>12</td>
                            <td>{{ formfield player.your_given_less_12 label=''}}</td>
                            <td>13</td>
                            <td>{{ formfield player.your_given_less_13 label=''}}</td>
                            <td>14</td>
                            <td>{{ formfield player.your_given_less_14 label=''}}</td>
                            <td>15</td>
                            <td>{{ formfield player.your_given_less_15 label=''}}</td>
                        </tr>
                        <tr>
                            <td>16</td>
                            <td>{{ formfield player.your_given_less_16 label=''}}</td>
                            <td>17</td>
                            <td>{{ formfield player.your_given_less_17 label=''}}</td>
                            <td>18</td>
                            <td>{{ formfield player.your_given_less_18 label=''}}</td>
                            <td>19</td>
                            <td>{{ formfield player.your_given_less_19 label=''}}</td>
                        </tr>
                        <tr>
                            <td>20</td>
                            <td>{{ formfield player.your_given_less_20 label=''}}</td>
                            <td>21</td>
                            <td>{{ formfield player.your_given_less_21 label=''}}</td>
                            <td>22</td>
                            <td>{{ formfield player.your_given_less_22 label=''}}</td>
                            <td>23</td>
                            <td>{{ formfield player.your_given_less_23 label=''}}</td>
                        </tr>
                        <tr>
                            <td>24</td>
                            <td>{{ formfield player.your_given_less_24 label=''}}</td>
                            <td colspan="4" ></td>
                            <td colspan="2" style="background-color:#f4f4f4; padding-top: 16px;">{{ next_button }}</td>
                        </tr>
                        </tbody>
                    </table>
                </li>

        </ol>
    </li>
</ol>

{% endblock %}