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

{% block title %}
Part 3
{% endblock %}

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
        text-align: center
    }
    input[type=radio]:checked + label {
          font-style: normal;
          color: rgb(56,110,246);
          border: 1px solid rgb(56,110,246);
          background-color: rgb(226,233,253)
        }
    }
</style>
<style>
    .checkboxgroup {
    display: inline-block;
    text-align: center;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 20px;
        width: 20px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 14px;
      cursor: not-allowed;
      pointer-events: none;
    }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}
<br>
<p>
    Of these intervals, which interval would you <b>most</b> prefer to receive information about?
</p>
<p>
   If you are not interested in receiving information about any of these intervals, please select "Not interested".
</p>
<br>
<center>
  <div style="width: 100%">
    <div class="checkboxgroup">
      <button id="label5" class="btn btn-success btn-lg" type="button" for="my_radio_button_id5"  >Rank 1-20 <br> (top performance)</button>
      <input type="radio" name="Pref1" value="5" id="my_radio_button_id5"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup">
      <button id="label4" class="btn btn-success btn-lg" type="button" for="my_radio_button_id4"  >Rank 21-40 <br> (above average)</button>
      <input type="radio" name="Pref1" value="4" id="my_radio_button_id4"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup">
      <button id="label3" class="btn btn-success btn-lg" type="button" for="my_radio_button_id3" >Rank 41-60 <br> (average performance)</button>
      <input type="radio" name="Pref1" value="3" id="my_radio_button_id3"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup">
      <button id="label2" class="btn btn-success btn-lg" type="button" for="my_radio_button_id2" >Rank 61-80  <br> (below average)</button>
      <input type="radio" name="Pref1" value="2" id="my_radio_button_id2"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup">
      <button id="label1" class="btn btn-success btn-lg" type="button" for="my_radio_button_id1">Rank 81-100 <br> (bottom performance)</button>
      <input type="radio" name="Pref1" value="1" id="my_radio_button_id1"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup">
      <button id="label6" class="btn btn-success btn-lg" type="button" for="my_radio_button_id6" >Not interested <br> &nbsp;&nbsp;&nbsp;&nbsp; </button>
      <input type="radio" name="Pref1" value="0" id="my_radio_button_id6" />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;
  </div>
</center>
<br>

<br>
<br>

{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please select an interval to proceed.</p>
</div>
{% endif %}

<button class="otree-btn-next btn btn-primary" style="float: right;">Next</button>

{{ endblock }}