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

{% block title %}
    Erste 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 %}
    <p>Es beginnt nun die erste Runde.</p>
    <p>
        Bitte geben Sie Ihre Einschätzung darüber ab, wie viele <span class="blue">blaue Token</span> die anderen Mitspieler 
        Ihrer Gruppe in der ersten Runde jeweils in den gemeinsamen Topf legen werden.
    </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 ersten 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 %}

{% endblock %}