{%- comment -%}
Description:
Snippet for displaying select options

Variables:
- label: Displayed label
- label_class: The label class
- default_value: Default value
- default_text: Default value
- selected_text_class: The selected text class
- list_option_class: The list option class
- values: values array
- option_values: Array, the option values
- id: Select element id
- global_select_class: Additional class for .global-select-div
- class: Select element classes
- field_name: Select field name
- selected_inline: Is the selected value displayed inline with label?
- onchange: String. js onchange event function
- vue_onchange: String. onchange event vue method
- vue_model: String. vue v-model
- vue_class: String. vue :class binding
{%- endcomment -%}
<div {%if vue_class != blank %}:class="{{vue_class}}"{% endif %} class="global-select-div {{ global_select_class }} {% if selected_inline != blank %}selected-inline{% endif %}">
    <div class="inner relative">
        <div class="label {{ label_class }}">{{ label }}</div>
        <div class="text {{ selected_text_class }}">
            {{ default_text }}
        </div>
        <div class="icon">{{ settings.icon_select }}</div>
    </div>
    <ul class="options">
        {%- for option in values -%}
            {%- assign option_value = option -%}
            {%- if option_values != blank -%}
                {%- assign option_value = option_values[forloop.index0] -%}
            {%- endif -%}

            {% capture test_value %}{{ default_value | json }}{% endcapture %}
            {%- unless test_value contains '"' -%}
              {%- if test_value != "null" -%}
                {%- assign option_value = option_value | times: 1 -%}
              {%- endif -%}
            {%- endunless -%}

            <li class="option {{ list_option_class }} {% if option_value == default_value %}active{% endif %}" data-value="{{ option_value | escape }}">{{ option }}</li>
        {%- endfor -%}
    </ul>
    <select
        name="{{ field_name }}"
        id="{{ id }}"
        class="{{ class }}"
        {% if onchange != blank %}
            onchange="{{ onchange }}"
        {% endif %}
        {% if vue_onchange != blank %}
            @change="{{ vue_onchange }}"
        {% endif %}
        {% if vue_model != blank %}
            v-model="{{ vue_model }}"
        {% endif %}
    >
        <option value="">-- Please select --</option>
        {%- for option in values -%}
            {%- assign option_value = option -%}
            {%- if option_values != blank -%}
                {%- assign option_value = option_values[forloop.index0] -%}
            {%- endif -%}
            <option
                value="{{ option_value | escape }}"
                {% if option_value == default_value %}
                    selected="selected"
                {% endif %}
            >{{ option }}</option>
        {%- endfor -%}
    </select>
</div>