{% load wagtailimages_tags %}

<section class="secao-cards" style="background-color: {{ value.cor_fundo }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}">
    <div class="secao-cards-container">

        {% if value.titulo %}
            <h2 class="secao-cards-titulo" style="color: {{ value.cor_titulo }};">
                {{ value.titulo }}
            </h2>
        {% endif %}

        {% if value.cards %}
            <div class="secao-cards-grid">
                {% for card_block in value.cards %}
                    {% if card_block.block_type == 'card' %}
                        {% with card=card_block.value %}
                            <div class="secao-card-item" style="background-color: {{ card.cor_fundo_card }};">
                                {% if card.imagem %}
                                    {% image card.imagem width-400 as card_img %}
                                    <div class="secao-card-imagem">
                                        <img src="{{ card_img.url }}" alt="{{ card.titulo_card }}" class="secao-card-img">
                                    </div>
                                {% endif %}

                                <div class="secao-card-corpo">
                                    {% if card.titulo_card %}
                                        <h3 class="secao-card-titulo" style="color: {{ card.cor_titulo_card }};">
                                            {{ card.titulo_card }}
                                        </h3>
                                    {% endif %}

                                    {% if card.texto %}
                                        <p class="secao-card-texto" style="color: {{ card.cor_texto }};">
                                            {{ card.texto }}
                                        </p>
                                    {% endif %}

                                    {% if card.link %}
                                        <a href="{{ card.link }}"
                                           class="secao-card-link"
                                           style="color: {{ card.cor_link }};"
                                           target="_blank">
                                            {{ card.texto_link|default:"Saiba mais" }}
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

    </div>
</section>