{% load css_tags %}{% block_css 'enap_designsystem/blocks/banner_topicos_block.css' %}
{% load wagtailimages_tags %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}
{% block content %}

<div class="formacao-carreiras-container" 
     {% if value.imagem_fundo %}
     style="background-image: url('{{ value.imagem_fundo.file.url }}');"
     {% endif %}>
    
    <div class="formacao-carreiras-overlay"></div>
    
    <div class="formacao-carreiras-content">
        <div class="formacao-content-max">
        <img src="{% static 'enap_designsystem/icons/grafismo.svg' %}" alt="Grafismo" class="grafismo">
        <h2 class="title-topics">{{ value.titulo }}</h2>
        <div class="formacao-carreiras-card">
            
            <div class="padding-16">
                <p class="periodo-info">{{ value.periodo_info }}</p>
                <p class="descricao">{{ value.descricao }}</p>
            </div>
            
            <div class="menu-items">
                {% for item in value.itens_menu %}
                    {% if item.block_type == 'item_link' %}
                    <div class="menu-item">
                        <a href="{{ item.value.url }}" class="menu-link" {% if item.value.abrir_nova_aba %}target="_blank" rel="noopener noreferrer"{% endif %}>
                            <div class="menu-title">{{ item.value.titulo }}</div>
                            <i class="fa-solid fa-circle-chevron-right"></i>
                        </a>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        </div>
    </div>
</div>

{% endblock %}