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

{% block title %}
    You are Participant 1. Choose the quality of your product (values between 0 and 1)
{% endblock %}

{% block styles %}

<link href="{% static "my_quality_game/jquery-ui/jquery-ui.min.css" %}" rel="stylesheet">
<style type="text/css">
    .qonea-slider {margin: 0.5em auto; height: 400px; width: 30px;}
    .qoneb-slider {margin: 0.5em auto; height: 400px; width: 30px; }

    .oneqa {text-align: center;}
    .oneqb {text-align: center;}

    .bid   {text-align: center;}

    .qonea-slider .ui-slider-range { background: #beccd7; }
    .qoneb-slider .ui-slider-range { background: #beccd7; }
    .pone-slider  .ui-slider-range { background: #beccd7; }
    .qonea-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qoneb-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }

    #flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 400px;
        background: #E2E4F6;
        border: 1px white solid;
        margin: 0 auto;
    }


    input {
    width: 65px;  text-align: center;
    }
</style>


{% endblock %}



{% block content %}

    <!-- <div class="line"><b>Please, design Package 1: </b></div> -->

<div id="flex-container">



    <div class="form-group required">
        <div class="controls">
        <div class="qonea-slider"></div>
        <div class="bid"><input type="text" step="0.01" name="q_leader" id="id_q_leader" value="0" style="color:#28587B"></div>
        <label class="control-label" for="id_q_leader"></label>
        <div class="bid"><p style="color:#28587B"><strong>Choose your quality</strong></p></div>
            <div class="bid"><p style="color:#28587B"><strong>(0 to {{ Constants.max_quality }})</strong></p></div>
        </div>
    </div>


    <div class="form-group required">
        <div class="controls">
        <div class="qoneb-slider"></div>
        <div class="bid"><input type="text" step="0.01" name="q_leader_guess_follower" id="id_q_leader_guess_follower" value="0" style="color:#28587B"></div>
        <label class="control-label" for="id_q_leader_guess_follower"></label>
        <div class="bid"><p style="color:#28587B"><strong>Guess the quality of your competitor </strong></p></div>
            <div class="bid"><p style="color:#28587B"><strong>(0 to {{ Constants.max_quality }})</strong></p></div>
        </div>
    </div>




</div>

<!--
<div class="line"></div>
-->

<p>
    {% next_button %}
</p>
{% endblock %}



{% block scripts %}


<script src="{% static "my_quality_game/jquery-ui/jquery-ui.min.js" %}"></script>
<script>

    jQuery(document).ready(function ($) {
        var QA = $("#id_q_leader");
        var QB = $("#id_q_leader_guess_follower");


        $('.qonea-slider').slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: {{ Constants.max_quality|json }},
            step : 0.01,
            slide: function (event, ui) {
                QA.val(ui.value);
                updateQA();
            },
        });


        $('.qoneb-slider').slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: {{ Constants.max_quality|json }},
            slide: function (event, ui) {
                QB.val(ui.value);
                updateQB();
            },
        });




        function updateQA() {
            $('.oneqa').text(QA.val());
        }

        function updateQB() {
            $('.oneqb').text(QB.val());
        }



        $("#id_q_leader").keyup( function(){
            $( '.qonea-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      });

        $("#id_q_leader_guess_follower").keyup( function(){
            $( '.qoneb-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      });


        updateQA();
        updateQB();

    });

</script>

{% endblock %}