{#
!!!! 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
 */
#}

<!-- Redbug 9627 ajout de javascript pour simuler le double click via les touches shift + r et la prise de focus tabindex -->
<script>
function setFocus(inputId, targetId) {
        const inputElement = document.getElementById(inputId);
        const targetElement = document.getElementById(targetId);

        inputElement.addEventListener('focus', () => {
            targetElement.focus();
        });
}
</script>

<!-- answer -->
<div class="{{coreClass}}">
    <ul class="list-unstyled ls-js-hidden-sr answers-list select-list " role="group" aria-labelledby="ls-question-text-{{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>
			<ul id="sortable-choice-{{qId}}" class="sortable-choice sortable-list list-group">
                {% for ansrow in  answers %}
                    <li id="javatbd{{rankingName}}{{ansrow.code}}" tabindex="0" 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>
                    <script>
                        document.getElementById("javatbd{{rankingName}}{{ansrow.code}}").addEventListener('keydown', function(event) {
                                // Vérifier si les touches shift et r sont pressées
                                if (event.shiftKey && event.key === "R") {
                                        let focusedElement = document.activeElement;

                                        if (focusedElement) {
                                                let dblclickEvent = new MouseEvent("dblclick", {
                                                bubbles: true,
                                                cancelable: true,
                                                view: window
                                                });
                                                focusedElement.dispatchEvent(dblclickEvent);
                                        }
                                }
                        });
                    </script>
                {% 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 -->


            <!-- @todo : move htmlblock at the good place -->