{% extends "@Contao/content_element/gallery.html.twig" %}

{% block list_component %}
    {% set list = list|default(_context) %}
    {% set tag_name = list.tag_name|default('ul') %}

    {% block list %}
        {% set list_attributes = attrs(list.list_attributes|default)
            .addClass('gallery-grid')
            .set('data-list-random', '', list.randomize_order is defined and list.randomize_order)
        %}
        <{{ tag_name }}{{ list_attributes }}>
        {% for item in list.items %}
            <li{{ attrs(list.item_attributes|default).addClass('gallery-item') }}>
                {%- block list_item -%}
                    {% if item.options is defined or item.metadata is defined %}
                        {% with {figure: item} %}
                            {{ block('figure_component') }}
                        {% endwith %}
                    {% else %}
                        {{ item }}
                    {% endif %}
                {%- endblock -%}
            </li>
        {% endfor %}
        </{{ tag_name }}>
    {% endblock %}
{% endblock %}

{% block figure_component %}
    {% set figure_attributes = attrs()
        .mergeWith(figure.options.attr|default)
        .mergeWith(figure_attributes|default)
        .addClass('gallery-figure')
    %}
    <figure{{ figure_attributes }}>
        {% if not figure.linkHref|default %}
            {% block media %}
                {{ block('picture_component') }}
            {% endblock %}
        {% else %}
            {% block media_link %}
                {% set link_attributes = attrs(figure.linkAttributes(true)|default)
                    .mergeWith(figure.options.link_attr|default)
                    .mergeWith(link_attributes|default)
                    .addClass('gallery-link')
                %}
                <a{{ link_attributes }}>{{ block('media') }}</a>
            {% endblock %}
        {% endif %}

        {% block caption %}
            {% if figure.metadata and figure.metadata.caption %}
                {% set caption_attributes = attrs()
                    .mergeWith(figure.options.caption_attr|default)
                    .mergeWith(caption_attributes|default)
                    .addClass('gallery-caption')
                %}
                <figcaption{{ caption_attributes }}>
                    {{ block('caption_inner') }}
                </figcaption>
            {% endif %}
        {% endblock %}
    </figure>
{% endblock %}

{% block style %}
    <style>
        /* Inspired gallery with refined aesthetics */
        .gallery-grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px; /* Negative margin for gutter compensation */
            padding: 10px 0;
            list-style: none;
        }
        
        .gallery-item {
            padding: 10px;
            margin: 0;
            box-sizing: border-box;
        }
        
        /* Fluid column sizing based on container class */
        .content-gallery--cols-1 .gallery-item { width: 100%; }
        .content-gallery--cols-2 .gallery-item { width: 50%; }
        .content-gallery--cols-3 .gallery-item { width: 33.333%; }
        .content-gallery--cols-4 .gallery-item { width: 25%; }
        .content-gallery--cols-5 .gallery-item { width: 20%; }
        .content-gallery--cols-6 .gallery-item { width: 16.666%; }
        
        .gallery-figure {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 0;
            padding-bottom: 75%; /* 4:3 aspect ratio */
            position: relative;
            overflow: hidden;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            background-color: #f8f8f8;
            transition: box-shadow 0.2s ease;
        }
        
        /* Special aspect ratio for panoramas */
        .content-gallery--cols-1 .gallery-figure {
            padding-bottom: 35%; /* Wider aspect ratio for panoramic images */
        }
        
        .gallery-figure img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* Caption styling */
        .gallery-caption {
            padding: 8px 0 0;
            font-size: 13px;
            color: #444;
            text-align: center;
        }
        
        /* Responsive behavior */
        @media (max-width: 900px) {
            .content-gallery--cols-5 .gallery-item,
            .content-gallery--cols-6 .gallery-item {
                width: 25%;
            }
            
            .content-gallery--cols-1 .gallery-figure {
                padding-bottom: 40%;
            }
        }
        
        @media (max-width: 700px) {
            .content-gallery--cols-3 .gallery-item,
            .content-gallery--cols-4 .gallery-item,
            .content-gallery--cols-5 .gallery-item,
            .content-gallery--cols-6 .gallery-item {
                width: 33.333%;
            }
            
            .content-gallery--cols-1 .gallery-figure {
                padding-bottom: 50%;
            }
        }
        
        @media (max-width: 500px) {
            .gallery-grid {
                margin: 0 -8px;
            }
            
            .gallery-item {
                padding: 8px;
            }
            
            .content-gallery--cols-2 .gallery-item,
            .content-gallery--cols-3 .gallery-item,
            .content-gallery--cols-4 .gallery-item,
            .content-gallery--cols-5 .gallery-item,
            .content-gallery--cols-6 .gallery-item {
                width: 50%;
            }
            
            .content-gallery--cols-1 .gallery-figure {
                padding-bottom: 60%;
            }
        }
    </style>
{% endblock %}