{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="ep-contactnav">
    <a href="{f:uri.page(pageUid: settings.watchlistPageUid)}" class="bg-red watchlist" v-show="watchlistCount > 0" v-cloak>
        <span class="fa fa-list" aria-hidden="true"></span>
        <div>Merkliste ({{ watchlistCount }})</div>
    </a>
    <a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung">
        <span class="fa fa-phone" aria-hidden="true"></span>
        <div>{settings.phoneNumber}</div>
    </a>
    <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" target="_blank" class="bg-red whatsapp" title="Whatsapp">
        <span class="fa fa-whatsapp" aria-hidden="true"></span>
        <div>{settings.whatsApp} als Kontakt speichern</div>
    </a>
    <a href="{settings.facebookUrl}" class="bg-yellow facebook" target="_blank">
        <span class="fa fa-facebook" aria-hidden="true"></span>
        <div>Facebook</div>
    </a>
    <a href="{settings.instagramUrl}" class="bg-yellow instagram" target="_blank">
        <span class="fa fa-instagram" aria-hidden="true"></span>
        <div>Instagram</div>
    </a>
    <a href="{settings.youtubeUrl}" class="bg-yellow youtube" target="_blank">
        <span class="fa fa-youtube-play" aria-hidden="true"></span>
        <div>Youtube</div>
    </a>
    <f:if condition="{settings.englishPageUid}">
        <f:link.typolink parameter="{settings.englishPageUid}" title="English" class="bg-yellow english">
            <span><f:image src="EXT:ep_theme/Resources/Public/images/gb.png" alt="English" class="ep-contactnav__icon"/></span>
            <div>English</div>
        </f:link.typolink>
    </f:if>
</div>