{% load i18n localcosmos_tags %}
{% if images %}
	<div id="{{ field_uuid }}-images" class="row">
		{% for image in images %}
			{% with image_urls=image.image_urls %}
				<div id="ctype-{{ image|ctype_id }}-{{ image.id }}" class="col-auto">
					<div class="mb-2">
						<a href="{% url 'datasets:large_modal_image' request.app.uid %}?image_url={{ image_urls.4x }}" class="xhr" ajax-target="LargeModalContent">
							<img src="{{ image_urls.1x }}" class="img-fluid pointer dataset-image" data-hd-url="{{ image_urls.4x }}"/>
						</a>
					</div>
					<div class="btn-group dropup">
						<button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							{% trans 'Modify' %}
						</button>
						<div class="dropdown-menu">
							<a class="dropdown-item xhr" ajax-target="ModalContent" href="{% url 'datasets:delete_dataset_image' request.app.uid image.id %}">{% trans 'Delete' %}</a>
						</div>
					</div>
				</div>
			{% endwith %}
		{% endfor %}
	</div>
{% else %}
	<div class="row my-3">
		<div class="col-12">
			{% trans 'No images found.'  %}
		</div>
	</div>
{% endif %}
<div class="row mt-3">
	<div class="col-12">
		<button type="button" class="btn btn-sm btn-outline-primary xhr" data-url="{% url 'datasets:add_dataset_image' request.app.uid dataset.id field_uuid %}" ajax-target="LargeModalContent">
			{% trans 'add image' %}
		</button>
	</div>
</div>
