{% load css_tags %}{% block_css 'enap_designsystem/blocks/aviso_block.css' %}
{# templates/blocks/aviso_block.html #}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
{% load static %}
{% block content %}
<div class="aviso-wrapper">
    {% if value.imagem %}
        {% image value.imagem fill-1920x1080 format-webp as img_webp %}
        {% image value.imagem fill-1920x1080 as img %}
        <div class="aviso-background" style="background-image: url('{{ img.url }}'); background-image: image-set(url('{{ img_webp.url }}') 1x type('image/webp'), url('{{ img.url }}') 1x);"></div>
    {% else %}
        <div class="aviso-background"></div>
    {% endif %}
    
    <div class="aviso-container">
        <div class="aviso-badge pulse-animation">
            {{ value.tag_texto }}
        </div>
        
        <div class="aviso-content">
            <div class="aviso-icon">
                <span>!</span>
            </div>
            
            <div class="aviso-header">
                <h2 class="aviso-title">{{ value.titulo }}</h2>
                <span class="aviso-date">{{ value.data|date:"d \d\e F \d\e Y" }}</span>
            </div>
            
            <div class="aviso-text">
                {{ value.texto }}
            </div>
            
            <div class="aviso-footer">
                <a href="{{ value.botao_link }}" class="btn-action">
                    {{ value.botao_texto }} <i class="fa-solid fa-circle-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .aviso-container {
        border-left: 5px solid {{ value.cor_borda }};
    }

    .aviso-badge {
        background-color: {{ value.cor_tag }};
    }

    .aviso-icon span {
        color: {{ value.cor_tag }};
    }

    .btn-action {
        background-color: {{ value.cor_botao }};
    }
</style>
{% endblock %}