{% extends get_base_template() %}

{% block body %}
    <section class="article clearfix">
        {% if(api is defined) %}
        <article role="article" itemscope itemtype="http://schema.org/Article">
            {% if(api.nodes_active.image.url is defined and api.nodes_active.image.url != "") %}
                <header>
                <div class="mediaTop">
                    <div class="mediaTopImageItem">
                        <picture>
                                {{ api.nodes_active.image|imageloader }}
                        </picture>
                    </div>
                    <div class="mediaInfo">
                        <p class="mediaTitle">{{ api.nodes_active.image.title }}</p>
                    </div>
                </div>
                </header>
            {% endif %}

            {% if(api.sites is defined) %}
                {% if(api.sites.long is defined and api.sites.short is defined) %}
                 <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        {% if(api.sites.long is defined) %}
                            <li class="active">
                                <a href="#travel_guide_content_long" aria-controls="travel_guide_content_long" role="tab" data-toggle="tab">
                                    Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                                </a>
                            </li>
                        {% endif %}
                        {% if(api.sites.short is defined) %}
                        <li class="{% if(api.sites.long is not defined) %} active {% endif %}">
                            <a href="#travel_guide_content_short" aria-controls="travel_guide_content_short" role="tab" data-toggle="tab">
                                Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
                {% endif %}

                {% set site_has_h1 = false %}
                <div class="tab-content">
                    {% if(api.sites.long is defined) %}
                    <div role="tabpanel" class="tab-pane active" id="travel_guide_content_long">
                        {% if(site_has_h1) %}
                            <h2 class="h1l">{{ api.sites.long.name }}</h2>
                        {% else %}
                            <h1 itemprop="headline">{{ api.sites.long.name }}</h1>
                            {% set site_has_h1 = true %}
                        {% endif %}
                        {% if(api.sites.long.author_name is defined) %}
                            <div itemprop="author" itemscope itemtype="http://schema.org/Person">
                                <p class="author_name" itemprop="name" rel="author">Autor dieses Artikels: {{api.sites.long.author_name}}</p>
                                <p class="author_description" itemprop="description">{{api.sites.long.author_description}}</p>
                            </div>

                        {% endif %}
                        <section itemprop="articleBody">
                        {{ api.sites.long.full_text|raw|dkeywords|lozad }}
                        </section>
                    </div>
                    {% endif %}
                    {% if(api.sites.short is defined) %}
                    <div role="tabpanel" class="tab-pane {% if(api.sites.long is not defined) %} active {% endif %}" id="travel_guide_content_short">
                        {% if(site_has_h1) %}
                            <h2 class="h1l">{{ api.sites.short.name }}</h2>
                        {% else %}
                            <h1 itemprop="headline">{{ api.sites.short.name }}</h1>
                            {% set site_has_h1 = true %}
                        {% endif %}
                        {% if(api.sites.short.author_name is defined) %}
                            <div itemprop="author" itemscope itemtype="http://schema.org/Person">
                                <p class="author_name" itemprop="name" rel="author">Autor dieses Artikels: {{api.sites.short.author_name}}</p>
                                <p class="author_description" itemprop="description">{{api.sites.short.author_description}}</p>
                            </div>
                        {% endif %}
                        <section itemprop="articleBody">
                        {{ api.sites.short.full_text|raw|dkeywords|lozad }}
                        </section>
                    </div>
                    {% endif %}
                </div>

                {% if(api.sites.long is defined and api.sites.short is defined) %}
                <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        {% if(api.sites.long is defined) %}
                            <li class="active">
                                <a href="#travel_guide_content_long" aria-controls="travel_guide_content_long" role="tab" data-toggle="tab">
                                    Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                                </a>
                            </li>
                        {% endif %}
                        {% if(api.sites.short is defined) %}
                            <li class="{% if(api.sites.long is not defined) %} active {% endif %}">
                                <a href="#travel_guide_content_short" aria-controls="travel_guide_content_short" role="tab" data-toggle="tab">
                                    Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
                {% endif %}

                {% if(api.faqs is defined) %}
                    <section class="stern-faq" itemscope itemtype="https://schema.org/FAQPage">
                        <h2 class="h3 h3l">Häufige Fragen zu Urlaubsreisen in Ägypten</h2>
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    {% for faq in api.faqs %}
                        <div class="panel panel-default" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                            <div class="panel-heading" role="tab" id="headingFaq_{{ faq.id }}">
                                <h3 itemprop="name" class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFaq_{{ faq.id }}" aria-expanded="true" aria-controls="collapseFaq_{{ faq.id }}">
                                       ⭐ {{ faq.question }}
                                    </a>
                                </h3>
                            </div>
                            <div id="collapseFaq_{{ faq.id }}" class="panel-collapse collapse {% if(loop.index == 1) %} in {% endif %}" role="tabpanel" aria-labelledby="headingFaq_{{ faq.id }}" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                                <div class="panel-body" itemprop="text">
                                    {{ faq.answer_text|raw }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                    </section>

                {% endif %}
            {% endif %}
        </article>
        {% endif %}
    </section>
    <hr>
    {% if(api is defined and api.children is defined and api.children is not empty) %}
    <section class="clearfix">
        <div class="row">
            {% for child_page in api.children %}
                {% if(child_page.active) %}
                <div class="col-md-4 col-sm-6">
                    <div class="travel-wrapper get-box-link">
                        <div class="item text-left item-relative">
                            {% if(child_page.box_image_url is defined and child_page.box_image_url is not empty) %}
                                <div class="item-img item-absolute">
                                    <div class="img-background lozad" data-real-url="{{ child_page.box_image_url }}" data-background-image="{{  child_page.box_image_url }}" style="background-image:url({{ asset('images/placeholder-image.png') }});"></div>
                                </div>
                            {% endif %}
                            <div class="box_mid">

                                <div class="hl5">{{ child_page.name }}</div>
                            </div>
                            <a class="item-button is-box-link dobble_line" href="{{ child_page.url }}" title="{{ child_page.name }}">
                                <span>{{ child_page.name }}</span>
                            </a>
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
    {% endif %}
{% endblock %}