{% load wagtailcore_tags %}
{% block content %}
<script src="https://kit.fontawesome.com/2e8803d931.js" crossorigin="anonymous"></script>

<section class="secao-adesao-grid secao-adesao-grid--{{ value.espaco_vertical }}">
    <div class="secao-adesao-grid__container">
        <!-- Coluna 1 - Informativa -->
        <div class="secao-adesao-grid__coluna secao-adesao-grid__coluna-info">
            <h2 class="secao-adesao-grid__titulo">{{ value.titulo_informativo }}</h2>
            <div class="secao-adesao-grid__texto">
                {{ value.texto_informativo|richtext }}
            </div>
        </div>
        
        <!-- Coluna 2 - Cartão Verde Destacado -->
        <div class="secao-adesao-grid__coluna secao-adesao-grid__coluna-destaque" style="background-color: {{ value.cor_fundo_destaque }};">
            <div class="secao-adesao-grid__conteudo-destaque">
                <h2 class="secao-adesao-grid__titulo-destaque">{{ value.titulo_destaque }}</h2>
                <div class="secao-adesao-grid__texto-destaque">
                    {{ value.texto_destaque|richtext }}
                </div>
                
                <!-- Container de Múltiplos Botões -->
                <div class="secao-adesao-grid__botoes secao-adesao-grid__botoes--{{ value.layout_botoes }}">
                    {% for botao_block in value.botoes %}
                        {% if botao_block.block_type == 'botao' %}
                            {% with botao=botao_block.value %}
                                <a href="{{ botao.url }}" 
                                   class="secao-adesao-grid__botao secao-adesao-grid__botao--{{ botao.estilo }}"
                                   {% if botao.abrir_nova_aba %}target="_blank" rel="noopener"{% endif %}
                                   title="{{ botao.texto }}">
                                    {% if botao.icone %}
                                        <i class="fa-solid fa-{{ botao.icone }}"></i>
                                    {% endif %}
                                    {{ botao.texto }}
                                    {% if not botao.icone %}
                                        <i class="fa-solid fa-circle-chevron-right"></i>
                                    {% endif %}
                                </a>
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Container de Botões */
.secao-adesao-grid__botoes {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Layouts dos Botões */
.secao-adesao-grid__botoes--vertical {
    flex-direction: column;
}

.secao-adesao-grid__botoes--horizontal {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.secao-adesao-grid__botoes--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

</style>
{% endblock %}