{% load wagtailimages_tags %}

{% if value.background_imagem %}
    {% image value.background_imagem original as bg_img %}
    <section class="galeria-section py-5" style="background-image: url('{{ bg_img.file.url }}'); background-size: cover; background-position: center; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}">
{% else %}
    <section class="galeria-section py-5" style="background-color: {{ value.background_cor }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}">
{% endif %}
    <div class="container">
        <!-- Título e descrição -->
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 class="galeria-titulo text-warning mb-3">{{ value.titulo }}</h2>
                {% if value.subtitulo %}
                    <p class="galeria-descricao text-white">{{ value.subtitulo }}</p>
                {% endif %}
            </div>
        </div>

        <!-- Grid de fotos -->
        <div class="galeria-grid{% if not value.foto_grande.imagem %} galeria-grid--sem-foto-grande{% endif %}">
            <!-- Grid adaptável (esquerda) -->
            <div class="galeria-fotos-grid">
                {% for foto in value.fotos %}
                    {% if foto.imagem %}
                        <div class="galeria-item">
                            <img src="{{ foto.imagem.file.url }}" alt="{{ foto.descricao|default:'' }}" class="img-fluid_semana">
                        </div>
                    {% endif %}
                {% endfor %}

                {% if not value.foto_grande.imagem and value.ver_mais_url %}
                    <a href="{{ value.ver_mais_url }}" class="galeria-item galeria-card-ver-mais">
                        <div class="ver-mais-content">
                            <i class="fas fa-camera"></i>
                            <span>
                                Ver mais
                                {% if value.quantidade_fotos %}
                                    +{{ value.quantidade_fotos }}
                                {% endif %}
                            </span>
                        </div>
                    </a>
                {% endif %}
            </div>

            <!-- Foto grande (direita) -->
            <div class="galeria-foto-grande">
                {% if value.foto_grande.imagem %}
                    <div class="galeria-item position-relative h-100">
                        <img src="{{ value.foto_grande.imagem.file.url }}" alt="{{ value.foto_grande.descricao|default:'' }}" class="img-fluid_semana">

                        {% if value.ver_mais_url %}
                            <a href="{{ value.ver_mais_url }}" class="ver-mais-overlay">
                                <div class="ver-mais-content">
                                    <i class="fas fa-camera"></i>
                                    <span>
                                        Ver mais
                                        {% if value.quantidade_fotos %}
                                            +{{ value.quantidade_fotos }}
                                        {% endif %}
                                    </span>
                                </div>
                            </a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<style>
    .galeria-section {
        overflow: hidden;
        background-size: cover;
        background-position: center;
        padding: 60px 0;
    }

    .col-12{
        margin-bottom: 20px;
    }

    .galeria-titulo {
        font-size: 1.5rem;
        font-weight: 600;
        color: #FFC627;
    }

    .galeria-descricao {
        font-size: 1.2rem;
        max-width: 400px;
        margin: 0 auto;
        color: #FFFFFF;
    }

    .galeria-grid {
        display: flex;
        gap: 8px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: stretch;
    }

    /* Grid adaptável à esquerda: 2 colunas, cresce para baixo conforme fotos */
    .galeria-fotos-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        align-content: start;
    }

    /* Quando não há foto grande: grid ocupa tudo com 4 colunas */
    .galeria-grid--sem-foto-grande .galeria-fotos-grid {
        grid-template-columns: repeat(4, 1fr);
        flex: 1;
    }

    .galeria-grid--sem-foto-grande .galeria-foto-grande {
        display: none;
    }

    /* Foto grande fixa à direita */
    .galeria-foto-grande {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .galeria-item {
        overflow: hidden;
        position: relative;
        aspect-ratio: 4 / 3;
    }

    .galeria-foto-grande .galeria-item {
        aspect-ratio: unset;
        height: 100%;
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }

    .galeria-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .galeria-item:hover img {
        transform: scale(1.05);
    }

    /* Card "Ver mais" no grid */
    .galeria-card-ver-mais {
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: white;
        transition: background-color 0.3s ease;
    }

    .galeria-card-ver-mais:hover {
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        text-decoration: none;
    }

    /* Overlay "Ver mais" */
    .ver-mais-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-decoration: none;
    }

    .ver-mais-overlay:hover {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        text-decoration: none;
    }

    .ver-mais-content {
        text-align: center;
    }

    .ver-mais-content i {
        display: block;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .galeria-grid {
            flex-direction: column-reverse;
        }

        .galeria-foto-grande {
            flex: unset;
            max-width: 100%;
            width: 100%;
        }

        .galeria-foto-grande .galeria-item {
            aspect-ratio: 16 / 9;
            height: auto;
            min-height: unset;
        }

        .galeria-fotos-grid {
            width: 100%;
        }

        .galeria-grid--sem-foto-grande .galeria-fotos-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .galeria-titulo {
            font-size: 2rem;
        }

        .galeria-descricao {
            font-size: 1rem;
        }
    }
</style>

<!-- Font Awesome para o ícone de câmera -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">