{% load wagtailcore_tags %} 
{% load static %}  

{% block content %} 
<section class="section-card {{self.custom_class}}" 
         {% if self.id_slug %}id="{{self.id_slug}}"{% endif %}
         style="{% if self.custom_class == 'bg-blue' %}background-color: #EBEFF5;{% elif self.custom_class == 'bg-gray' %}background-color: #F5F7FA;{% elif self.custom_class == 'bg-whitetwo' %}background-color: #F7F7F7;{% elif self.custom_class == 'bg-darkgreen' %}background-color: #012124;{% else %}background-color: #ffffff;{% endif %}">         
    
    <!-- Espaçamento superior baseado na escolha do admin -->
    <div style="height: {% if self.spacing == 'none' %}0px{% elif self.spacing == 'small' %}20px{% elif self.spacing == 'medium' %}40px{% elif self.spacing == 'large' %}60px{% elif self.spacing == 'extra-large' %}80px{% else %}40px{% endif %};"></div>         
    
    <!-- Título e subtítulo - só renderiza se houver conteúdo -->
    {% if self.title or self.subtitle %}
    <div class="container-medium">         
        <div class="padding-global">         
            <div class="wrapper-text-blue">
                {% if self.title %}             
                    <h2 class="h2-blue-large {% if self.custom_class == 'bg-darkgreen' %}white{% endif %}">{{self.title}}</h2>
                {% endif %}
                {% if self.subtitle %}             
                    <div class="{% if self.custom_class == 'bg-darkgreen' %}white{% endif %}">                 
                        {{self.subtitle}}              
                    </div>
                {% endif %}         
            </div>         
        </div>         
    </div>
    {% endif %}                  
    
    <!-- Conteúdo dos blocos filhos -->
    <div class="container-medium">         
        <div class="padding-global">         
            {% for block in self.content %}             
                {% include_block block %}         
            {% endfor %}         
        </div>         
    </div>         
    
    <!-- Espaçamento inferior baseado na escolha do admin -->
    <div style="height: {% if self.spacing == 'none' %}0px{% elif self.spacing == 'small' %}20px{% elif self.spacing == 'medium' %}40px{% elif self.spacing == 'large' %}60px{% elif self.spacing == 'extra-large' %}80px{% else %}40px{% endif %};"></div>     
</section> 
{% endblock %}