
<div class="LP-ImageGrid">
    <ul class="LP-ImageGrid__Container">
        {{#each images}}
        <li class="LP-ImageGrid__Item">
            <a href="#{{this.current_id}}" class="LP-Link">
                <img  class="LP-Image" src="{{this.url}}">
            </a>
            <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
                <a href="#" class="LP-Link">
                    <img class="LP-Icon" src="/icons/cancel.svg"/>
                </a>
            </span>
			<div id="{{this.current_id}}" class="LP-ImageGrid__LightBox">
				<img class="LP-ImageGrid__FullSizeImage" src="{{this.url}}" loading="lazy"/>
				{{#if this.next_id}}
				<a href="#{{this.next_id}}" class="LP-ImageGrid__Next">Next</a>
				{{/if}}
				{{#if this.previous_id}}
				<a href="#{{this.previous_id}}" class="LP-ImageGrid__Previous">Previous</a>
				{{/if}}
				<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
					<a href="#" class="LP-Link">
						<img class="LP-Icon" src="/icons/cancel.svg"/>
					</a>
				</span>
			</div>
        </li>
        {{/each}}
        <li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
            <a class="LP-Link" href="#">
                <img class="LP-Icon" src="/icons/plus.svg"/>
            </a>
        </li>
    </ul>
</div>