{% extends "enap_designsystem/base.html" %}
{% load static wagtailimages_tags wagtailcore_tags %}


{% block metadata %}
    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
{% endblock %}


{% block title %}
	<title>{{ page.title }}</title>
{% endblock %}


{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}


{% block navbar %}
    {% if enap_dynav %}
        {% include "enap_designsystem/blocks/dynamic_nav/dynamic_nav_include.html" %}
    {% elif page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% endif %}
{% endblock %}


{% block content %}
<section class="padding-mobile">
{% if self.banner_background_image %}
  {% image self.banner_background_image fill-1400x600 format-webp preserve-svg as bg_image %}
  <div class="banner" style="background-image: url({{ bg_image.url }})">
    <div class="banner__content">
        <div class="wrapper-texts-banner">
        <img src="{% static 'enap_designsystem/icons/grafismo.svg' %}" alt="Grafismo" class="grafismo">
        <h2 class="banner__title">{{ self.banner_title }}</h1>
        <h3 class="banner__description">{{ self.banner_description|richtext }}</h3>
    </div>
    </div>
  </div>
{% else %}
  <p>Banner não disponível.</p>
{% endif %}



<section class="wrapper-course-feature">
    <div class="container-medium">
        <div class="padding-global">
            <div style="width: 100%;" class="grid-two-columns">
                <div class="column-course">
                    <div>
                        <h2 class="title-green-small">{{ self.title_1 }}</h2>
                        <p class="paragraph-gray-medium">{{ self.description_1 }}</p>
                    </div>

                    <div>
                        <h2 class="title-green-small">{{ self.title_2 }}</h2>
                        <p class="paragraph-gray-medium">{{ self.description_2 }}</p>
                    </div>
                </div>
                <div class="wrapper-img-cursos">
                    {% if self.image %}
                        {% image self.image original format-webp class="img-cursos" %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    {% for block in page.feature_estrutura %}
        <div class="feature-course-block">
            {{ block }}
        </div>
    {% empty %}
    {% endfor %}
</section>


<section class="bg-green-60">
    <div class="container-medium">
        <div class="padding-global">
            <div class="col-01">
                <h2 class="title-green-large">{{ self.processo_title }}</h2>
                <p class="paragraph-white-medium">{{ self.processo_description }}</p>
            </div>
            <div class="grid-three">
                <div class="module">
                    <h3 class="title-white-small">{{ self.processo_module1_title }}</h3>
                    <p class="paragraph-white-medium">{{ self.processo_module1_description }}</p>
                </div>
                <div class="module">
                    <h3 class="title-white-small">{{ self.processo_module2_title }}</h3>
                    <p class="paragraph-white-medium">{{ self.processo_module2_description }}</p>
                </div>
                <div class="module">
                    <h3 class="title-white-small">{{ self.processo_module3_title }}</h3>
                    <p class="paragraph-white-medium">{{ self.processo_module3_description }}</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section>
    {% for block in page.team_carousel %}
        <div class="feature-course-block">
            {{ block }}
        </div>
    {% empty %}
    {% endfor %}
</section>



</section>
{% endblock %}


{% block footer %}
    {% include "enap_designsystem/includes/footer.html" %}
{% endblock %}