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

{% block title %}
    Vierte Einschätzung   
{% endblock %}


{% block styles %}
    <link rel="stylesheet" href="{% static "pgg/bootstrap-slider.min.css" %}"/>
    <link rel="stylesheet" href="{% static "pgg/pgg.css" %}"/>
{% endblock styles %}

{% block scripts %}
    <script src="{% static "pgg/bootstrap-slider.min.js" %}"></script>
    <script src="{% static "pgg/sliders.js" %}"></script>
    <script type="text/javascript">
        $('.slider-input.belief-input').on('change', function (event) {
            $('#output_'+event.target.id).text(event.value.newValue);
            if (!touched.includes(event.target.name)) {
                touched.push(event.target.name);
            }
            if (check_all_sliders_touched({{ num_other_players }})) {
                $('.otree-btn-next').show();
            }
        });
    
    </script>
{% endblock scripts %}

{% block content %}
    <div class="card">
        <div class="card-body">
            <p>
                Bitte geben Sie Ihre Einschätzung darüber ab, wie viele <span class="blue">blaue Token</span> die anderen Mitspieler 
                Ihrer Gruppe in einer möglichen nächsten Runde jeweils in den gemeinsamen Topf legen würden.
            </p>
            <p>
                <em>Hinweis: Sie sind <b>Spieler {{ player.id_in_group }}</b>.<br/>
                    Klicken Sie auf die grauen Linien um die Slider zu aktivieren.</em>
            </p>
            
            {{ belief_formset.management_form }}
        
            {% for about_player, form in belief_values_and_forms %}
                <p>
                    <label>Was glauben Sie, wie viele Token wird <b>Spieler {{ about_player }}</b> in der nächsten Runde in den gemeinsamen Topf legen?</label><br />
                    <input class="slider-input belief-input" id="{{ form.value.id_for_label }}" name="{{ form.value.html_name }}" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0.0"/><span class="slider-label-right" id="output_{{ form.value.id_for_label }}"></span> <span class="blue">blaue Token</span>
                        <input type="hidden" id="{{ form.id.id_for_label }}" name="{{ form.id.html_name }}" value="{{ form.id.value }}">
                </p>
            {% endfor %}
    
            {% next_button %}
        </div>
    </div>

{% endblock %}