{% 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>

<p>
    Please fill out the survey:
</p>

<ol>
    <li>
        <p>
        {% if session.config.treatment_group == "endowment" %}
        If <b>you are Player 1</b> (with initial point of {{ session.config.init_more }}), and the coplayer is Player 2 (with initial point of {{ session.config.init_less }})
        {% endif %}

        {% if session.config.treatment_group == "endowment_and_production" %}
        If <b>you are Player 1</b> (with initial point of {{ session.config.init_more }}; for every 1 point contributed, the common pool increases by {{ session.config.unit_more }} points), 
        and the coplayer is Player 2 (with initial point of {{ session.config.init_less }}; for every 1 point contributed, the common pool increases by {{ session.config.unit_less }} points)
        {% endif %}
        </p>
    </li>
    <ol type="i">
    <li>
    <p> Please fill in your preferred contribution pattern:</p>
        {{ formfield player.your_given_more label=your_given_more }}
        {{ formfield player.other_given_more label=other_given_more }}
    </li>
    <li>
    <p>If coplayer's contributions are as follows, how many would you contribute? (Integers between 0-36)</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_more_0 label=''}}</td>
                    <td>1</td>
                    <td>{{ formfield player.your_given_more_1 label=''}}</td>
                    <td>2</td>
                    <td>{{ formfield player.your_given_more_2 label=''}}</td>
                    <td>3</td>
                    <td>{{ formfield player.your_given_more_3 label=''}}</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>{{ formfield player.your_given_more_4 label=''}}</td>
                    <td>5</td>
                    <td>{{ formfield player.your_given_more_5 label=''}}</td>
                    <td>6</td>
                    <td>{{ formfield player.your_given_more_6 label=''}}</td>
                    <td>7</td>
                    <td>{{ formfield player.your_given_more_7 label=''}}</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>{{ formfield player.your_given_more_8 label=''}}</td>
                    <td>9</td>
                    <td>{{ formfield player.your_given_more_9 label=''}}</td>
                    <td>10</td>
                    <td>{{ formfield player.your_given_more_10 label=''}}</td>
                    <td>11</td>
                    <td>{{ formfield player.your_given_more_11 label=''}}</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>{{ formfield player.your_given_more_12 label=''}}</td>
                    <td colspan="4" ></td>
                    <td colspan="2" style="background-color:#f4f4f4; padding-top: 16px;">{{ next_button }}</td>
                </tr>
            </tbody>
        </table>
    </ol>
    </li>
</ol>

{% endblock %}