{#{% extends 'base.html.twig' %}#}

{#{% block title %}Galerie photo{% endblock %}#}

{#{% block stylesheets %}#}
{#    {{ parent() }}#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">#}

{#    <style>#}
{#        /* Disposition générale */#}
{#        .gallery-container {#}
{#            display: grid;#}
{#            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));#}
{#            gap: 1rem;#}
{#            padding: 1rem;#}
{#        }#}

{#        /* Bloc vignette */#}
{#        .gallery-item {#}
{#            position: relative;#}
{#            overflow: hidden;#}
{#            border-radius: 12px;#}
{#            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);#}
{#            transition: transform 0.2s ease-in-out;#}
{#            aspect-ratio: 220 / 180;#}
{#            background-color: #ffffff;#}
{#        }#}

{#        .gallery-item:hover {#}
{#            transform: scale(1.03);#}
{#        }#}

{#        /* Lien autour de l’image */#}
{#        .gallery-item a {#}
{#            display: block;#}
{#            width: 100%;#}
{#            height: 100%;#}
{#            position: relative;#}
{#        }#}

{#        /* Image */#}
{#        .gallery-item img {#}
{#            width: 100%;#}
{#            height: 100%;#}
{#            object-fit: cover;#}
{#            object-position: center;#}
{#            display: block;#}
{#        }#}

{#        /* Légende (titre de la photo) */#}
{#        .gallery-caption {#}
{#            position: absolute;#}
{#            bottom: 0;#}
{#            left: 0;#}
{#            width: 100%;#}
{#            background: rgba(0, 0, 0, 0.6);#}
{#            color: #fff;#}
{#            text-align: center;#}
{#            font-size: 0.9rem;#}
{#            padding: 0.4rem 0.6rem;#}
{#            white-space: nowrap;#}
{#            overflow: hidden;#}
{#            text-overflow: ellipsis;#}
{#            border-bottom-left-radius: 12px;#}
{#            border-bottom-right-radius: 12px;#}
{#        }#}

{#        /* Responsive */#}
{#        @media (max-width: 576px) {#}
{#            .gallery-item {#}
{#                aspect-ratio: 1 / 1; /* format carré sur mobile */#}
{#            }#}
{#        }#}

{#        /* Filtre album */#}
{#        .album-filter {#}
{#            margin-bottom: 1.5rem;#}
{#            text-align: center;#}
{#        }#}

{#        .album-filter select {#}
{#            padding: 0.4rem 0.6rem;#}
{#            font-size: 1rem;#}
{#        }#}
{#    </style>#}
{#{% endblock %}#}


{#{% block body %}#}
{#    <section class="container px-4 py-5 pt-lg-5 mt-5">#}
{#        <h1 class="mb-4 text-center">Galerie photo</h1>#}

{#        #}{# Messages flash #}
{#        {% for label, messages in app.flashes %}#}
{#            {% for message in messages %}#}
{#                <div class="alert alert-{{ label }}">{{ message }}</div>#}
{#            {% endfor %}#}
{#        {% endfor %}#}

{#        #}{# Filtre par album #}
{#        {% if albums|length > 0 %}#}
{#            <div class="mb-4 text-center">#}

{#                {% macro render_album_options(album, level, selectedAlbum) %}#}
{#                    {% set prefix = '&nbsp;&nbsp;&nbsp;' ~ ('— ' if level > 0 else '') %}#}
{#                    <option value="{{ album.id }}" {% if selectedAlbum == album.id %}selected{% endif %}>#}
{#                        {{ prefix|raw }}{{ album.title }}#}
{#                    </option>#}
{#                    {% for child in album.children %}#}
{#                        {{ _self.render_album_options(child, level + 1, selectedAlbum) }}#}
{#                    {% endfor %}#}
{#                {% endmacro %}#}


{#                <form method="get" id="albumFilterForm">#}
{#                    <label for="albumSelect">Filtrer par album :</label>#}
{#                    <select id="albumSelect" name="album" onchange="document.getElementById('albumFilterForm').submit()">#}
{#                        <option value="">Tous les albums</option>#}
{#                        {% for album in albums %}#}
{#                            <option value="{{ album.id }}"#}
{#                                    {% if selectedAlbum is not empty and selectedAlbum == album.id %}selected{% endif %}>#}
{#                                {{ album.title }}#}
{#                            </option>#}
{#                        {% endfor %}#}
{#                    </select>#}
{#                    <select id="albumSelect" name="album" onchange="document.getElementById('albumFilterForm').submit()">#}
{#                        <option value="">Tous les albums</option>#}
{#                        {% import _self as macros %}#}
{#                        {% for album in albums %}#}
{#                            {{ macros.render_album_options(album, 0, selectedAlbum) }}#}
{#                        {% endfor %}#}
{#                    </select>#}

{#                </form>#}
{#            </div>#}
{#        {% endif %}#}

{#        <div class="gallery-container">#}
{#            {% set hasPhotos = false %}#}
{#            {% for photo in photos %}#}
{#                {% set hasPhotos = true %}#}
{#                <div class="gallery-item">#}
{#                    <a href="{{ asset('uploads/photos/' ~ photo.fileName) }}"#}
{#                       data-lightbox="galerie"#}
{#                       data-title="{{ photo.title ?: 'Photo' }}{% if photo.description %} - {{ photo.description }}{% endif %}">#}

{#                        #}{# Affichage des images dans la galerie #}
{#                        {% set imagePath = vich_uploader_asset(photo, 'imageFile') ?: asset('uploads/photos/' ~ photo.fileName) %}#}

{#                        {% if imagePath %}#}
{#                            <img src="{{ imagePath | imagine_filter('thumbnail_small') }}"#}
{#                                 alt=""#}
{#                                 loading="lazy">#}
{#                        {% else %}#}
{#                            <div class="text-center text-muted" style="height:180px; line-height:180px; background:#f0f0f0;">#}
{#                                Image indisponible#}
{#                            </div>#}
{#                        {% endif %}#}



{#                        {% if photo.title %}#}
{#                            <div class="gallery-caption">#}
{#                                {{ photo.title }}#}
{#                            </div>#}
{#                        {% endif %}#}
{#                    </a>#}
{#                </div>#}
{#            {% endfor %}#}

{#            {% if not hasPhotos %}#}
{#                <p class="text-center text-muted mt-4">Aucune photo publique n’a encore été ajoutée.</p>#}
{#            {% endif %}#}
{#        </div>#}
{#    </section>#}

{#{% endblock %}#}

{#{% block javascripts %}#}
{#    {{ parent() }}#}
{#    #}{# Lightbox2 JS #}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>#}
{#    <script>#}
{#        lightbox.option({#}
{#            resizeDuration: 200,#}
{#            wrapAround: true,#}
{#            fadeDuration: 150,#}
{#            imageFadeDuration: 150,#}
{#            albumLabel: "Photo %1 sur %2"#}
{#        });#}
{#    </script>#}
{#{% endblock %}#}

{% extends 'base.html.twig' %}

{% block title %}Galerie photo{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">

    <style>
        /* Disposition générale */
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
            padding: 1rem;
        }

        /* Bloc vignette */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease-in-out;
            aspect-ratio: 220 / 180;
            background-color: #ffffff;
        }

        .gallery-item:hover {
            transform: scale(1.03);
        }

        .gallery-item a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            text-align: center;
            font-size: 0.9rem;
            padding: 0.4rem 0.6rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        @media (max-width: 576px) {
            .gallery-item {
                aspect-ratio: 1 / 1;
            }
        }

        .album-filter {
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .album-filter select {
            padding: 0.4rem 0.6rem;
            font-size: 1rem;
        }

        select#albumSelect {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            border-radius: 8px;
            border: 1px solid #ccc;
            background-color: #fff;
            min-width: 200px;
        }

        select#albumSelect option {
            padding-left: 0.5rem;
        }

        #albumSelect {
            cursor: pointer;
        }

        #albumSelect option.level-0 {
            color: #1e88e5; /* Bleu pour les albums principaux */
            font-weight: 600;
        }

        #albumSelect option.level-1 {
            color: #43a047; /* Vert pour les sous-albums */
        }

        #albumSelect option.level-2 {
            color: #fb8c00; /* Orange pour les sous-sous-albums */
        }

        #albumSelect option.level-3 {
            color: #8e24aa; /* Violet pour les niveaux encore plus profonds */
        }


    </style>
{% endblock %}

{% block body %}
    <section class="container px-4 py-5 pt-lg-5 mt-5">
        <h1 class="mb-4 text-center">Galerie photo</h1>

        {# Messages flash #}
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        {# Filtre par album avec hiérarchie #}
        {% if albums|length > 0 %}
            <div class="mb-4 text-center">

                {% macro render_album_options(album, level, selectedAlbum) %}
                    {# Ne pas afficher les albums privés pour les visiteurs #}
                    {% if not album.isPrivate or is_granted('ROLE_USER') %}
                        {# Au moins un tiret pour l'album principal, puis un par niveau de sous-album #}
                        {% set prefix = '— ' %}
                        {% for i in 1..level %}
                            {% set prefix = prefix ~ '— ' %}
                        {% endfor %}

                        <option value="{{ album.id }}" {% if selectedAlbum == album.id %}selected{% endif %}>
                            {{ prefix|raw }}{{ album.title }}
                        </option>

                        {% for child in album.children %}
                            {{ _self.render_album_options(child, level + 1, selectedAlbum) }}
                        {% endfor %}
                    {% endif %}
                {% endmacro %}

                <form method="get" id="albumFilterForm">
                    <label for="albumSelect">Filtrer par album :</label>
{#                    <select id="albumSelect" name="album" onchange="document.getElementById('albumFilterForm').submit()">#}
{#                        <option value="">Tous les albums</option>#}
{#                        {% import 'photo/_album_menu.html.twig' as macros %}#}
{#                        {% for album in albums %}#}
{#                            {% if not album.parent %}#}
{#                                {{ macros.render_album_menu(album, 0) }}#}
{#                            {% endif %}#}
{#                        {% endfor %}#}
{#                    </select>#}
                    <select id="albumSelect" name="album" onchange="document.getElementById('albumFilterForm').submit()">
                        <option value="">Tous les albums</option>
                        {% import 'photo/_album_menu.html.twig' as macros %}
                        {% for album in albums %}
                            {% if not album.parent %}
                                {{ macros.render_album_menu(album, 0, selectedAlbum) }}
                            {% endif %}
                        {% endfor %}
                    </select>

                </form>
            </div>
        {% endif %}


        {# Galerie photo #}
        <div class="gallery-container">
            {% set hasPhotos = false %}
            {% for photo in photos %}
                {% set hasPhotos = true %}
                <div class="gallery-item">
                    <a href="{{ asset('uploads/photos/' ~ photo.fileName) }}"
                       data-lightbox="galerie"
                       data-title="{{ photo.title ?: 'Photo' }}{% if photo.description %} - {{ photo.description }}{% endif %}">

                        {% set imagePath = vich_uploader_asset(photo, 'imageFile') ?: asset('uploads/photos/' ~ photo.fileName) %}

                        {% if imagePath %}
                            <img src="{{ imagePath | imagine_filter('thumbnail_small') }}"
                                 alt=""
                                 loading="lazy">
                        {% else %}
                            <div class="text-center text-muted" style="height:180px; line-height:180px; background:#f0f0f0;">
                                Image indisponible
                            </div>
                        {% endif %}

                        {% if photo.title %}
                            <div class="gallery-caption">{{ photo.title }}</div>
                        {% endif %}
                    </a>
                </div>
            {% endfor %}

            {% if not hasPhotos %}
                <p class="text-center text-muted mt-4">Aucune photo publique n’a encore été ajoutée.</p>
            {% endif %}
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
    <script>
        lightbox.option({
            resizeDuration: 200,
            wrapAround: true,
            fadeDuration: 150,
            imageFadeDuration: 150,
            albumLabel: "Photo %1 sur %2"
        });
    </script>
{% endblock %}