{% load css_tags %}{% block_css 'enap_designsystem/blocks/texto_imagem.css' %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<div class="texto-imagem-block texto-imagem-block--{{ value.posicao_imagem }} texto-imagem-block--{{ value.posicao_imagem_mobile }}">
    <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 {{ value.estilo_botao }} {{ value.tamanho_botao }}"
                       {% 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 %}
            
            <!-- Links/Botões adicionais (até 3) -->
            {% if value.links %}
                <div class="texto-imagem-block__links-container">
                    {% for link in value.links %}
                        {% if link.block_type == 'button' %}
                            <a href="{{ link.value.url }}" 
                               class="btn {{ link.value.type_class }} {{ link.value.size_class }}"
                               {% if link.value.target_blank %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                
                                {% if link.value.icone_bool and link.value.icone_posicao == 'antes' %}
                                    <i class="fa-solid fa-circle-chevron-right"></i>
                                {% endif %}
                                
                                {{ link.value.get_title }}
                                
                                {% if link.value.icone_bool and link.value.icone_posicao == 'depois' %}
                                    <i class="fa-solid fa-circle-chevron-right"></i>
                                {% endif %}
                                
                                {% if link.value.target_blank %}
                                    <span class="sr-only">(abre em nova aba)</span>
                                {% endif %}
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        
        <!-- Coluna de imagem -->
        <div class="texto-imagem-block__imagem-container">
            {% image value.imagem original format-webp 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="{{ value.titulo }}" class="img-fluid">
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}