{% set question = questions[0] %}

<link rel="stylesheet" href="../webcati/_plugins/dragtoscale/web/css/style.css">

<div class="DaDSurveyScale DaDSurveyScale--sliderContaine-background" id="DaDSurveyScale">
       <div class="DaDSurveyScale--inner">

           <div class="DaDSurveyScale--itemContainer">
               {% for answer in question.answers %}
                   <div class="draggableItemWrapper">
                       {% if answer.hasValue %}
                            <div class="draggableItem in-droppable" style="left:{{ answer.value }}%; bottom:0; top:auto;" >
                        {% else %}
                            <div class="draggableItem" >
                        {% endif %}
                            <input type="hidden" id='input_{{ answer.questionField }}' name="answers[{{ answer.questionField }}]" value="{{ answer.value }}"  />
                            <div class="draggableItem--content">
                             {{ answer.label | raw }}
                            </div>
                            <div class="draggableItem--line"><span></span></div>
                         </div>
                      </div>
                  {% endfor %}
           </div><!-- END DaDSurveyScale--itemContainer -->

           <div class="DaDSurveyScale--sliderContainer">
               <div class="DaDSurveyScale--slider">
                   <div class="DaDSurveyScale--slider-num">1</div>
                   <div class="DaDSurveyScale--slider-scale" id="DaDSlider"></div>
                   <div class="DaDSurveyScale--slider-num">100</div>
               </div>
           </div>

       </div><!-- END DaDSurveyScale--inner -->
   </div><!-- END DaDSurveyScale -->

    <style>
        /* Change 'thumb' width */
        .draggableItemWrapper {width:50px; height:60px;}
        .draggableItemWrapper .draggableItem--content {width:50px;}
        .ui-slider-handle {display: none;}
        .DaDSurveyScale--sliderContaine-background { background-color: {{ plugin.background_color}}; border: border: {{ plugin.border_color }}; }
    </style>

    <script src="../webcati/_plugins/dragtoscale/web/js/jquery.1.12.4.min.js"></script>
    <script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui.min.js"></script>
    <script src="../webcati/_plugins/dragtoscale/web/js/jquery-ui-touch.min.js"></script>



    <script>
    $(function() {

        //this plugin was designed on jquery 1.12.4 but warpit uses different version.
        //this workaround allow as to use two different versions of jQuery on same page
        //to use newer version you just need to replace $ with $j
        var $j = jQuery.noConflict(true);

         var DaDSliderCnt    = $j('#DaDSurveyScale--slider');
         var DaDSlider       = $j('#DaDSlider');
         var DaDContainer    = $j('#DaDSurveyScale .DaDSurveyScale--inner');
         var DaDItem         = $j('#DaDSurveyScale .draggableItem');

         //Slider init
         DaDSlider.slider();

         //Draggable init
         DaDItem.draggable({
             containment: DaDContainer,
             cursor: 'move',
             drag: function(event, ui){
                 if( $j(this).hasClass('in-droppable') ){
                     DaDgetPosition($j(this));
                 }
             }
         });

         //Droppable init
         DaDSlider.droppable({
             accept: '.draggableItem',
             tolerance: 'touch',
             over: function(event, ui){
                $j(ui.draggable).addClass('in-droppable');
             },
             out: function(event, ui){
                 $j(ui.draggable).removeClass('in-droppable');
                 $j(ui.draggable).css({bottom:'auto'});

                 ui.draggable.find('input[type=hidden]').val('');
             },
             drop: function(event, ui){

                 if( $j(ui.draggable).hasClass('in-droppable') ){

                     //Snap draggable item to base
                     $j(ui.draggable).css('top',parseInt(DaDContainer.height()) - parseInt($j(ui.draggable).height())+'px');

                     //Set draggable position in %
                     var draggable_x_percentage = $j(ui.draggable).position().left / DaDContainer.outerWidth() * 100;

                     $j(ui.draggable).css({left:draggable_x_percentage +'%', top:'auto', bottom:0});

                     $j(this).find('input[type=hidden]').val(draggable_x_percentage);
                     ui.draggable.find('input[type=hidden]').val(draggable_x_percentage);

                 }

             }
         });

         //Look for already "set" draggableItems
         DaDContainer.find('.draggableItem.in-droppable').each(function(index){
             DaDgetPosition($j(this));
         });

         function DaDgetPosition(el){

             //Convert PX to %
             var old_position_l = el.position().left;
             var new_position_l = Math.round( parseInt(old_position_l) / parseInt(DaDContainer.width()) * 100);

             //Set text value
             el.find('.draggableItem--line span').text(new_position_l);

             //Position slider
             DaDSlider.slider('value',new_position_l);

         }

    });
    </script>