{% macro slide_item(form) %}
	{% set index = form.vars.name %}
	{% set value = form.vars.value ?? null %}
	{% set hasMedia = (value and value.image and value.image.name) or (value and value.imageUrl) ? 1 : 0 %}

	<div class="col-3 sortable-item pb-15" id="slide-item-{{ index }}" data-id="{{ value.id ?? index }}" data-has-media="{{ hasMedia }}">
		<div class="drag-handle text-center mb-2" style="cursor: grab;">
			<i class="fa fa-bars"></i>
		</div>

		<div id="slide-item-div-{{ index }}" class="text-center" data-id="{{ index }}" onchange="loadImage(event)">
			<div class="image-input-div pt-0">

				{{ form.imageType|form_radio_row('_styled') }}

				<div id="imageSlideItemFileField_{{ index }}" class="image-file-input" data-index="{{ index }}" {% if value and value.image and value.image.name or value is null or value.imageUrl is null %} style="display:block" {% else %} style="display:none" {% endif %}>
					{{ form.imageFile|form_image_row(value.image.name ?? null, slide_images, 150, 150) }}
				</div>

				<div id="imageSlideItemUrlField_{{ index }}" class="image-url-input" data-index="{{ index }}" {% if value and value.imageUrl %} style="display:block" {% else %} style="display:none" {% endif %}>
					{{ form.imageUrl|form_image_url_with_preview }}
				</div>

				{{ form_widget(form.position) }}

				<button type="button" data-target="slide-item-{{ index }}" class="btn btn-icon btn-light-danger js-slide-item-remove">
					<span class="svg-icon svg-icon-2"><i class="fas fa-trash-alt text-red"></i></span>
				</button>

			</div>
		</div>
	</div>
{% endmacro %}