{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<div class="texto-imagem-block texto-imagem-block--{{ value.posicao_imagem }}">
    <div class="texto-imagem-block__container">
        <!-- Coluna de texto -->
        <div class="texto-imagem-block__texto">
            <h2 class="texto-imagem-block__titulo">{{ value.titulo }}</h2>
            <div class="texto-imagem-block__conteudo">
                {{ value.texto|richtext }}
            </div>
            
            <!-- Botão opcional -->
            {% if value.incluir_botao and value.texto_botao %}
                <div class="texto-imagem-block__botao-container">
                    <a href="{{ value.link_botao|default:'#' }}" 
                       class="btn primary"
                       {% if value.link_botao and value.link_botao|slice:':4' == 'http' %}
                           target="_blank" rel="noopener noreferrer"
                       {% endif %}>
                        {{ value.texto_botao }} <i class="fa-solid fa-circle-chevron-right"></i>
                        {% if value.link_botao and value.link_botao|slice:':4' == 'http' %}
                            <span class="sr-only">(abre em nova aba)</span>
                        {% endif %}
                    </a>
                </div>
            {% endif %}
        </div>
        
        <!-- Coluna de imagem -->
        <div class="texto-imagem-block__imagem-container">
            {% image value.imagem width-800 as img %}
            <div class="texto-imagem-block__imagem texto-imagem-block__imagem--{{ value.estilo_imagem }}" 
                 {% if value.estilo_imagem == 'cobertura' %}
                    style="background-image: url('{{ img.url }}');"
                 {% endif %}>
                {% if value.estilo_imagem != 'cobertura' %}
                    <img src="{{ img.url }}" alt="{{ img.alt }}" class="img-fluid">
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}