{% extends 'base.html.twig' %}
{% block title %}{{ gallery.name }} — {{ parent() }}{% endblock %}
{% block body %}
<section class="gallery-page">
    <div class="gallery-page-header">
        <a href="{{ path('app_home') }}" class="back-link">← Retour</a>
        <p class="section-label">Galerie</p>
        <h1>{{ gallery.name }}</h1>
        {% if gallery.description %}
            <p class="gallery-desc">{{ gallery.description }}</p>
        {% endif %}
    </div>
    <div class="gallery-masonry">
        {% for photo in gallery.photos %}
            {% if photo.visible %}
            <div class="photo" onclick="openLightbox('{{ asset('uploads/photos/' ~ photo.filename) }}', '{{ photo.title|e('js') }}')">
                <img src="{{ asset('uploads/photos/' ~ photo.filename) }}"
                     alt="{{ photo.title }}" loading="lazy">
                <div class="photo-overlay">
                    <span class="photo-title">{{ photo.title }}</span>
                    {% if photo.camera %}<span class="photo-exif">{{ photo.camera }}{% if photo.aperture %} · {{ photo.aperture }}{% endif %}</span>{% endif %}
                </div>
            </div>
            {% endif %}
        {% else %}
            <p class="empty-msg">Aucune photo dans cette galerie pour le moment.</p>
        {% endfor %}
    </div>
</section>
<div id="lightbox" onclick="closeLightbox()">
    <button id="lb-close" onclick="closeLightbox()">✕</button>
    <img id="lb-img" src="" alt="">
    <p id="lb-caption"></p>
</div>
{% endblock %}