{% extends 'partials/base.html.twig' %}
{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
{% endblock %}

{% macro imagegrid(images, dummy_start) %}
    <div class="row g-2">
        {% if images|length > 0 %}
            {% for img in images %}
            <div class="col-6">
                <a href="{{ img.url }}" class="glightbox gallery-item" data-gallery="galerie-impressie" data-description="Impressie van de galerie">
                    <div class="gallery-thumb"><img src="{{ img.url }}" loading="lazy" alt="Impressie van de galerie"></div>
                </a>
            </div>
            {% endfor %}
        {% else %}
            {% for i in dummy_start..(dummy_start + 3) %}
            <div class="col-6">
                <a href="https://picsum.photos/seed/galerie-ruimte{{ i }}/900/900" class="glightbox gallery-item" data-gallery="galerie-impressie" data-description="Impressie {{ i }}">
                    <div class="gallery-thumb"><img src="https://picsum.photos/seed/galerie-ruimte{{ i }}/450/450" loading="lazy" alt="Impressie van de galerie (voorbeeldfoto)"></div>
                </a>
            </div>
            {% endfor %}
        {% endif %}
    </div>
{% endmacro %}

{% import _self as gallery %}

{% block content %}
{% set is_en = (grav.language.active ?? 'nl') == 'en' %}
{% set section1_images = (page.header.section1_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}
{% set section2_images = (page.header.section2_images ?? [])|map(item => page.media[item.image] ?? null)|filter(img => img is not null) %}

<div class="row g-3">
    <div class="col-12 col-md-6 p-3 order-1 order-md-2">
        {{ gallery.imagegrid(section1_images, 1) }}
    </div>
    <div class="col-12 col-md-6 p-3 text-start content-text order-2 order-md-1">
        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
        {{ page.header.section1_text|markdown }}
    </div>
</div>

<div class="row g-3 mt-2">
    <div class="col-12 col-md-6 p-3 text-start content-text order-2">
        {{ page.header.section2_text|markdown }}
        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
            <a href="{{ url('/werk-in-detail') }}" class="btn btn-brand">{{ is_en ? 'View work in detail' : 'Bekijk werk in detail' }}</a>
            <a href="{{ url('/contact') }}" class="btn btn-outline-brand">{{ is_en ? 'Plan a visit' : 'Plan een bezoek' }}</a>
        </div>
    </div>
    <div class="col-12 col-md-6 p-3 order-1">
        {{ gallery.imagegrid(section2_images, 5) }}
    </div>
</div>
{% endblock %}