{#
!!!! BECAREFUL: ONLY FOR TESTING !!!!!
!!!! DON'T START TO TRANSLATE ALL VIEWS BASED ON THIS MODEL !!!!!

!!!! IT WILL PROBABLY FIRST NEED TO CHANGE  THE TWIG TEMPLATE SYNTAX TO AVOID CONFLICT WITH EXPRESSION MANAGER !!!!

/**
 * Ranking question, item list header Html
 *
 * @var $sOptions         : the select options, generated with the view answer_row.php
 *
 * @var $name
 * @var $myfname
 * @var $labeltext
 * @var $rankId
 * @var $rankingName
 * @var $max_answers
 * @var $min_answers
 * @var $qid
 * @var $choice_title
 * @var $rank_title
 * @var $rank_help
 * @var $showpopups
 * @var $samechoiceheight
 * @var $samelistheight
 **** Additional attributes:
 * @var question_template_attribute.show_handle
 * @var question_template_attribute.only_pull
 * @var question_template_attribute.visualize
 */
#}

<!-- answer -->
<div class="{{coreClass}}">
    <ul class="list-unstyled ls-js-hidden-sr answers-list select-list " role="group" aria-labelledby="ls-question-text-{{basename}} ls-question-validation-{{basename}}">
            {# rows/answer_row.twig #}
            {{sSelects}}
    </ul>
    <div class="ls-no-js-hidden answers-list{{ samechoiceheight ? " list-samechoiceheight": "" }} {{ samelistheight ? " list-samelistheight": "" }} row" aria-hidden="true">
        <div class="col-md-6 col-6 ranking-available-items">
            <strong class="sortable-subtitle sortable-rank-subtitle">{{choice_title}}</strong>
            <!-- @todo : move htmlblock at the good place -->
            <ul id="sortable-choice-{{qId}}" class="sortable-choice sortable-list list-group">
                {% for ansrow in  answers %}
                    <li id="javatbd{{rankingName}}{{ansrow.code}}" class="ls-choice list-group-item answer-item sortable-item grabable sortable-enable" data-value="{{ansrow.code}}">
                        {{ processString(ansrow.answer) }}
                        <span class="grabable selector__dragHandle d-none float-end">
                            <svg class="" width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.4646 0.125H3.24762V2.625H0.4646V0.125ZM6.03064 0.125H8.81366V2.625H6.03064V0.125ZM0.4646 5.75H3.24762V8.25H0.4646V5.75ZM6.03064 5.75H8.81366V8.25H6.03064V5.75ZM0.4646 11.375H3.24762V13.875H0.4646V11.375ZM6.03064 11.375H8.81366V13.875H6.03064V11.375Z" fill="currentColor"/>
                            </svg>
                        </span>
                    </li>
                {% endfor %}
                <li class="d-none ls-remove"></li>
            </ul>
        </div>
        <div class="col-md-6 col-6 ranking-sorted-items">
            <strong class="sortable-subtitle sortable-rank-subtitle">{{rank_title}}</strong>
            <ul id="sortable-rank-{{qId}}" class="sortable-rank sortable-list list-group">
                <li class="d-none ls-remove"></li>
            </ul>
        </div>
    </div>
</div>

{% set script %}
try{
 var ranking{{qId}} = new RankingQuestion({
        max_answers      : "{{ processString("{" ~ max_answers ~ "}", 1) }}",
        min_answers      : "{{ processString("{" ~ min_answers ~ "}", 1) }}",
        showpopups       : "{{showpopups}}",
        samechoiceheight : "{{samechoiceheight}}",
        samelistheight   : "{{samelistheight}}",
        rankingName      : "{{rankingName}}",
        questionId       : "{{qId}}"
    });
 ranking{{qId}}.init()
} catch(e){}
{% endset %}
{{ registerPackage('sortablejs') }}
{{ registerPackage('question-ranking') }}
{{ registerScript(
    'RankingQuestionTranslate'~qId, 
    'LSvar.lang.rankhelp="' ~ gT("Double-click or drag-and-drop items in the left list to move them to the right - your highest ranking item should be on the top right, moving through to your lowest ranking item.") ~ '";', 'POS_BEGIN') 
}}
{{ registerScript( 'RankingQuestion'~qId, script, 'POS_POSTSCRIPT') }}


<!-- end of answer -->
