{% set question = questions[0] %}

<style type="text/css">

.pladenj
{
    border-radius: 10px;
    border: 1px solid #674f3f;
    height: 200px;
    text-align: center;
/*    position: absolute;*/
    box-shadow: 2px 2px 2px #666;
    width: 600px;
    display: none;
}
.odgovori{
    display: block;
}

.odgovor{
    margin: 10px;
    display: inline-table;
    vertical-align: top;
    padding: 5px;
    border: 1px solid #674f3f;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #666;
    cursor: pointer;
    width: {{ plugin.answer_box_width }};
    height: {{ plugin.answer_box_height }};
}

.navButton
{
    cursor: pointer;
}

.odgovorSelected{
    border-color: red;
    color:red;
}
</style>
<script type="text/javascript">
    function showNextAnswer(current, next, submitAtLast){

        if(next.length){
            current.hide();
            next.show("slide", { direction: "left" }, 1000);
        } else if(submitAtLast) {
            $('#submitCallStatus').trigger('click');
        }
    }
    $(document).ready(function(){
        //we show first answer
        $('.pladenj').first().show("slide", { direction: "left"}, 1000);

        $('.odgovor').click(function(){

            $(this).first().siblings().removeClass('odgovorSelected');
            $(this).addClass('odgovorSelected');

            var id = $(this)[0].id.split('_').slice(1).join('_');

            //First we get value from selected option
            var value = $(this).first().children("input[type^='hidden']").val();
            var input = $('#input_' + id).val(value);

            //We hide current answer and show next
            var current = $('#odg_' + id);
            var next = current.next("div[id^='odg_']");

            showNextAnswer(current, next, true);
        });

        $("span[id^='next']").click(function(){
            var id = $(this)[0].id.split('_').slice(1).join('_');

            var current = $('#odg_' + id);
            var next = current.next("div[id^='odg_']");

            showNextAnswer(current, next, false);

        });

        $("span[id^='prev']").click(function(){
            var id = $(this)[0].id.split('_').slice(1).join('_');

            var current = $('#odg_' + id);
            var next = current.prev("div[id^='odg_']");

            showNextAnswer(current, next, false);
        });
    });
</script>

{% for answer in question.answers %}
  <div id="odg_{{ answer.questionField }}" class="pladenj">
       <input type="hidden" id='input_{{ answer.questionField }}' name="answers[{{ answer.questionField }}]" value="{{ answer.value }}"  />
      <div>
         {{ answer.label  | raw}}
      </div>
      <div>
          {% for legend in answer.legend %}
          <div id="leg_{{ answer.questionField }}" class="odgovor {% if legend.value == answer.value %}odgovorSelected {% endif %}">
              <input type="hidden" value="{{ legend.value }}"  />
              {{ legend.label }}
          </div>
          {% endfor %}
      </div>
      <span>{{ loop.index }} / {{ question.answers | length }}</span> <br  />

      {% if loop.first == false %}
        <span id="prev_{{ answer.questionField }}" class="prev navButton">< </span>
      {% endif %}

      {% if loop.last == false %}
        <span id="next_{{ answer.questionField }}" class="next navButton"> ></span>
      {% endif %}
  </div>

{% endfor %}