{% load wagtailimages_tags %}

{% if value.imagem_background %}
    {% image value.imagem_background original as bg_image %}
{% endif %}

<style>
    .secao-destaque-titulo{
    color: {{ value.cor_titulo }};
    }
</style>

<section class="secao-destaque" 
        {% if bg_image %}
        style="background-image: url('{{ bg_image.url }}');"
        {% endif %}>

    
    <div class="secao-destaque-container">
        <!-- Título -->
        {% if value.titulo %}
            <h2 class="secao-destaque-titulo" style="color: {{ value.cor_titulo }};">
                {{ value.titulo }}
            </h2>
        {% endif %}
        
        <!-- Imagem em Destaque -->
        {% if value.imagem_destaque %}
            <div class="secao-destaque-principal">
                {% image value.imagem_destaque width-600 as destaque_img %}
                <div class="destaque-card-semana">
                    <img src="{{ destaque_img.url }}" 
                        alt="{{ value.legenda_destaque|default:value.titulo }}"
                        class="destaque-img">
                    {% if value.legenda_destaque %}
                        <p class="destaque-legenda">{{ value.legenda_destaque }}</p>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        
        <!-- Galeria de Fotos -->
        {% if value.galeria_fotos %}
            <div class="secao-destaque-galeria">
                {% for foto_block in value.galeria_fotos %}
                    {% if foto_block.block_type == 'foto' %}
                        <div class="galeria-item">
                            {% image foto_block.value.imagem width-300 as galeria_img %}
                            <div class="galeria-card">
                                <img src="{{ galeria_img.url }}" 
                                    alt="{{ foto_block.value.legenda|default:'Foto da galeria' }}"
                                    class="galeria-img">
                                {% if foto_block.value.legenda %}
                                    <p class="galeria-legenda">{{ foto_block.value.legenda }}</p>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>
</section>