{% set question = questions[0] %}

<style type="text/css">
.row {

}

.labelContainer{
    float: left;
    margin-right: 5px;
    width: 200px;
    font-family: {{ plugin.answers_font_family }};
    font-size: {{ plugin.answers_font_size }};
    color: {{ plugin.answers_font_color }};
}

.scaleContainer{
    float:left;
    margin-right: 5px;
}

.box{
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 4px 4px 5px #999999;
    float:left;
    margin:3px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    width: 30px;
    cursor: pointer;
}

.leftLabel{
    float: left;
    font-family: {{ plugin.labels_font_family }};
    font-size: {{ plugin.labels_font_size }};
    color: {{ plugin.labels_font_color }};
}

.rightLabel {
    float:right;
    font-family: {{ plugin.labels_font_family }};
    font-size: {{ plugin.labels_font_size }};
    color: {{ plugin.labels_font_color }};
}

.thermoScale {
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    var colors = {{ plugin.color | raw }};

    $('.row').each(function(index){
        var currentRow   = $(this);
        var currentValue = currentRow.children("input[type='hidden']").val();
        var boxes        = currentRow.children("div[class='scaleContainer']").children();

        if(currentValue.length <= 0){
            return;
        }

        for(var i = 0; i < boxes.length; i++){
            var box = $(boxes[i]);
            var boxValue = box.children("input[class='legendValue']").val();

            box.css('background-color', colors[i])
            box.css('border-color', '#674f3f');

            if(boxValue === currentValue){
                break;
            }
        }

    });

    $("div[id^='box_']").click(function(){
        var currentBox = $(this);
        var id = this.id.split('_').slice(1).join('_');

        var value = currentBox.first().children("input[class='legendValue']").val();
        $('#input_' + id).val(value);

        currentBox.siblings().css('background-color', 'white');
        currentBox.siblings().css('border-color', '#ccc');

        currentBox.prevAll().addBack(this).each(function(index){
            $(this).css('background-color', colors[index]);
            $(this).css('border-color', '#674f3f');
        })
    });
});
</script>

Vprašanje: {{ question.questionText }} <br />
Navodila: {{ question.instruction }} <br />
<br />
<br />
<br />
<br />

<div class="thermoScale">
    {% for answer in question.answers %}
        <div class="row">
            <input type="hidden" id='input_{{ answer.questionField }}' name="answers[{{ answer.questionField }}]" value="{{ answer.value }}"  />
            <div class="labelContainer">
                {{ answer.label  | raw}}
            </div>
            <div class="scaleContainer">
                {% for legend in answer.legend %}
                    <div id="box_{{ answer.questionField }}" class="box">
                        <input type="hidden" class='legendValue' value="{{ legend.value }}" />
                        {{ legend.label }}
                    </div>
                {% endfor %}

                {% if loop.last %}
                    <div>
                        <div class='leftLabel'>
                            {{ plugin.low_score_text }}
                        </div>

                        <div class='rightLabel'>
                            {{ plugin.high_score_text }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        <br /> <br />
    {% endfor %}

</div>

<br />
<br />
<br />
<br />
<br />