{% 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 headerimage %}
        <div class="image-wrapper">
            {% if true %}
                <video src="videos/ZUK_Intro.mp4" autoplay muted loop playsinline></video>
            {% elseif not ibexa_field_is_empty( content, 'mainvideo' ) %}
                {{ ibexa_render_field(content, 'mainvideo') }}
            {% else %}
            <picture>
                {% if not ibexa_field_is_empty( content, 'mainimage' ) %}
                    {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"mainimage").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'zuk_full_screen_width_full', 'minimalMarkup': 'true', 'srcmedia': 'min-width: 768px'}} ) ) }}
                {% endif %}
                {% if not ibexa_field_is_empty( content, 'mainimage_small' ) %}
                     <img src="{{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"mainimage_small").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'zuk_full_screen_width_small', 'minimalMarkup': 'true','backgroundimage':true}} ) ) }}">
                {% endif %}
            </picture>
            {% endif %}
        </div>
        <div class="text-wrapper mw-default text-white landingpagewrapper">
            <span class="h1 text-white mt-4">{{ ibexa_field_value(content, 'headline') }}</span>
            <h1><span class="h6 text-white">{{ ibexa_field_value(content, 'titletext') }}</span></h1>
            <p> <a href="{{ ibexa_field_value(content, 'linktarget') }}" class="btn btn-secondary">{{ ibexa_field_value(content, 'linktarget').text}}</a></p>
            {% if not ibexa_field_is_empty( content, 'linktarget_special' ) %}
            <p> <a href="{{ ibexa_field_value(content, 'linktarget_special') }}" class="btn btn-primary btn-special">{{ ibexa_field_value(content, 'linktarget_special').text}}</a></p>
            {% endif %}
        </div>
{% endblock %}

