{namespace neos=Neos\Neos\ViewHelpers}

<footer
    class="c-site-footer {f:if(condition: '{altMetaMenu}', then: ' c-site-footer--elevated')}{f:if(condition: '{showLiveQuickaccess} && !{hideHeroLiveSectionAndQuickaccess}', then: ' c-site-footer--elevated-mobile')}"
>
    <div class="c-site-footer__container">
        <div class="c-site-footer__grid">
            <div class="c-site-footer__column">
                <f:if condition="{footerLogo}">
                    <f:then>
                        <f:if condition="{footerLogoLink}">
                            <a
                                href="{footerLogoLink}"
                                class="c-site-footer__logo-link"
                                target="_blank"
                                title="{footerLogoLinkTitle}"
                            >
                        </f:if>
                            <noscript>
                                <img
                                    src="{neos.media:uri.image(image: footerLogo)}"
                                    class="c-site-footer__logo"
                                    width="150c"
                                    alt="{pageTitle}">
                            </noscript>

                            <img
                                data-src="{neos.media:uri.image(image: footerLogo)}"
                                class="c-site-footer__logo lazyload"
                                width="150c"
                                alt="{pageTitle}">
                        <f:if condition="{footerLogoLink}">
                            </a>
                        </f:if>
                    </f:then>
                    <f:else>
                        <p class="c-site-footer__heading">
                            {footerTitleCompany}
                        </p>
                    </f:else>
                </f:if>
                <p class="c-site-footer__contact">
                    <strong>{companyName}</strong><br>
                    <f:if condition="{companyNameSecondRow}">
                        <strong>{companyNameSecondRow}</strong><br>
                    </f:if>
                    {companyAddress}
                    <f:if condition="{companyAddressSecondRow}">
                        <br>{companyAddressSecondRow}
                    </f:if>

                    <f:if condition="{openingTimesID} && {openingTimesAPIKey}">
                        <![CDATA[
                        <toubiz-widget
                            lang="de"
                            standalone-component="openingtimesLive"
                            class="toubiz-widget"
                            api-token="]]>{openingTimesAPIKey}<![CDATA["
                            base-uri="https://mein.toubiz.de"
                            standalone-component-props='{
                                "id": "]]>{openingTimesID}<![CDATA[",
                            }'
                            data-enable-router="false"
                        >
                        ]]>
                        </toubiz-widget>
                        <script src="https://widget.toubiz.de/js/stable/widget.js"></script>
                    </f:if>
                </p>
                <p class="c-site-footer__communication">
                    <f:if condition="{companyPhone}">
                        <a href="tel:{companyPhone}" class="c-site-footer__link" title="{f:translate(id: 'word.call', source: 'Main', package: 'Newland.CityTheme')}"><f:translate id="word.phone" package="Newland.CityTheme" source="Main"/> {companyPhone}</a>
                    </f:if>
                    <a href="mailto:{companyMail}" class="c-site-footer__link" title="{f:translate(id: 'word.email', source: 'Main', package: 'Newland.CityTheme')}">{companyMail}</a>
                </p>
            </div>

            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <div class="c-site-footer__column">
                        <p class="c-site-footer__heading">
                            {footerTitleButtons}
                        </p>
                        {footer.buttons -> f:format.raw()}
                    </div>
                </f:then>
                <f:else>
                    <div class="c-site-footer__column">
                        <f:if condition="{footer.hasButtons}">
                            <p class="c-site-footer__heading">
                                {footerTitleButtons}
                            </p>
                            {footer.buttons -> f:format.raw()}
                        </f:if>
                    </div>
                </f:else>
            </f:if>

            <div class="c-site-footer__column">
                <p class="c-site-footer__heading">
                    {footerTitleLinks}
                </p>
                <div class="c-site-footer__social-wrapper">
                    <ul class="c-site-footer__social">
                        <f:if condition="{facebookLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{facebookLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.facebook', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-facebook"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{instagramLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{instagramLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.instagram', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-instagram"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{twitterLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{twitterLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.twitter', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-twitter"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{youtubeLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{youtubeLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.youtube', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-youtube"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{tiktokLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{tiktokLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.tiktok', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-tiktok"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{pinterestLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{pinterestLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.pinterest', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-pinterest"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{xingLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{xingLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.xing', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-xing"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{linkedInLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{linkedInLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.linkedin', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-linkedin"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{komootLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{komootLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.komoot', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-komoot"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                        <f:if condition="{podcastLink}">
                            <li class="c-site-footer__social-element">
                                <a href="{podcastLink}" class="c-site-footer__link" target="_blank" title="{f:translate(id: 'word.podcast', source: 'Main', package: 'Newland.CityTheme')}">
                                    <svg class="c-icon c-site-footer__social-icon" alt="">
                                        <use xlink:href="#icon-microphone"></use>
                                    </svg>
                                </a>
                            </li>
                        </f:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="c-site-footer__bottom-wrapper {subFooterBackgroundColor}">
        <div class="c-site-footer__bottom">
            {parts.footerNavigation -> f:format.raw()}

            <div class="c-site-footer__partners">
                {footer.logos -> f:format.raw()}
            </div>
        </div>
    </div>
</footer>
