{% load wagtailcore_tags wagtailimages_tags %}

<section class="galeria-imagens">
    <div class="container">
        <!-- Cabeçalho da Galeria -->
        {% if value.titulo_secao or value.descricao_secao %}
            <div class="galeria-imagens">
                {% if value.titulo_secao %}
                    <h2 class="galeria-imagens__titulo">{{ value.titulo_secao }}</h2>
                {% endif %}
                
                {% if value.descricao_secao %}
                    <p class="galeria-imagens__descricao">{{ value.descricao_secao }}</p>
                {% endif %}
            </div>
        {% endif %}

        <!-- Grid de Imagens -->
        <div class="galeria-imagens__grid 
                    galeria-imagens__grid--{{ value.grid_colunas }}col
                    galeria-imagens__grid--espacamento-{{ value.espacamento }}
                    galeria-imagens__grid--altura-{{ value.altura_imagens }}
                    {% if value.bordas_arredondadas %}galeria-imagens__grid--bordas-arredondadas{% endif %}">
            
            {% for imagem_block in value.imagens %}
                {% if imagem_block.block_type == 'imagem' %}
                    {% with imagem=imagem_block.value %}
                        <div class="galeria-imagens__item galeria-imagens__item--hover-{{ value.efeito_hover }}">
                            <!-- Container da Imagem -->
                            <div class="galeria-imagens__imagem-container">
                                {% if imagem.link %}
                                    <a href="{{ imagem.link }}" 
                                       {% if imagem.abrir_nova_aba %}target="_blank" rel="noopener"{% endif %}
                                       title="{% if imagem.titulo %}{{ imagem.titulo }}{% else %}Ver imagem{% endif %}">
                                {% endif %}
                                
                                <!-- Renderização da Imagem baseada no formato escolhido -->
                                {% if value.altura_imagens == 'auto' %}
                                    {% image imagem.imagem original as img %}
                                {% elif value.altura_imagens == 'quadrada' %}
                                    {% image imagem.imagem fill-400x400 as img %}
                                {% elif value.altura_imagens == 'retangular' %}
                                    {% image imagem.imagem fill-640x360 as img %}
                                {% elif value.altura_imagens == 'paisagem' %}
                                    {% image imagem.imagem fill-400x300 as img %}
                                {% elif value.altura_imagens == 'retrato' %}
                                    {% image imagem.imagem fill-300x400 as img %}
                                {% endif %}
                                
                                <img src="{{ img.url }}" 
                                     alt="{% if imagem.titulo %}{{ imagem.titulo }}{% else %}{{ img.title }}{% endif %}"
                                     class="galeria-imagens__imagem"
                                     loading="lazy">
                                
                                <!-- Overlay para efeito hover (se ativado) -->
                                {% if value.efeito_hover == 'overlay' %}
                                    <div class="galeria-imagens__overlay">
                                        {% if imagem.titulo %}
                                            <h3 class="galeria-imagens__overlay-titulo">{{ imagem.titulo }}</h3>
                                        {% endif %}
                                        {% if imagem.descricao and value.mostrar_descricoes %}
                                            <p class="galeria-imagens__overlay-descricao">{{ imagem.descricao }}</p>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                
                                {% if imagem.link %}
                                    </a>
                                {% endif %}
                            </div>
                            
                            <!-- Informações abaixo da imagem -->
                            {% if value.mostrar_titulos and imagem.titulo or value.mostrar_descricoes and imagem.descricao %}
                                <div class="galeria-imagens__info">
                                    {% if value.mostrar_titulos and imagem.titulo %}
                                        <h3 class="galeria-imagens__info-titulo">{{ imagem.titulo }}</h3>
                                    {% endif %}
                                    
                                    {% if value.mostrar_descricoes and imagem.descricao %}
                                        <p class="galeria-imagens__info-descricao">{{ imagem.descricao }}</p>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    {% endwith %}
                {% endif %}
            {% empty %}
                <div class="galeria-imagens__vazia">
                    <p>Nenhuma imagem adicionada à galeria.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<style>
/* Seção Principal */
.galeria-imagens {
    padding: 2rem 0;
}

/* Cabeçalho */
.galeria-imagens__header {
    text-align: center;
    margin-bottom: 3rem;
}

.galeria-imagens__titulo {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.galeria-imagens__descricao {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid Principal */
.galeria-imagens__grid {
    display: grid;
    width: 100%;
}

/* Layouts de Colunas */
.galeria-imagens__grid--1col {
    grid-template-columns: 1fr;
}

.galeria-imagens__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.galeria-imagens__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.galeria-imagens__grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Espaçamentos */
.galeria-imagens__grid--espacamento-pequeno {
    gap: 0.5rem;
}

.galeria-imagens__grid--espacamento-medio {
    gap: 1rem;
}

.galeria-imagens__grid--espacamento-grande {
    gap: 2rem;
}

/* Item Individual */
.galeria-imagens__item {
    display: flex;
    flex-direction: column;
}

.galeria-imagens__imagem-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.galeria-imagens__imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Bordas Arredondadas */
.galeria-imagens__grid--bordas-arredondadas .galeria-imagens__imagem-container {
    border-radius: 12px;
}

.galeria-imagens__grid--bordas-arredondadas .galeria-imagens__imagem {
    border-radius: 12px;
}

/* Formatos de Altura */
.galeria-imagens__grid--altura-quadrada .galeria-imagens__imagem-container {
    aspect-ratio: 1/1;
}

.galeria-imagens__grid--altura-retangular .galeria-imagens__imagem-container {
    aspect-ratio: 16/9;
}

.galeria-imagens__grid--altura-paisagem .galeria-imagens__imagem-container {
    aspect-ratio: 4/3;
}

.galeria-imagens__grid--altura-retrato .galeria-imagens__imagem-container {
    aspect-ratio: 3/4;
}

/* Efeitos Hover */
.galeria-imagens__item--hover-zoom:hover .galeria-imagens__imagem {
    transform: scale(1.05);
}

.galeria-imagens__item--hover-escala:hover .galeria-imagens__imagem-container {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Overlay para hover */
.galeria-imagens__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 0, 0, 0.7)
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.galeria-imagens__item--hover-overlay:hover .galeria-imagens__overlay {
    opacity: 1;
}

.galeria-imagens__overlay-titulo {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.galeria-imagens__overlay-descricao {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* Informações abaixo da imagem */
.galeria-imagens__info {
    padding: 1rem 0;
}

.galeria-imagens__info-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.galeria-imagens__info-descricao {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Estado vazio */
.galeria-imagens__vazia {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #999;
}

/* Responsividade */
@media (max-width: 1024px) {
    .galeria-imagens__grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .galeria-imagens__grid--3col,
    .galeria-imagens__grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .galeria-imagens__titulo {
        font-size: 2rem;
    }
    
    .galeria-imagens__descricao {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .galeria-imagens__grid--2col,
    .galeria-imagens__grid--3col,
    .galeria-imagens__grid--4col {
        grid-template-columns: 1fr;
    }
    
    .galeria-imagens {
        padding: 1rem 0;
    }
    
    .galeria-imagens__header {
        margin-bottom: 2rem;
    }
    
    .galeria-imagens__titulo {
        font-size: 1.75rem;
    }
}
</style>