{% extends "@ibexadesign/pagelayout.html.twig" %}
{% set hide_solgan = 'true' %}

{% block content %}
{# Rendering the whole "page" field, which is of ezpage fieldtype. #}
{# All zones and blocks will be rendered from here. #}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    {{ ibexa_render_field(
        content, 'slider',
        { 'template': _self }
    ) }}
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <i class="fas fa-angle-right" aria-hidden="true"></i>
        <span class="sr-only">Vor</span>
    </a>
    <a class="carousel-control-bottom" href="#landingpagecontent" role="button">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
        <span class="sr-only">Nach Unten</span>
    </a>

</div>
    {{ encore_entry_script_tags('kampagne-landingpage') }}
<div class="container landingpagecontent" id="landingpagecontent">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-3 offset-md-2">
            {% set image_alias = image_alias|default( "col3" ) %}
            {% set content_name = ibexa_content_name( content ) %}
            {{ ibexa_render_field(
                content,
                "image",
                {
                    "parameters": {"alias": image_alias, "alt": content_name}
                }
            ) }}
        </div>
        <div class="col-md-6">
            <h1 class="special">{{ ibexa_render_field( content, 'headline' ) }}</h1>
            {{ ibexa_render_field( content, 'content' ) }}
        </div>
    </div>
</div>
{% endblock %}
{% block ezobjectrelationlist_field %}
    {% apply spaceless %}
        {% if not ibexa_field_is_empty( content, field ) %}
            <ol class="carousel-indicators">
                {% for contentId in field.value.destinationContentIds %}
                    <li data-target="#myCarousel" data-slide-to="{{ loop.index - 1 }}"{% if loop.first %} class="active"{% endif %}>
                {% endfor %}
            </ol>

            <div class="carousel-inner">
            {% for contentId in field.value.destinationContentIds %}
                {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'embed', 'noLayout': 0, "params": { "is_first": loop.first, "link": ibexa_field_value( content, 'button_url' ) }} ) ) }}
            {% endfor %}
            </div>
        {% endif %}
    {% endapply %}
{% endblock %}