{% block content %}
{# christmas stuff start 2022
<div class="ce-tabs m-default mw-default mb-2">
    <div class="mw-default tab-content bg-white bg-opacity-50">
        <div class="row">
            <div class="col col-12 col-md-4 py-3 px-4 py-md-4 pe-md-3">
                <div style="background: url('{{ asset('../build/images/zuk/weihnachtskranz.jpg') }}') no-repeat; background-size: cover; min-height: 420px; display: flex; justify-content: center; align-items: center;">
                    <a href="https://www.zuk-bb.de/videos/ZUK_Weihnachten.mp4" alt="Video abspielen" target="_blank">
                        <img src="{{ asset('../build/images/zuk/play.png' ) }}" alt="Play" class="img-fluid" style="width: 50px; height: 50px;" />
                    </a>
                </div>
            </div>
            <div class="col col-12 col-md-8 py-3 px-4 py-md-4 ps-md-2 p-md-5">
                <h3 class="mt-0 mb-0 text-start">Frohe Weihnachten!</h3>
                <p style="font-size: 1.08rem;">Wir, die Mitarbeiterinnen und Mitarbeiter des ZUK, blicken auf ein ereignis- und arbeitsreiches Jahr zur&uuml;ck – und freuen uns darauf, in 2023 Umweltjugendbildung und Naturschutz zu verst&auml;rken und noch mehr Kinder und Jugendliche einzubinden. Wir danken allen, die uns und das ZUK unterst&uuml;tzen, und w&uuml;nschen Ihnen ein frohes Weihnachtsfest!</p>

                <p style="font-size: 1.08rem;">Als besonderen Weihnachtsgruß haben wir f&uuml;r Sie ein Weihnachtslied aufgenommen. Unsere Volont&auml;re musizieren und wir Mitarbeiterinnen und Mitarbeiter bilden den Chor. Das Gesangsprojekt war eine gewisse Herausforderung, denn wir haben keine geschulten Stimmen. Aber wir hoffen, dass unsere Weihnachtsw&uuml;nsche gut bei Ihnen ankommen!</P>
                <p style="font-size: 1.1rem;"><br/><strong>„MACHT HOCH DIE T&Uuml;R"</strong> – Die T&uuml;ren des ZUK sind auch in 2023 für Sie ge&ouml;ffnet – wir freuen uns auf Ihren Besuch!
                </p>
            </div>
        </div>
    </div>
</div>
christmas stuff end 2022 #}
{# christmas stuff start 2023
<div class="ce-tabs m-default mw-default mb-2">
    <div class="mw-default tab-content bg-white bg-opacity-50">
        <div class="row">
            <div class="col col-12 col-md-6 py-3 px-4 py-md-4 pe-md-3">
                <img src='{% image '@DonBoscoResponsiveBundle/Resources/public/images/zuk/Stern.jpg' %}{{ asset_url }}{% endimage %}' class="img-fluid" alt="Stern im ZUK" width="700" height="525" />
            </div>
            <div class="col col-12 col-md-6 py-3 px-4 py-md-4 ps-md-2 p-md-5">
                <h3 class="mt-0 mb-0 text-start">Frohe Weihnachten!</h3>
                <p style="font-size: 130%; hyphens: none;">Das Team des ZUK w&uuml;nscht ein fr&ouml;hliches Weihnachtsfest und einen guten Rutsch ins neue Jahr.</p>
                <p style="font-size: 130%; hyphens: none;">Wir freuen uns schon, 2024 wieder G&auml;ste bei uns im G&auml;stehaus zu begr&uuml;&szlig;en. Ab Ende Januar ist auch unser Bildungsprogramm online – schauen Sie gerne wieder vorbei!</p>
            </div>
        </div>
    </div>
</div>
christmas stuff end 2023 #}
{# new year stuff start
<div class="ce-tabs m-default mw-default mb-2">
    <div class="mw-default tab-content bg-white bg-opacity-50">
        <div class="row">
            <div class="col col-12 pt-4 pb-4 px-5">
                <img src="{% image '@DonBoscoResponsiveBundle/Resources/public/images/zuk/zuk-winter.jpg' %}{{ asset_url }}{% endimage %}" alt="Zentrum für Umwelt und Kultur im Winter" class="img-fluid" />
            </div>
            <div class="col col-12 pt-1 pb-3 px-5">
                <h3 class="mt-0 mb-0 text-start">Frohes neues Jahr!</h3>
                <p style="font-size: 1.1rem;">Wir, die Mitarbeiterinnen und Mitarbeiter des ZUK, blicken auf ein ereignis- und arbeitsreiches Jahr zur&uuml;ck – und freuen uns darauf, in 2023 Umweltjugendbildung und Naturschutz zu verst&auml;rken und noch mehr Kinder und Jugendliche einzubinden. Wir danken allen, die uns und das ZUK unterst&uuml;tzen, und w&uuml;nschen Ihnen ein ein gesundes und gl&uuml;ckliches neues Jahr!</p>

                <p style="font-size: 1.1rem;">Als besonderen Weihnachtsgruß hatten wir f&uuml;r Sie das Weihnachtslied „Macht hoch die Tür“ aufgenommen. Weihnachten ist vor&uuml;ber, und so ist dieser Gru&szlig; nun nicht mehr abrufbar.
                <br/><strong>„MACHT HOCH DIE T&Uuml;R"</strong> – Die T&uuml;ren des ZUK sind auch in 2023 für Sie ge&ouml;ffnet – wir freuen uns auf Ihren Besuch!
                </p>
            </div>
        </div>
    </div>
</div>
new year stuff end #}

{% if not ibexa_field_is_empty( content, "headline_special" ) and not ibexa_field_is_empty( content, "contenttext_special" ) %}
<div class="ce-text m-default mw-default mb-2">
    <h2 class="text-center mt-5">
        {{ ibexa_field_value(content, 'headline_special') }}
    </h2>
    {{ ibexa_render_field(content, 'contenttext_special') }}
</div>
{% endif %}

<div class="ce-text m-default mw-default mb-2">
    <h2 class="text-center mt-5">
        {{ ibexa_field_value(content, 'headline2') }}
    </h2>
    {{ ibexa_render_field(content, 'contentext') }}
</div>

<div class="ce-multiboxes m-default">
    <h2 class="mw-default text-center">
        {{ ibexa_field_value(content, 'headline_menuteaser') }}
    </h2>
    <div class="cards-wrapper">
        <div class="row g-2 g-md-4 justify-content-center">
            <div class="col col-12 col-md-6">
                <div class="card card-img-bg text-center bg-dark animatediv fadeInLeft">
                    {% if not ibexa_field_is_empty( content, "menuteaserimage1" ) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"menuteaserimage1").destinationContentId, 'viewType': 'embed', 'params': {'alias': 'imageTeaser800x400', 'minimalMarkup': true, 'showimgfluid': false}} ) ) }}
                    {% endif %}
                    <div class="card-header bg-transparent">
                        <span class="h5">
                            <span class="scale text-white">{{ ibexa_field_value( content, 'menuteasertitle1' ) }}</span>
                        </span>
                    </div>
                    <div class="card-body align-items-center d-flex text-white">
                        <p>{{ ibexa_render_field( content, 'menuteasertext1' ) }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <p><a href="{{ ibexa_field_value(content,'menuteaserlink1').link }}" class="text-white link-underlined">{{ ibexa_field_value(content,'menuteaserlink1').text }}</a></p>
                    </div>
                </div>
            </div>
            <div class="col col-12 col-md-6">
                <div class="card card-img-bg text-center bg-dark animatediv fadeInRight">
                    {% if not ibexa_field_is_empty( content, "menuteaserimage2" ) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"menuteaserimage2").destinationContentId, 'viewType': 'embed', 'params': {'alias': 'imageTeaser800x400', 'minimalMarkup': true, 'showimgfluid': false}} ) ) }}
                    {% endif %}
                    <div class="card-header bg-transparent">
                        <span class="h5">
                            <span class="scale text-white">{{ ibexa_field_value( content, 'menuteasertitle2' ) }}</span>
                        </span>
                    </div>
                    <div class="card-body align-items-center d-flex text-white">
                        <p>{{ ibexa_render_field( content, 'menuteasertext2' ) }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <p><a href="{{ ibexa_field_value(content,'menuteaserlink2').link }}" class="text-white link-underlined">{{ ibexa_field_value(content,'menuteaserlink2').text }}</a></p>
                    </div>
                </div>
            </div>
            <div class="col col-12 col-md-6 col-lg-4">
                <div class="card card-img-bg text-center bg-dark animatediv fadeInLeft h-xl">
                    {% if not ibexa_field_is_empty( content, "menuteaserimage3" ) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"menuteaserimage3").destinationContentId, 'viewType': 'embed', 'params': {'alias': 'imageTeaser800x400', 'minimalMarkup': true, 'showimgfluid': false}} ) ) }}
                    {% endif %}
                    <div class="card-header bg-transparent">
                        <span class="h5">
                            <span class="scale text-white">{{ ibexa_field_value( content, 'menuteasertitle3' ) }}</span>
                        </span>
                    </div>
                    <div class="card-body align-items-center d-flex text-white">
                        <p>{{ ibexa_render_field( content, 'menuteasertext3' ) }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <p><a href="{{ ibexa_field_value(content,'menuteaserlink3').link }}" class="text-white link-underlined">{{ ibexa_field_value(content,'menuteaserlink3').text }}</a></p>
                    </div>
                </div>
            </div>
            <div class="col col-12 col-md-6">
                <div class="card card-img-bg text-center bg-dark animatediv fadeInRight">
                    {% if not ibexa_field_is_empty( content, "menuteaserimage4" ) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"menuteaserimage4").destinationContentId, 'viewType': 'embed', 'params': {'alias': 'imageTeaser800x400', 'minimalMarkup': true, 'showimgfluid': false}} ) ) }}
                    {% endif %}
                    <div class="card-header bg-transparent">
                        <span class="h5">
                            <span class="scale text-white">{{ ibexa_field_value( content, 'menuteasertitle4' ) }}</span>
                        </span>
                    </div>
                    <div class="card-body align-items-center d-flex text-white">
                        <p>{{ ibexa_render_field( content, 'menuteasertext4' ) }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <p><a href="{{ ibexa_field_value(content,'menuteaserlink4').link }}" class="text-white link-underlined">{{ ibexa_field_value(content,'menuteaserlink4').text }}</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
    {{ render( controller(  "App\\Controller\\ZUKEventController::latestEventsList", {'limit':  3} ) ) }}

<!-- Content-Element: Personen-Carousel -->
<div class="ce-multipersons m-default mx-0">
    <div class="m-default mw-default my-0">
        <h2 class="text-center">{{ ibexa_field_value( content, 'testimonialsheadline' ) }}</h2>
    </div>
    <div class="splide splide-boxes pb-4">
        <div class="splide__track">
            <ul class="splide__list">
            {% for contentId in ibexa_field_value(content,"testimoniallist").destinationContentIds %}
                <li class="splide__slide py-3">
                    {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'teaser', 'noLayout': 0, "params": { "fullDesign": true }} ) ) }}
                </li>
        {% endfor %}
            </ul>
        </div>
    </div>
