{% load static %}
	{% load lostplaces %}
	
	{% if headline %}
	<h1 class="LP-Headline">{{headline}}</h1>
	{% endif %}
	<div class="LP-ImageGrid">
		<ul class="LP-ImageGrid__Container">
		{% for image in image_list %}
			<li id="thumbnail{{forloop.counter}}" class="LP-ImageGrid__Item">
				{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url="#image"|addstr:forloop.counter %}
			{% if user.explorer == image.submitted_by%}
				<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
					<a href="{% url 'place_image_delete' pk=image.id %}" class="LP-Link">
						<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}" />
					</a>
				</span>
			{% endif %}
			<div id="image{{forloop.counter}}" class="LP-ImageGrid__LightBox">
				<img class="LP-ImageGrid__FullSizeImage" src="{{image.filename.large.url}}" loading="lazy"/>
				{% if forloop.counter < image_list|length %}
					<a href="#image{{forloop.counter|add:1}}" class="LP-ImageGrid__Next">Next</a>
				{% endif %}
				{% if forloop.counter > 1 %}
				<a href="#image{{forloop.counter|add:-1}}" class="LP-ImageGrid__Previous">Previous</a>
				{% endif %}
				<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
					<a href="#thumbnail{{forloop.counter}}" class="LP-Link">
						<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}"/>
					</a>
				</span>
			</div>
			</li>
		{% endfor %}
		{% if place %}
		<li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
			<a class="LP-Link" href="{% url 'place_image_create' place_id=place.id %}">
				<img class="LP-Icon" src="{% static 'icons/plus.svg' %}" />
			</a>
		</li>
		{% endif %}
		</ul>
	</div>