{% assign id = include.id | default: include.key %}
{% assign value = include.value %}

{% if id %}

<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
	{% if include.values %}
		{% assign values = include.values | split: ',' %}

		{% for value in values %}
			<option value="{{ value }}">{{ value }}</option>
		{% endfor %}
	{% else %}
		{% assign key = include.key | default: 'people' %}
		{% assign data = site.data.selects[key] %}
		{% assign options = data.options %}

		{% if data.data == 'people' %}
			{% for person in site.data.people limit: 20 %}
				<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-custom-properties="{% capture indicator %}{% include ui/avatar.html size='xs' person=person %}{% endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
			{% endfor %}

		{% elsif data.data == 'optgroup' %}
			{% for group in options %}
	 			<optgroup label="{{ group.title }}">
					{% for option in group.options %}
					<option value="{{ option }}">{{ option }}</option>
					{% endfor %}
				</optgroup>
			{% endfor %}

		{% else %}
			{% for option in options %}
				{% if option.first %}
					{% if include.indicator == 'flag' %}
						{% capture indicator-html %}
							{% assign country = option[1].flag %}
							{% include ui/flag.html size="xs" flag=country %}
						{% endcapture %}
					{% elsif include.indicator == 'label' %}
						{% capture indicator-html %}
							{% assign label = option[1].label %}
							<span class="badge bg-primary-lt">{{ label }}</span>
						{% endcapture %}
					{% endif %}

					<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}>{{ option[1].name }}</option>
				{% else %}
					<option value="{{ option }}">{{ option }}</option>
				{% endif %}
			{% endfor %}
		{% endif %}
	{% endif %}
</select>


{% capture script %}
<script>
	// @formatter:off
	document.addEventListener("DOMContentLoaded", function () {
		{% if jekyll.environment == 'development' %}
		window.tabler_select = window.tabler_select || {};
		{% endif %}

		var el;
		window.TomSelect && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
			copyClassesToDropdown: false,
			dropdownClass: 'dropdown-menu ts-dropdown',
			optionClass:'dropdown-item',

			{% unless include.show-search %}
			controlInput: '<input>',
			{% endunless %}

			render:{
				item: function(data,escape) {
					if( data.customProperties ){
						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
					}
					return '<div>' + escape(data.text) + '</div>';
				},
				option: function(data,escape){
					if( data.customProperties ){
						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
					}
					return '<div>' + escape(data.text) + '</div>';
				},
			},
		}));

	});
	// @formatter:on
</script>
{% endcapture %}


{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}

{% endif %}