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

{% block title %}任务 3{% endblock %}

{% block content %}
<br>

<h5>尝试移动滑条上的圆圈......选择好之后请点击右侧的”确认“，此时圆圈会变为灰色</h5>

<br>
    <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">
    {% for item_number in slider_items %}
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                     <div class="panel-heading"><strong>{{ item_number }}.</strong></div>
                    <br>
                     <div class="panel-body">


                        <div class="row">
                            <div class="col-sm-2" align="center">您的收入</div>
                            <div class="col-sm-1" align="center"><span class="slider-value" id="item{{ item_number }}_self">VALUE N/A</span></div>
                            <div class="col-sm-7"><div class="slider-reference"><div class="value-start" id="item{{ item_number }}_self_start">VALUE N/A</div><div class="value-end" id="item{{ item_number }}_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">
                                <input name="slider{{ item_number }}" id="item{{ item_number }}" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" data-slider-value="50" />
                            </div>
                            <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-large" id="item{{ item_number }}_confirm" value="False">确认</button></div>
                        </div>



                        <div class="row">
                            <div class="col-sm-2" align="center">另一玩家的收入</div>
                            <div class="col-sm-1" align="center"><span class="slider-value" id="item{{ item_number }}_other">VALUE N/A</span></div>
                            <div class="col-sm-7"><div class="slider-reference"><div class="value-start" id="item{{ item_number }}_other_start">VALUE N/A</div><div class="value-end" id="item{{ item_number }}_other_end">VALUE N/A</div></div></div>
                            <div class="col-sm-2"></div>
                        </div>


                     </div>
                </div>
            </div>
        </div>
        <hr>
        <br>
    {% endfor %}
    </div>

<br>
<!--<div style="display:inline; text-align:center">-->
<!--<p><input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="下一页"></p>-->
<!--</div>-->

    <button type="button" class="btn btn-primary btn-large" id="continue_button">下一页</button>
    <button id="hidden_submit_button" type="submit" hidden="True"></button>


{% endblock %}

{% 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_continuous.js" %}"></script>

{% endblock %}