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

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

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'enap_designsystem/semanadeinovacao.css' %}">
{% endblock %}

{% block content %}

    <!-- Seção ENAP -->
    <section class="enap_semana">
        {% if page.enap_image %}
            {% for block in page.enap_image %}
                {% if block.block_type == 'imagem' %}
                    {% image block.value.imagem original as enap_img %}
                    <img src="{{ enap_img.url }}" alt="{{ enap_img.alt }}" class="logo-hero-img">
                {% endif %}
            {% endfor %}
        {% endif %}
        <div class="enap-content_semana">
            <h1>{{ page.enap_title }}</h1>
            {{ page.enap_description|richtext }}
        </div>
    </section>

    <!-- Seção Como Chegar -->
    <section class="how-to-get_semana">
        <div class="directions_semana">
            <h2>{{ page.directions_title }}</h2>

            {% if page.metro_title or page.metro_text %}
            <div class="transport-option_semana metro_semana">
                <h3>{{ page.metro_title }}</h3>
                <p>{{ page.metro_text }}</p>
            </div>
            {% endif %}

            {% if page.taxi_title or page.taxi_text %}
            <div class="transport-option_semana taxi_semana">
                <h3>{{ page.taxi_title }}</h3>
                <p>{{ page.taxi_text }}</p>
            </div>
            {% endif %}

            {% if page.bus_title or page.bus_text %}
            <div class="transport-option_semana bus_semana">
                <h3>{{ page.bus_title }}</h3>
                <p>{{ page.bus_text|linebreaks }}</p>
            </div>
            {% endif %}

            {% if page.special_title or page.special_text %}
            <div class="transport-option_semana special_semana">
                <h3>{{ page.special_title }}</h3>
                <p>{{ page.special_text }}</p>
            </div>
            {% endif %}
        </div>

        {% if page.map_image %}
            {% for block in page.map_image %}
                {% if block.block_type == 'imagem' %}
                    {% image block.value.imagem width-500 as map_img %}
                    <figure>
                        <img src="{{ map_img.url }}" alt="{{ block.value.alt_text|default:map_img.alt }}"
                             width="{{ map_img.width }}" height="{{ map_img.height }}">
                        {% if block.value.legenda %}
                            <figcaption>{{ block.value.legenda }}</figcaption>
                        {% endif %}
                    </figure>
                {% endif %}
            {% endfor %}
        {% endif %}
    </section>

{% endblock %}