{% extends "svotree/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
PART 1 - Decision {{ player.round_number }}
{% endblock %}

{% block content %}

{#<div class="card bg-light m-3" style="text-align: justify">#}
{#    <div class="card-body">#}
{#        {% include Constants.instructions_slider with type="discrete" %}#}
{#    </div>#}
{#</div>#}

<div class="alert alert-danger" id="confirmation_error" hidden="True">You have not yet confirmed all of your choices.
    Please check your chosen allocations and confirm them.</div>


<div class="container-fluid">
    <div class="panel-body" style="margin-top: 2em; margin-bottom: 2em; border: 1px solid #ddd">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading"><strong>{{ player.round_number }}</strong></div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-2" align="center">You receive</div>
                            <div class="col-sm-1" align="center">
                                <span class="slider-value" id="item1_self" name="you_receive">?</span>
                            </div>
                            <div class="col-sm-7">
                                <div class="slider-reference">
                                    <div class="value-start" id="item1_self_start">VALUE N/A</div>
                                    <div class="value-end" id="item1_self_end">VALUE N/A</div>
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-2" align="center"></div>
                            <div class="col-sm-1" align="center"></div>
                            <div class="col-sm-7 slider-horizontal-col" onclick="showSelSliders('item1')">
                                <input name="slider_value" value="None" id="item1" type="range" data-slider-min="1"
                                    data-slider-max="9" data-slider-step="1"
                                    data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9]" />
                            </div>
                            <div class="col-sm-2"><button type="button" class="btn btn-primary btn-large" disabled=true
                                    id="item1_confirm" value="False">Confirm</button></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-2" align="center">Other receives</div>
                            <div class="col-sm-1" align="center" onclick="showSelSliders('item1')">
                                <span class="slider-value" id="item1_other" name="other_receives">?</span>
                            </div>
                            <div class="col-sm-7">
                                <div class="slider-reference">
                                    <div class="value-start" id="item1_other_start">VALUE N/A</div>
                                    <div class="value-end" id="item1_other_end">VALUE N/A</div>
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
    </div>
</div>


<button id="nexButton" class="btn btn-primary" disabled=true >Next</button>

    <br>
    <h3>
        Reminder from instructions
    </h3>
    <div class="card bg-light m-3"  style="text-align: justify">
        <div class="card-body">
            {% include Constants.instructions_slider with type="discrete" %}
        </div>
    </div>


{% endblock %}

{{ form.slider_value.errors }}

{% block scripts %}

<script src='{% static "svotree/js/slider.js" %}'></script>
<script src='{% static "svotree/js/slider_primary.js" %}'></script>
<script src='{% static "svotree/js/slider_primary_discrete.js" %}'></script>

<script>
    // var showingSelectedSlider = false;
    var resizedSelectedSlider = false;

    function showSelSliders(id) {

        if (!resizedSelectedSlider) {
            // Get all the slider handle css classes....
            var elements = document.querySelectorAll('.slider-handle');
            for (var i = 0; i < elements.length; i++) {
                // ... and set the height and width for them
                elements[i].style.width = "20px";
                elements[i].style.height = "20px";
            }

            // Enable the Confirm button
            nextButton = document.getElementById("item1_confirm")
            nextButton.disabled = false;

            // Only need to resize the selection cursor once
            resizedSelectedSlider = true;

            // And change the question marks to values
            update_centre_position();
        }
    }
</script>
{% endblock %}

{{ form.checkslider.errors }}