{% load css_tags %}{% block_css 'enap_designsystem/blocks/citizen_server_block.css' %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<section {% if self.section_id %}id="{{ self.section_id }}"{% endif %} {{ self.banner_size }} {{ self.style_choice }}">
<div class="citizen-server-block style-{{ value.style_choice }} banner-{{ value.banner_size }}">
    {% for media_block in value.background_media %}
        {% if media_block.block_type == 'image' %}
            {% image media_block.value original as bg_image %}
            <img src="{{ bg_image.url }}" alt="Background">
        {% elif media_block.block_type == 'video' %}
            <video autoplay muted loop>
                <source src="{{ media_block.value.url }}" type="video/mp4">
            </video>
        {% endif %}
    {% endfor %}
    
    <div class="content-wrapper-citizen">
        {% if value.small_text %}
            <div class="small-text-wrapper">
                <div class="small-text">{{ value.small_text }}</div>
            </div>
        {% endif %}
        
        <h2 class="title-{{ value.banner_size }}">{{ value.title }}</h2>
        
        <div class="description">
            {{ value.description|richtext }}
        </div>

        {% if value.links %}
                    <div class="card-info-buttons">
                        {% for link_block in value.links %}
                            {% if link_block.block_type == 'button' %}
                                {% include_block link_block %}
                            {% endif %}
                        {% endfor %}
                    </div>
        {% endif %}
        
    </div>
</div>
</section>

{% endblock %}