{# templates/category/show.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}{{ category.title }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/category.css') }}">
{% endblock %}

{% block body %}
    <div class="main-content">
        <div class="container">
            <div class="masonry-grid">
                {% for gallery in galleries %}
                    {% set image = gallery.featuredImageFilename ?? gallery.images|first %}

                    {% if image %}
                        <a href="{{ path('app_gallery', { id: gallery.id, slug: gallery.slug }) }}"
                           class="grid-item-link">
                            <div class="grid-item">
                                {% if gallery.hasFeaturedImage is defined and gallery.featuredImageFilename is not null %}
                                    {# Chemin pour les images mises en avant #}
                                    <img
                                            src="{{ asset('uploads/gallery_featured_images/' ~ image) | imagine_filter('gallery_large') }}"
                                            alt="{{ gallery.title|default('Image') }}"
                                    >
                                {% else %}
                                    {# Chemin pour les images normales #}
                                    <img
                                            src="{{ asset('uploads/images/' ~ image.filename) | imagine_filter('gallery_large') }}"
                                            alt="{{ gallery.title|default('Image') }}"
                                    >
                                {% endif %}

                                {# Titre et sous-titre positionnés selon le choix de l'utilisateur #}
                                <div class="title-container {{ gallery.titlePositionClasses }}">
                                    <div class="text-content">
                                        <h2 class="gallery-title">{{ gallery.title }}</h2>
                                        {% if gallery.subtitle is defined and gallery.subtitle %}
                                            <p class="gallery-subtitle">{{ gallery.subtitle }}</p>
                                        {% endif %}
                                    </div>
                                </div>

                                {# Description au survol #}
                                <div class="caption">
                                    {% if gallery.description %}
                                        <div class="description">{{ gallery.description }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}