{% 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>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-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_0 label=''}}</td>
                   <td>1</td>
                   <td>{{ formfield player.your_given_1 label=''}}</td>
                   <td>2</td>
                   <td>{{ formfield player.your_given_2 label=''}}</td>
                   <td>3</td>
                   <td>{{ formfield player.your_given_3 label=''}}</td>
               </tr>
               <tr>
                   <td>4</td>
                   <td>{{ formfield player.your_given_4 label=''}}</td>
                   <td>5</td>
                   <td>{{ formfield player.your_given_5 label=''}}</td>
                   <td>6</td>
                   <td>{{ formfield player.your_given_6 label=''}}</td>
                   <td>7</td>
                   <td>{{ formfield player.your_given_7 label=''}}</td>
               </tr>
               <tr>
                   <td>8</td>
                   <td>{{ formfield player.your_given_8 label=''}}</td>
                   <td>9</td>
                   <td>{{ formfield player.your_given_9 label=''}}</td>
                   <td>10</td>
                   <td>{{ formfield player.your_given_10 label=''}}</td>
                   <td>11</td>
                   <td>{{ formfield player.your_given_11 label=''}}</td>
               </tr>
               <tr>
                   <td>12</td>
                   <td>{{ formfield player.your_given_12 label=''}}</td>
                   <td>13</td>
                   <td>{{ formfield player.your_given_13 label=''}}</td>
                   <td>14</td>
                   <td>{{ formfield player.your_given_14 label=''}}</td>
                   <td>15</td>
                   <td>{{ formfield player.your_given_15 label=''}}</td>
               </tr>
               <tr>
                   <td>16</td>
                   <td>{{ formfield player.your_given_16 label=''}}</td>
                   <td>17</td>
                   <td>{{ formfield player.your_given_17 label=''}}</td>
                   <td>18</td>
                   <td>{{ formfield player.your_given_18 label=''}}</td>
                   <td>19</td>
                   <td>{{ formfield player.your_given_19 label=''}}</td>
               </tr>
               <tr>
                   <td>20</td>
                   <td>{{ formfield player.your_given_20 label=''}}</td>
                   <td>21</td>
                   <td>{{ formfield player.your_given_21 label=''}}</td>
                   <td>22</td>
                   <td>{{ formfield player.your_given_22 label=''}}</td>
                   <td>23</td>
                   <td>{{ formfield player.your_given_23 label=''}}</td>
               </tr>
               <tr>
                   <td>24</td>
                   <td>{{ formfield player.your_given_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>

{% endblock %}