{{-- select2 from buttons --}}
<div @include('admin.panel.inc.field_wrapper_attributes') >
	<label class="form-label fw-bolder">{!! $field['label'] !!}</label>
	@include('admin.panel.fields.inc.translatable_icon')
	<select
			name="{{ $field['name'] }}@if (isset($field['allows_multiple']) && $field['allows_multiple']==true)[]@endif"
			style="width: 100%"
			@include('admin.panel.inc.field_attributes', ['default_class' =>  'form-select select2_from_buttons'])
			@if (isset($field['allows_multiple']) && $field['allows_multiple']==true)multiple @endif
	>
		
		@if (isset($field['allows_null']) && $field['allows_null']==true)
			<option value="">-</option>
		@endif
		@if (isset($field['options']) && !empty($field['options']))
			@foreach ($field['options'] as $key => $value)
				<option value="{{ $key }}"
						@if (isset($field['value']) && ($key==$field['value'] || (is_array($field['value']) && in_array($key, $field['value'])))
							|| ( ! is_null( old($field['name']) ) && old($field['name']) == $key))
						selected
						@endif
				>{!! $value !!}</option>
			@endforeach
		@endif
	</select>
	
	{{-- HINT --}}
	@if (isset($field['hint']))
		<div class="form-text">{!! $field['hint'] !!}</div>
	@endif
</div>

@if ($xPanel->checkIfFieldIsFirstOfItsType($field, $fields))
	
	{{-- FIELD CSS - will be loaded in the after_styles section --}}
	@push('crud_fields_styles')
	{{-- include select2 css--}}
	<link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
	@endpush
	
	{{-- FIELD JS - will be loaded in the after_scripts section --}}
	@push('crud_fields_scripts')
	{{-- include select2 js--}}
	<script src="{{ asset('assets/plugins/select2/js/select2.js') }}"></script>
	<script>
		var buttons = jQuery.parseJSON('{!! $field['buttons'] !!}');
		
		jQuery(document).ready(function($) {
			$('.select2_from_buttons').each(function (i, obj) {
				if (!$(obj).hasClass("select2-hidden-accessible"))
				{
					$(obj).select2({
						theme: "bootstrap",
						templateResult: formatButton,
						templateSelection: formatButton
					});
				}
			});
		});
		
		function formatButton (button) {
			if (!button.id) {
				return button.text;
			}

			let textColor = 'rgb(255 255 255)';
			let bgColor = 'rgb(52 58 64)';

			if (typeof buttons[button.id] !== 'undefined' && typeof buttons[button.id].color !== 'undefined' && buttons[button.id].color != null) {
				textColor = buttons[button.id].color;
			}
			
			if (typeof buttons[button.id] !== 'undefined' && typeof buttons[button.id].background !== 'undefined' && buttons[button.id].background != null) {
				bgColor = buttons[button.id].background;
			}

			let buttonIcon = '<div class="d-inline-block px-2 rounded" style="height: 20px; flex-basis: auto; color: ' + textColor + '; background-color: ' + bgColor + ';"> Preview </div>';
			let buttonText = '&nbsp;' + button.text + '';
			var formattedButton = $(
				'<div style="display: flex; align-items: center;">' + buttonIcon + buttonText + '</div>'
			);
		
			return formattedButton;
		}
	</script>
	@endpush

@endif