{% extends "@ibexadesign/pagelayout.html.twig" %}

{% block page_head %}
    {% if content.fields.description is defined %}
        {% set description =  ibexa_field_value( content, 'description' ) %}
    {% else %}
        {% set description =  ibexa_content_name( content) %}
    {% endif %}
    {{ parent() }}
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('magazin_dossier') }}
{% endblock %}

{% block content %}
<div class="magazin-landingpage dossier pb-3">
    <div class="row position-relative">
        <div id="headerCarousel" class="carousel slide d-block lazy" data-ride="carousel">
            {{ ibexa_render_field(
                content, 'slider',
                { 'template': '@ibexadesign/fields/mainslider_field_templates.html.twig',
                    'parameters': {"carousel": 'headerCarousel'} }
            ) }}
        </div>
        <div class="dossiertextblock-outer">
            {% include "@ibexadesign/embed/_dossiercircle.html.twig" with { 'txt1_big': 'DOSSIER', 'txt2': ibexa_field_value(content, 'subtitle'), 'txt3_bold': ibexa_field_value(content, 'titel'), 'info': ibexa_field_value(content, 'title_description') } %}
        </div>
    </div>
    <hr>
    {% if not ibexa_field_is_empty( content, 'first_article' ) %}
        <div class="row mg-box mb-3 img-shadow">
            {{ render( controller( "ibexa_content:viewAction",
                {'contentId': ibexa_field_value(content, 'first_article').destinationContentId,
                    'viewType': 'teaser', 'noLayout': 1,"params": { "lineDesign": true }} ) ) }}
        </div>
        <hr />
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'praxistipps_article' ) %}
    <div class="row">
        <div class="col mg-box mb-3 mostviewed img-shadow">
            <h3 class="mt-3 mb-3">{{ ibexa_field_value(content, 'praxistipps_titel') }}</h3>
            <div class="row mb-3">
                {% for contentId in ibexa_field_value( content, 'praxistipps_article' ).destinationContentIds %}
                    <div class="col-md-4 mb-sm-4 pl-0 pl-md-3">
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": true, "hideImage": false, "colWidth": 12, "equalHeight": false }} ) ) }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'grey_article_left' ) and not ibexa_field_is_empty( content, 'grey_article_right' ) %}
    <div class="row-divider divider-white bg-grey pl-0 pl-md-3 pr-md-3 pr-0">
        <div class="col-divider col-divider-start">
            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value( content, 'grey_article_left' ).destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": false, "readmore": false, "hideImage": true, "colWidth": 12, "equalHeight": false }} ) ) }}
        </div>
        <div class="col-divider">
            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value( content, 'grey_article_right' ).destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": false,"readmore": false,  "hideImage": true, "colWidth": 12, "equalHeight": false }} ) ) }}
        </div>
    </div>
    <hr />
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'image_article' ) %}
        <div class="row">
            <div class="col">
                {{ render( controller( "ibexa_content:viewAction",
                    {'contentId': ibexa_field_value(content, 'image_article').destinationContentId,
                        'viewType': 'teaser', 'noLayout': 1,"params": { "imageDesignDossier": true}} ) ) }}
            </div>
        </div>
    {% endif %}
    {% if not ibexa_field_is_empty( content, 'eltern_link' ) %}
        {% set eltern_link = getSiteaccessUrlByContentId(ibexa_field_value(content, 'eltern_link').destinationContentId) %}
        <div class="dossier-icon-row mt-5 mb-3">
            <div class="icon pl-md-5 pl-lg-0">
                <a href="{{eltern_link}}">
                    {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"eltern_image_left").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'redesign_logo_max','minimalMarkup': 'true'}} ) ) }}
                </a>
            </div>
            <div class="slogan px-3 pr-md-5 pr-lg-0">
                <h3 class="text-center"><a class="specials" href="{{eltern_link}}">{{ ibexa_field_value(content, 'eltern_titel_long') }}<br/>{{ ibexa_field_value(content, 'eltern_titel_long_2') }}</a></h3>
            </div>
            <div class="text pt-3 pt-lg-0 pl-0 pl-lg-3 pr-3 eltern">
                <a class="details text-decoration-none" href="{{eltern_link}}">{{ ibexa_field_value(content, 'eltern_text') }}</a>
            </div>
        </div>
        <hr class="mt-0" />
    {% endif %}
    {% if not ibexa_field_is_empty( content, 'article_teaser_no_image' ) and not ibexa_field_is_empty( content, 'expertentipp_artikel' ) %}
        <div class="row mb-3">
            {% if not ibexa_field_is_empty( content, 'image_for_article_teaser_no_image' ) %}
            <div class="col-md-6 col-lg-4 copyright-left img-shadow">
                    {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"image_for_article_teaser_no_image").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'image400width'}} ) ) }}
            </div>
            <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
            {% else %}
                <div class="col-md-12 col-lg-8 mt-3 mt-md-0">
            {% endif %}
                {% if not ibexa_field_is_empty( content, 'article_teaser_no_image' ) %}
                    {{ render( controller( "ibexa_content:viewAction",
                        {'contentId': ibexa_field_value(content, 'article_teaser_no_image').destinationContentId,
                            'viewType': 'teaser', 'noLayout': 1,"params": { "fullDesign": true, "hideImage": true, "colWidth": 12, "equalHeight": false  }} ) ) }}
                {% endif %}
            </div>
            <div class="col-md-12 col-lg-4 mt-5 mt-lg-0">
                <div class="row h-100 standpunkt img-rounded mx-0 p-3">
                    {% if not ibexa_field_is_empty( content, 'expertentipp_artikel' ) %}
                    <div class="kolumne-marker w-100 pt-3"><a href="{{ path( "ibexa.url.alias", {"contentId": ibexa_field_value(content, 'expertentipp_artikel').destinationContentId} ) }}">
                            <h5>{{ ibexa_render_field(content, 'expertentipp_title') }}</h5></a></div>
                        {{ render( controller( "ibexa_content:viewAction",
                            {'contentId': ibexa_field_value(content, 'expertentipp_artikel').destinationContentId,
                                'viewType': 'teaser', 'noLayout': 1,"params": { "kolumneDesign": true  }} ) ) }}
                        {% if not ibexa_field_is_empty( content, 'expertentipp_portrait' ) %}
                        <a href="{{ path( "ibexa.url.alias", {"contentId": ibexa_field_value(content, 'expertentipp_artikel').destinationContentId } ) }}">
                            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"expertentipp_portrait").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'magazin_portrait_image_col2','hideText': 'true'}} ) ) }}
                        </a>
                        {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        <hr />

    {% endif %}
    {% if not ibexa_field_is_empty( content, 'videoteaser' ) %}
        <div class="row mt-3 m-1">
            <div class="col bg-black text-white p-0">
                {{ render( controller( "ibexa_content:viewAction",
                    {'contentId': ibexa_field_value(content, 'videoteaser').destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesignDossier": true, "hideImage": false, "colWidth": 12, "equalHeight": false }} ) ) }}
            </div>
        </div>
    {% endif %}
    {% if not ibexa_field_is_empty( content, 'dossier_slider' ) %}
         <div class="mt-3 mb-3">
            <div id="dossierCarousel" class="{% if not ibexa_field_is_empty(content, 'design_slider') %}design{{ ibexa_field_value(content, 'design_slider') }} {% endif %}carousel slide d-block lazy" data-ride="carousel" data-interval="false">
                {{ ibexa_render_field(
                    content, 'dossier_slider',
                    { 'template': _self,
                        'parameters': {"carousel": 'dossierCarousel'} }
                ) }}
            </div>
        </div>
    {% endif %}
    {% if not ibexa_field_is_empty( content, 'artikel_row_mediatipps' ) %}
    <div class="row-divider divider-black mt-3 pl-0 pr-0">
        <div class="col-divider col-divider-start pr-0 img-shadow">
            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value( content, 'artikel_row_mediatipps' ).destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": true, "readmore": false, "hideImage": false, "colWidth": 12, "equalHeight": false }} ) ) }}
        </div>

        <div class="col-divider pb-3 pt-3 pt-md-0 h-100 mb-0 ml-md-2 mediatips">
            <div class="row mt-3 mt-md-0">
                {% if not ibexa_field_is_empty( content, 'mediatips_link' ) %}
                    {% set url = getSiteaccessUrlParentByContentId(ibexa_field_value(content, 'mediatips_link').destinationContentId) %}
                    <div class="col-12 col-lg-4">
                        <a href="{{ url }}">
                            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"mediatips_link").destinationContentId, 'viewType': 'teaser', 'noLayout': true, 'params': {'dossierDesign': true,'alias': 'image400width'}} ) ) }}
                        </a>
                    </div>
                    <div class="col-12 col-lg-8 mt-3 mt-lg-0">
                        <a href="{{ url }}"><h3>{{ ibexa_render_field(content, 'mediatips_title') }}</h3></a>
                        <p>{{ ibexa_field_value(content, 'mediatips_text') }}</p>
                    </div>
                {% else %}
                    <div class="col">
                        <h3>{{ ibexa_render_field(content, 'mediatips_title') }}</h3>
                        <p>{{ ibexa_field_value(content, 'mediatips_text') }}</p>
                   </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if not ibexa_field_is_empty( content, 'survey_relation' ) %}
        {{ include('@ibexadesign/survey/landingpages.html.twig') }}
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'download' ) %}
        <hr class="mb-0"/>
        <div class="row mt-0 mostviewed">
            <div class="col mostviewed mt-3 mt-lg-0">
                <div class="download-head">
                    <h3>Download</h3>
                </div>
            </div>
            <div class="col-12">
                {{ render( controller( "ibexa_content:viewAction",
                    {'contentId': ibexa_field_value(content, 'download').destinationContentId,
                        'viewType': 'line', 'noLayout': 1, "params": {"inDossier": true}} ) ) }}
            </div>
        </div>
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'faqs_image_relation' ) %}
        <hr class="mb-0"/>
        <div class="row mt-0">
            <div class="faq-head col mt-3 mt-lg-0">
                <h2>{{ ibexa_field_value(content, 'faq_titel') }}</h2>
            </div>
            <div class="col-12">
            {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"faqs_image_relation").destinationContentId, 'viewType': 'embed', 'minimalLayout': true, 'params': {'minimalMarkup':true,'alias': 'full_width'}} ) ) }}
            </div>
        </div>
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'grey_article_left_2' ) and not ibexa_field_is_empty( content, 'grey_article_right_2' ) %}
        <div class="row-divider divider-white bg-grey pl-0 pl-md-3 pr-md-3 pr-0 mt-5">
            <div class="col-divider col-divider-start">
                {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value( content, 'grey_article_left_2' ).destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": false, "readmore": false, "hideImage": true, "colWidth": 12, "equalHeight": false }} ) ) }}
            </div>
            <div class="col-divider">
                {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value( content, 'grey_article_right_2' ).destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": false,"readmore": false,  "hideImage": true, "colWidth": 12, "equalHeight": false }} ) ) }}
            </div>
        </div>
    {% endif %}

    {% if not ibexa_field_is_empty( content, 'dossier_teaser_left' ) and not ibexa_field_is_empty( content, 'dossier_teaser_right' ) %}
        <hr />
        <div class="row mt-3">
            <div class="col-12 col-md-6 text-center pr-md-2 mb-3 mb-md-0">
                <div class="dossier-bg h-100 p-4 mb-3">
                    {{ ibexa_render_field(
                        content,
                        'dossier_teaser_left', {"template": _self}
                    ) }}
                </div>
            </div>
            <div class="col-12 col-md-6 text-center pl-md-2 mb-0">
                <div class="dossier-bg h-100 p-4">
                    {{ ibexa_render_field(
                        content,
                        'dossier_teaser_right', {"template": _self}
                    ) }}
                </div>
            </div>
        </div>
    {% endif %}

{% if not ibexa_field_is_empty( content, 'related_items' ) %}
    <hr/>
    <div class="row mt-3">
        <div class="col mg-box mb-3 mostviewed img-shadow pl-0 pl-md-3 pr-0 pr-md-3">
            <h3 class="mt-3 mb-3 ml-3 ml-md-0 mr-3 mr-md-0">{{ ibexa_field_value(content, 'related_items_titel') }}</h3>
            <div class="row mb-3">
                {% for contentId in ibexa_field_value( content, 'related_items' ).destinationContentIds %}
                    <div class="col-md-4 mb-sm-4 pr-3 pr-md-0">
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "fullDesign": true, "hideImage": false, "colWidth": 12, "equalHeight": false }} ) ) }}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %} 
</div>
{% endblock %}

