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

{% block title %}
Part 3-Question 4
{% endblock %}

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    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>
    .center {
      margin: 0% 10% 0% 10%;
      width: 100%;
    }
    .checkboxgroup {
    display: inline-block;
    text-align: center;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 17px;
        width: 17px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 16px
    }
</style>

<p>
    Aside from the interval you selected in the last question, what is the performance interval you would <b>most like to see</b> next?
</p>
<p>
    Again, if you are not interested, please select the "Not interested" button.
</p>

<script>
        let prep1 = js_vars.Pref1;
        if (prep1 == 1) {
            $(document).ready(function(){
            document.getElementById('radio1').style.display = 'none';
        });
        }
        else if (prep1 == 2) {
            $(document).ready(function(){
            document.getElementById('radio2').style.display = 'none';
        });
        }
        else if (prep1 == 3) {
            $(document).ready(function(){
            document.getElementById('radio3').style.display = 'none';
        });
        }
        else if (prep1 == 4) {
            $(document).ready(function(){
            document.getElementById('radio4').style.display = 'none';
        });
        }
        else if (prep1 == 5) {
            $(document).ready(function(){
            document.getElementById('radio5').style.display = 'none';
        });
        }
        else if (prep1 == 0) {
            $(document).ready(function(){
            document.getElementById('radio6').style.display = 'none';
        });
        }
        </script>
<script>
        let prep2 = js_vars.Pref2;
        if (prep2 == 1) {
            $(document).ready(function(){
            document.getElementById('radio1').style.display = 'none';
        });
        }
        else if (prep2 == 2) {
            $(document).ready(function(){
            document.getElementById('radio2').style.display = 'none';
        });
        }
        else if (prep2 == 3) {
            $(document).ready(function(){
            document.getElementById('radio3').style.display = 'none';
        });
        }
        else if (prep2 == 4) {
            $(document).ready(function(){
            document.getElementById('radio4').style.display = 'none';
        });
        }
        else if (prep2 == 5) {
            $(document).ready(function(){
            document.getElementById('radio5').style.display = 'none';
        });
        }
        else if (prep2 == 0) {
            $(document).ready(function(){
            document.getElementById('radio6').style.display = 'none';
        });
        }
        </script>
<script>
        let prep3 = js_vars.Pref3;
        if (prep3 == 1) {
            $(document).ready(function(){
            document.getElementById('radio1').style.display = 'none';
        });
        }
        else if (prep3 == 2) {
            $(document).ready(function(){
            document.getElementById('radio2').style.display = 'none';
        });
        }
        else if (prep3 == 3) {
            $(document).ready(function(){
            document.getElementById('radio3').style.display = 'none';
        });
        }
        else if (prep3 == 4) {
            $(document).ready(function(){
            document.getElementById('radio4').style.display = 'none';
        });
        }
        else if (prep3 == 5) {
            $(document).ready(function(){
            document.getElementById('radio5').style.display = 'none';
        });
        }
        else if (prep3 == 0) {
            $(document).ready(function(){
            document.getElementById('radio6').style.display = 'none';
        });
        }
        </script>


<br>
<div class="center">

  <div class="checkboxgroup" id="radio5">
    <button id="label1" class="btn btn-success btn-lg" for="my_radio_button_id1" >Top 10</button>
    <input type="radio" name="Pref4" value="5" id="my_radio_button_id1"  />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup" id="radio4">
    <button id="label2" class="btn btn-success btn-lg" for="my_radio_button_id2" >Rank 11-20</button>
    <input type="radio" name="Pref4" value="4" id="my_radio_button_id2"  />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup" id="radio3">
    <button id="label3" class="btn btn-success btn-lg" for="my_radio_button_id3" >Rank 21-30</button>
    <input type="radio" name="Pref4" value="3" id="my_radio_button_id3"  />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup" id="radio2">
    <button id="label4" class="btn btn-success btn-lg" for="my_radio_button_id4"  >Rank 31-40</button>
    <input type="radio" name="Pref4" value="2" id="my_radio_button_id4"  />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup" id="radio1">
    <button id="label5" class="btn btn-success btn-lg" for="my_radio_button_id5"  >Bottom 10</button>
    <input type="radio" name="Pref4" value="1" id="my_radio_button_id5"  />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

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

<br>
<br>
<br>
{% next_button %}
{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please select a radio button to proceed.</p>
</div>
{% endif %}
{{ endblock }}