{% extends get_base_template() %}

{% block body %}
    <section class="clearfix">
        {% if(page.travelGuideContentId) %}
            <div class="wrapper-nav-tabs">
                <ul class="nav nav-tabs nav-justified list-nav-tabs">
                    <li class="active">
                        <a href="#travel_guide_long_content" aria-controls="travel_guide_long_content" role="tab" data-toggle="tab">
                            Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                        </a>
                    </li>
                    <li>
                        <a href="#travel_guide_short_content" aria-controls="travel_guide_short_content" role="tab" data-toggle="tab">
                            Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="travel_guide_short_content">
                    {{ page.content|raw|keywords|lozad }}
                </div>
                <div role="tabpanel" class="tab-pane" id="travel_guide_long_content">
                    {{ travel_guide_content.fullText|raw|keywords|lozad }}
                </div>
            </div>

            <div class="wrapper-nav-tabs">
                <ul class="nav nav-tabs nav-justified list-nav-tabs">
                    <li class="active">
                        <a href="#travel_guide_long_content" aria-controls="travel_guide_long_content" role="tab" data-toggle="tab">
                            Ausführliche Darstellung <i class="hidden-xs">für Interessierte</i>
                        </a>
                    </li>
                    <li>
                        <a href="#travel_guide_short_content" aria-controls="travel_guide_short_content" role="tab" data-toggle="tab">
                            Zusammenfassung <i class="hidden-xs">für eilige Leser</i>
                        </a>
                    </li>
                </ul>
            </div>
        {% else %}
            {{ page.content|raw|keywords|lozad }}
        {% endif %}
    </section>
    <hr>
    {% if( page.children is not empty) %}
    <section class="clearfix">
        <h2>{{ page.title }}</h2>
        <div class="row">
            {% for child_page in page.children %}
                {% if(child_page.status) %}
                <div class="col-md-4 col-sm-6">
                    <div class="travel-wrapper get-box-link">
                        <div class="item text-left">
                            {% if(page.slug == 'reisefuehrer' ) %}
                            <div class="item-img" style="height: 220px;">
                                {% if child_page.boxImageUrl is not empty %}
                                    {% set image_url = child_page.boxImageUrl %}
                                    {% set image_alt = child_page.travelProgram.title|default(page.title) %}
                                {% 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.title }}</div>
                                <p>{{ child_page.boxBody ?? child_page.description }}</p>
                            </div>
                            <a class="item-button is-box-link dobble_line" href="{{ child_page.urlPath }}" title="{{ child_page.title }}">
                                <span>{{ child_page.title }}</span>
                            </a>
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
    {% endif %}
{% endblock %}