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

{% block title %}
Part 3 - Hypothetical Question
{% 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>
    .center {
      margin: 0% 10% 0% 10%;
      width: 100%;
    }
    .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>
    Suppose you are given a chance to learn about the performance of others in <b>one more interval</b>. Which interval would you choose?
</p>
<p>
   If you are not interested in receiving information about any of these intervals, please select "Not interested".
</p>

<script>
        let prep1 = js_vars.Pref1;
        if (prep1 == 1) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id1").disabled = true;
            document.getElementById("label1").disabled = true;
            document.getElementById("label1").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 2) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id2").disabled = true;
            document.getElementById("label2").disabled = true;
            document.getElementById("label2").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 3) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id3").disabled = true;
            document.getElementById("label3").disabled = true;
            document.getElementById("label3").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 4) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id4").disabled = true;
            document.getElementById("label4").disabled = true;
            document.getElementById("label4").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 5) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id5").disabled = true;
            document.getElementById("label5").disabled = true;
            document.getElementById("label5").className = "btn btn-secondary btn-lg";
        });
        }
        else if (prep1 == 0) {
            $(document).ready(function(){
            document.getElementById("my_radio_button_id6").disabled = true;
            document.getElementById("label6").disabled = true;
            document.getElementById("label6").className = "btn btn-secondary btn-lg";
        });
        }
</script>
<br>
<center>
  <div>
    <div class="checkboxgroup" id="radio5">
      <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="Pref2" value="5" id="my_radio_button_id5" />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio4">
      <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="Pref2" value="4" id="my_radio_button_id4"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio3">
      <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="Pref2" value="3" id="my_radio_button_id3"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio2">
      <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="Pref2" value="2" id="my_radio_button_id2"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio1">
      <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="Pref2" value="1" id="my_radio_button_id1"  />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;

    <div class="checkboxgroup" id="radio0">
      <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="Pref2" value="0" id="my_radio_button_id6" />
    </div>    &nbsp;&nbsp;&nbsp;&nbsp;
  </div>
</center>

<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 }}