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

{% block styles %}
   <style>
      input[type=radio] {
        transform: scale(1.5);
        margin: 12px -10px 0px -30px;
      }
   </style>
{% endblock %}

{% block content %}


<h1> Choice </h1>

<div class="container p-3 my-3 border" style="font-size:16pt">
  <p align = "justify"> In each of the following 10 rows in the table, please select your prefereed option between A and B. </p>
  <p>When done, please click on the button "Continue".</p>
  <p align = "justify"> After you have chosen, one row will be randomly chosen and the lottery you chose will be played. <br> The outcome of this lottery will be paid to you.
  </p>

<table class="table">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col" colspan="2" style="text-align:center">A</th>
    <th scope="col" ></th>
    <th scope="col" colspan="2"  style="text-align:center">B</th>
    <th scope="col"></th>
  </tr>
</thead>
<tbody>
<!-- Row 1 -->
  <tr>
    <th scope="row">1</th>
    <td > 1/10 of €{{f1|safe}}  </td>
    <td> 9/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_1 }}</td>
    <td>1/10 of €{{f3|safe}}</td>
    <td >9/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 2 -->
  <tr>
    <th scope="row">2</th>
    <td>2/10 of €{{f1|safe}} </td>
    <td> 8/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_2 }}</td>
    <td>2/10 of €{{f3|safe}}</td>
    <td>8/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 3 -->
  <tr>
    <th scope="row">3</th>
    <td>3/10 of €{{f1|safe}} </td>
    <td> 7/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_3 }}</td>
    <td>3/10 of €{{f3|safe}}</td>
    <td>7/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 4 -->
  <tr>
    <th scope="row">4</th>
    <td>4/10 of €{{f1|safe}} </td>
    <td> 6/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_4 }}</td>
    <td>4/10 of €{{f3|safe}}</td>
    <td>6/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 5 -->
  <tr>
    <th scope="row">5</th>
    <td>5/10 of €{{f1|safe}} </td>
    <td> 5/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_5 }}</td>
    <td>5/10 of €{{f3|safe}}</td>
    <td>5/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 6 -->
  <tr>
    <th scope="row">6</th>
    <td>6/10 of €{{f1|safe}} </td>
    <td> 4/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_6 }}</td>
    <td>6/10 of €{{f3|safe}}</td>
    <td>4/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 7 -->
  <tr>
    <th scope="row">7</th>
    <td>7/10 of €{{f1|safe}} </td>
    <td> 3/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_7 }}</td>
    <td>7/10 of €{{f3|safe}}</td>
    <td>3/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 8 -->
  <tr>
    <th scope="row">8</th>
    <td>8/10 of €{{f1|safe}} </td>
    <td> 2/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_8 }}</td>
    <td>8/10 of €{{f3|safe}}</td>
    <td>2/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 9 -->
  <tr>
    <th scope="row">9</th>
    <td>9/10 of €{{f1|safe}} </td>
    <td> 1/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_9 }}</td>
    <td>9/10 of €{{f3|safe}}</td>
    <td>1/10 of €{{f4|safe}} </td>
  </tr>
<!-- Row 10 -->
  <tr>
    <th scope="row">10</th>
    <td>10/10 of €{{f1|safe}} </td>
    <td> 0/10 of €{{f2|safe}}</td>
    <td style="font-weight: bold">{{ form.HL_10 }}</td>
    <td>10/10 of €{{f3|safe}}</td>
    <td>0/10 of €{{f4|safe}} </td>
  </tr>

</tbody>
</table>

</div>


        <div class="container">
        	<div class="row">
        		&nbsp;
        	</div>
        	<div class="row" style="padding-left:135px;">
        		<div class="col-md-10">

        		</div>
        		<div class="col-md-2">
              <button name="btn_submit" value="True" class="btn btn-primary btn-large">
                  <span style="font-size:18pt">Continue</span>
             </button>
        		</div>

        	</div>
        </div>



{% endblock %} -->