{% load wagtailcore_tags wagtailimages_tags %}

<section class="secao-manifesto"
    {% if value.imagem_background %}
        {% image value.imagem_background original as bg_img %}
        style="background-image: url('{{ bg_img.url }}'); background-size: cover; background-position: center;"
    {% elif value.cor_fundo %}
        style="background-color: {{ value.cor_fundo }};"
    {% endif %}
>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 text-center">

                {% if value.imagem_manifesto %}
                    <div class="secao-manifesto__imagem mb-4">
                        {% image value.imagem_manifesto original as manifesto_img %}
                        <img src="{{ manifesto_img.url }}"
                             alt="Manifesto"
                             class="img-fluid"
                             style="max-width: {{ value.largura_maxima_imagem|default:600 }}px; width: 100%; height: auto;">
                    </div>
                {% endif %}

                {% if value.link_botao and value.texto_botao %}
                    <div class="secao-manifesto__botao mt-4">
                        <a href="{{ value.link_botao }}"
                           target="_blank"
                           rel="noopener"
                           class="btn px-4 py-2 fw-bold"
                           style="background-color: {{ value.cor_botao|default:'#FFEB31' }}; color: {{ value.cor_texto_botao|default:'#132929' }}; border: none; border-radius: 4px; text-decoration: none; display: inline-block;">
                            {{ value.texto_botao }}
                        </a>
                    </div>
                {% endif %}

            </div>
        </div>
    </div>

    {% if value.mostrar_linha %}
        <div style="height: 4px; background-color: {{ value.cor_linha }};"></div>
    {% endif %}
</section>