{% block ezobjectrelation_field %}
    {% apply spaceless %}
        {% if not ibexa_field_is_empty( content, field ) %}
            {% if isValidContentId(field.value.destinationContentId) %}
                {{ render( controller( "ibexa_content:viewAction", {'contentId': field.value.destinationContentId, 'viewType': 'teaser', 'noLayout': 1, "params": { "dossierDesign": true}} ) ) }}
            {% endif %}
        {% endif %}
    {% endapply %}
{% endblock %}
{% block ezobjectrelationlist_field %}
    {% if not ibexa_field_is_empty( content, field ) %}
        {% if field.value.destinationContentIds|length > 1 %}
            <ol class="carousel-indicators">
            {% for contentId in field.value.destinationContentIds|slice(0, 10) %}
                <li data-target="#{{ parameters.carousel }}" data-slide-to="{{ loop.index - 1 }}"{% if loop.first %} class="active"{% endif %}>
            {% endfor %}
            </ol>
        {% endif %}
        <div class="carousel-inner">
        {% if not ibexa_field_is_empty(content, 'design_slider') and ibexa_field_value(content, 'design_slider') == 1 %} {# Firmung #}
            {% for contentId in field.value.destinationContentIds|slice(0, 5) %}
            {% if loop.index == 1 %}
                {% set cssClass = "slide" ~ loop.index %}
            {% elseif loop.index == 5 %}
                {% set cssClass = "slide-last" %}
            {% else %}
                {% set cssClass = "slide-a" %}
            {% endif %}
            {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'slider', 'noLayout': 0, "params": { "image_alias": "magazin_dossier_slider", "is_first": loop.first, "css": cssClass }} ) ) }}
            {% endfor %}
        {% else %}
            {% for contentId in field.value.destinationContentIds|slice(0, 10) %}
                {% if loop.index == 1 %}
                    {% set cssClass = "slide" ~ loop.index %}
                {% elseif loop.index == 10 %}
                    {% set cssClass = "slide" ~ loop.index %}
                {% elseif loop.index is even %}
                    {% set cssClass = "slide-a" %}
                {% elseif loop.index is odd %}
                    {% set cssClass = "slide-b" %}
                {% endif %}
                {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'slider', 'noLayout': 0, "params": { "image_alias": "magazin_dossier_slider", "is_first": loop.first, "css": cssClass }} ) ) }}
            {% endfor %}
        {% endif %}
        </div>
        {% if field.value.destinationContentIds|length > 1 %}
            <a class="carousel-control-prev" href="#{{ parameters.carousel }}" role="button" data-slide="prev">
                <i class="fas fa-angle-left" aria-hidden="true"></i>
                <span class="sr-only">Zurück</span>
            </a>
            <a class="carousel-control-next" href="#{{ parameters.carousel }}" role="button" data-slide="next">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
                <span class="sr-only">Vor</span>
            </a>
        {% endif %}
    {% endif %}
{% endblock %}