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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'mpl/css/custom.css' %}" rel="stylesheet">
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}

{% block title %}

{% endblock %}

{% block content %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $("#slider-range_5year").slider({
            range: true,
            min: 0.0,
            max: 100.0,
            values: [0, 100],
            slide: function (event, ui) {
                $("#amount_5year").val(ui.values[0] + "% - " + ui.values[1]+ "%");
                $("#id_left").val(ui.values[0]);
                $("#id_right").val(ui.values[1]);
                document.getElementById('five_year_risk_low').value = ui.values[0]
                document.getElementById('five_year_risk_high').value = ui.values[1]

            }
        });
        $("#amount_5year").val($("#slider-range_5year").slider("values", 0) +
            "% - " + $("#slider-range_5year").slider("values", 1)+ "%" );
        $("#slider-range_life").slider({
            range: true,
            min: 0,
            max: 100,
            values: [0, 100],
            slide: function (event, ui) {
                $("#amount_life").val(ui.values[0] + "% - " + ui.values[1]+ "%");
                $("#id_left").val(ui.values[0]);
                $("#id_right").val(ui.values[1]);
                document.getElementById('life_time_risk_low').value = ui.values[0]
                document.getElementById('life_time_risk_high').value = ui.values[1]
            }
        });
        $("#amount_life").val($("#slider-range_life").slider("values", 0) +
            "% - " + $("#slider-range_life").slider("values", 1)+ "%" );
    });
</script>

<style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

<p>
<b>
    In this section, we will ask you some questions regarding your beliefs of having breast cancer in the next 5-years
    and in the next 50 years. We ask that you provide your best guesses. Please answer questions below on a 0 − 100
    scale where 0 means no chance at all and 100 means for certain. For example, an answer of 10 means that
    there is a 1 in 10 chance that you will be diagnosed wih breast cancer from now to 5/50 years from now. Please also
    note that the minimum step the slider moves is 5.
</b>
</p>

<p>
1. What is your best guess of the percent chance that you will be diagnosed with breast cancer from now to 5 years from now?

     <div id="slider2_here"></div>
{{ formfield_errors 'five_year_risk' }}
</p>
<br>

<p>
2. What is your best guess of the percent chance that someone similar to you in terms of demographic background and health
    history will be diagnosed with breast cancer from now to 5 years from now?
     <div id="slider4_here"></div>
{{ formfield_errors 'five_year_risk_s' }}
</p>
<br>

<p>
3. What is the best guess of the percent chance that you will be diagnosed with breast cancer from now to 50 years from now?
    Please note that statistically speaking, your answer to this question should be greater than or equal to your answer
    from question 1.
    <div id="slider1_here"></div>
{{ formfield_errors 'life_time_risk' }}

</p>
<br>

<p>
4. What is the best guess of the percent chance that someone similar to you in terms of demographic background and health
    history will be diagnosed with breast cancer from now to 50 years from now? Please note that statistically speaking,
    your answer to this question should be greater than or equal to your answer from question 2

    <div id="slider3_here"></div>
{{ formfield_errors 'life_time_risk_s' }}

</p>



<script src="{{ static 'mgslider.js' }}"></script>
<script>
        $(document).ready(function (event) {
            slider1 = new mgslider("life_time_risk", 0, 100, 5);
            slider1.print(document.getElementById("slider1_here"));

            slider2 = new mgslider("five_year_risk", 0, 100, 5);
            slider2.print(document.getElementById("slider2_here"));

            slider3 = new mgslider("life_time_risk_s", 0, 100, 5);
            slider3.print(document.getElementById("slider3_here"));

            slider4 = new mgslider("five_year_risk_s", 0, 100, 5);
            slider4.print(document.getElementById("slider4_here"));

        });
</script>

{% next_button %}

{% endblock %}