</div>


<div class="ce-text m-default mw-default mb-2">
    {{ ibexa_render_field(content, 'maincontent') }}
</div>
{% if isValidContentId(51957) %}
<div class="ce-multiboxes m-default">
    <h2 class="mw-default text-center"><a href="{{ getSiteaccessUrlByContentId(51957)}}">Aktuelles</a></h2>
    {{ render( controller(  "App\\Controller\\NewsController::latestNewsList", {'contentId':  51957 }) ) }}

</div>
{% endif %}

<div class="m-default">
    <div class="row g-2 g-md-4 g-lg-5 justify-content-between">
        <div class="col-12 col-md-6">
            {{ ibexa_render_field(content, 'bottom_left') }}
        </div>
        <div class="col-12 col-md-6 col-xl-5">
            <div id="mc_embed_signup"  class="ce-box">
                <h2 class="text-center">Newsletter</h2>
                <form action="https://zuk-bb.us6.list-manage.com/subscribe/post?u=c317abf8dd42555486284fcd0&amp;id=6276fcf4c2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll" class="card bg-transparent border border-primary border-2">
                        <div class="card-body text-center p-lg-5">
                            <span class="h5 card-title text-secondary mt-0">Entdecke unsere Neuigkeiten!</span>
                            <div class="mc-field-group mb-3">
                                <input type="email" value="" name="EMAIL" class="form-control required email" id="mce-EMAIL"  placeholder="E-Mail Adresse">
                            </div>
                            <div id="mce-responses" class="clear foot">
                                <div class="response" id="mce-error-response" style="display:none"></div>
                                <div class="response" id="mce-success-response" style="display:none"></div>
                            </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c317abf8dd42555486284fcd0_6276fcf4c2" tabindex="-1" value=""></div>
                            <input type="submit" value="Jetzt anmelden" name="subscribe" id="mc-embedded-subscribe" class="btn btn-secondary mb-3">
                            <p class="brandingLogo"><a href="https://eepurl.com/h6svzr" title="Mailchimp - email marketing made easy and fun"><img src="https://eep.io/mc-cdn-images/template_images/branding_logo_text_dark_dtp.svg"></a></p>
                        </div>
                    </div>
                </form>
            </div>
            {{ ibexa_render_field(content, 'bottom_right') }}
        </div>
    </div>
</div>

{% endblock %}

{% block ezobjectrelation_field %}
    {% apply spaceless %}
        {% if not ibexa_field_is_empty( content, field ) %}
            <div class="container pt-3 pb-3">
                <div class="row">
                    {{ render( controller( "ibexa_content:viewAction", {'contentId': field.value.destinationContentId, 'viewType': 'specialteaser', 'noLayout': 0 } ) ) }}
                </div>
            </div>
        {% endif %}
    {% endapply %}
{% endblock %}

{% block ezurl_field %}
    {% apply spaceless %}
        {% if not ibexa_field_is_empty( content, field ) %}
            <a href="{{ field.value.link }}"
                    {%  if parameters.target is defined and parameters.target=="_blank" %} target="_blank" {% endif %}>{{ field.value.text ? field.value.text : field.value.link }}</a>
        {% endif %}
    {% endapply %}
{% endblock %}