{% 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' %}
                                <video class="gallery__video" controls playsinline preload="metadata">
                                    <source src="{{ artwork.url }}" type="video/mp4" />
                                </video>
                            {% 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 }}</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 %}