{#
/**
 * List DropDown select Html
 *
 * @var $sOptions         : the select options, generated with the view item_options.php
 * @var $sOther           : the other input field, generated with the view item_noanswer.php
 *
 * @var $name
 * @var $dropdownSize
 * @var $checkconditionFunction
 * @var $select_show_hide
 *
 */
#}


{% set data_live_search = (question_template_attribute.show_search == 'default' or question_template_attribute.show_search is empty or question_template_attribute.show_search == 'false') ? '' : "data-live-search='true'" %}
{% set show_tick = (question_template_attribute.show_tick == 'default' or question_template_attribute.show_tick is empty or question_template_attribute.show_tick == 'false') ? '' : "show-tick" %}
{% set width_entry = (question_template_attribute.width_entry == 'default' or question_template_attribute.width_entry is empty or question_template_attribute.width_entry == 'false') ? "data-width='auto'" : '' %}

<!-- List Dropdown -->

<!-- answer-->
<div class="mb-3 row align-items-center">
    <div class="{{ coreClass }} col-auto">
        <select
                class="form-control list-question-select {{ show_tick }}"
                {{ data_live_search }}
                {{ width_entry }}
                data-none-selected-text=''
                name="{{ name }}"
                id="answer{{ name }}"
                data-style="btn-outline-secondary"
                {% if dropdownSize %} data-size={{ dropdownSize }} {% endif %}
                aria-labelledby="ls-question-text-{{ basename }}"
        >
                {# rows/option.php #}
                {{ sOptions }}
        </select>

        {# Value for expression manager javascript (use id) ; no need to submit #}
        {{ C.Html.hiddenField("java"~name,value,({
            'id' : "java"~name,
            'disabled' : "disabled",
        }))
        }}
    </div>
    {# rows/othertext.php #}
    {{ sOther }}
    <script type="text/javascript">
        $(function () {
            var selectPicker = $('#answer{{ name }}').selectpicker();

            {#
                Custom js to make width setting work with this beta version.
                The bootstrap-select's auto-width feature relies on a handler set for 'loaded.bs.select' by setWidth(),
                which is called after the event is triggered, so the auto-width's handler is never executed.
                This is a workaround to make the auto-width work.
            #}
            {% if width_entry != '' %}
            selectPicker.on('loaded.bs.select.firstload', function () {
                selectPicker.off('loaded.bs.select.firstload');
                // Trigger the event again with a slight delay to allow setWidth to run
                setTimeout(function () {
                    selectPicker.trigger('loaded.bs.select');
                }, 200);
            });
            {% endif %}
        });

    </script>
</div>
<!-- end of answer  -->
