{% extends get_base_template() %}

{% block body %}
    <section class="clearfix">
        {% if(api is defined) %}

            {% if api.sites|length > 1 %}
                <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        {% for site in api.sites %}
                            <li class="{% if loop.index==1 %} active {% endif %}">
                                <a href="#travel_guide_content_{{ site.id }}" aria-controls="travel_guide_content_{{ site.id }}" role="tab" data-toggle="tab">
                                    {% if(site.scope == 0) %}
                                        Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                                    {% else %}
                                        Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                                    {% endif %}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="tab-content">
                    {% for site in api.sites %}
                        <div role="tabpanel" class="tab-pane {% if loop.index==1 %} active {% endif %}" id="travel_guide_content_{{ site.id }}">
                            <h1>{{ site.name }}</h1>
                            {{ site.full_text|raw|keywords|lozad }}
                        </div>
                    {% endfor %}
                </div>

                <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        {% for site in api.sites %}
                            <li class="{% if loop.index==1 %} active {% endif %}">
                                <a href="#travel_guide_content_{{ site.id }}" aria-controls="travel_guide_content_{{ site.id }}" role="tab" data-toggle="tab">
                                    {% if(site.scope == 0) %}
                                        Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                                    {% else %}
                                        Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                                    {% endif %}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% else %}
                {% for site in api.sites %}
                    <h1>{{ site.name }}</h1>
                    {{ site.full_text|raw|keywords|lozad }}
                {% endfor %}
            {% endif %}
        {% endif %}
    </section>
    <hr>
    {% if(api is defined and api.children is defined and api.children is not empty) %}
    <section class="clearfix">
        <h2></h2>
        <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">
                            {% if(false and child_page.box_image_url is defined and child_page.box_image_url is not empty) %}
                            <div class="item-img" style="height: 220px;">
                                {% if child_page.box_image_url is defined and child_page.box_image_url is not empty %}
                                    {% set image_url = child_page.box_image_url %}
                                    {% set image_alt = child_page.name %}
                                {% else %}
                                    {% set image_url = asset('/bundles/app/images/no-picture.png')%}
                                    {% set image_alt = 'Kein Vorschaubild vorhanden' %}
                                {% endif %}
                                <div class="img-background lozad" data-background-image="{{  image(image_url|trim('/')).cropResize(960).guess(90) }}" style="background-image:url({{ asset('images/placeholder-image.png') }}); height: 220px;"></div>
                                <noscript>
                                    <img width="234" height="180" src="{{  image(image_url|trim('/')).cropResize(960).guess(90) }}" class="img-responsiv img-responsiv-item" style="">
                                </noscript>
                            </div>
                            {% endif %}
                            <div class="box_mid">
                                <div class="hl5">{{ child_page.name }}</div>
                                <p>{{ child_page.description }}</p>
                            </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 %}