{% extends "base.twig" %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('assets/libraries/plyr.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
{% endblock %}

{% block main %}
	<main>

		<section class="gallery-section">

			<article class="gallery">
				<h2 class="gallery__title">{{ page.title }}</h2>
				{% if page.text.isNotEmpty %}
					<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
				{% endif %}
				{% if page.files.template("artwork").isNotEmpty %}
					{% set artworks = page.files.template("artwork").sortBy('sort') %}
					{% for artwork in artworks %}
						<figure class="gallery__artwork">
							{% if artwork.type == 'video' %}
								{% if artwork.poster is not empty %}
									<video class="gallery__video" data-poster="{{ artwork.poster.toFile.url }}" preload="metadata" controls playsinline>
										<source src="{{ artwork.url }}" type="video/mp4"/>
									</video>
								{% else %}
									<video class="gallery__video" preload="metadata" controls playsinline>
										<source src="{{ artwork.url }}" type="video/mp4"/>
									</video>
								{% endif %}
							{% endif %}
							{% if artwork.type == 'image' %}
								<img class="gallery__image" src="{{ artwork.url }}" srcset="{{ artwork.srcset() }}" alt="{{ artwork.alt_text }}">
							{% endif %}
							{% if artwork.caption %}
								<figcaption>{{ artwork.caption.kirbytext|raw }}</figcaption>
							{% endif %}
						</figure>
					{% endfor %}
				{% endif %}
			</article>

		</section>

	</main>
{% endblock %}

{% block scripts %}
	<script src="{{ asset('assets/libraries/plyr.min.js') }}"></script>
	<script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %}