{% if editmode %}
{% block scripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
{% block stylesheets %}
{{ encore_entry_link_tags('style') }}
{% endblock %}
{% block head_links %}
{{ pimcore_head_link() }}
{% endblock %}
<div class="m-5 shadow-card bg-gray-100 p-5">
<h3>Social Media Links</h3>
<div class="grid grid-cols-2 gap-5">
{% for i in pimcore_iterate_block(pimcore_block('nav-one')) %}
<div class="flest items-center justify-start gap-5">
<div>
{{ pimcore_link('link-' ~ i) }}
</div>
<div>
{{ pimcore_image('icon-' ~ i) }}
</div>
</div>
{% endfor %}
</div>
<p>
Facebook {{ pimcore_input('facebook', {
width: 400,
placeholder: 'facebook url'
}) }}
</p>
<p>
Instagram {{ pimcore_input('instagram', {
width: 400,
placeholder: 'instagram url'
}) }}
</p>
<p>
Youtube {{ pimcore_input('youtube', {
width: 400,
placeholder: 'youtube url'
}) }}
</p>
<p>
TikTok {{ pimcore_input('tiktok', {
width: 400,
placeholder: 'tiktok url'
}) }}
</p>
<p>
WhatsApp {{ pimcore_input('whatsapp', {
width: 400,
placeholder: 'whatsapp nummer'
}) }}
</p>
<p>
Mastodon {{ pimcore_input('mastodon', {
width: 400,
placeholder: 'mastodon url'
}) }}
</p>
</div>
<br>
<br>
{% else %}
<div class="z-10 flex relative items-center justify-between md:justify-end px-5 md:px-0">
{% for i in pimcore_iterate_block(pimcore_block('nav-one')) %}
<div class="flex-column">
{{ pimcore_link('nav-one-item' ~ i, { 'class': 'text-xs text-dark nav-main' }) }}
</div>
{% endfor %}
<div class="flex-column justify-end pl-5 pr-5 md:pr-0 text-ellipsis flex items-center gap-5 md:gap-2">
{% if pimcore_input('whatsapp') | length %}<div class="text-sm pr-3 hidden md:block"><b>WhatsApp</b> {{ pimcore_input('whatsapp') }}</div>{% endif %}
{% if pimcore_input('facebook') | length %}<a href="{{ pimcore_input('facebook') }}" target="_blank" class="inline-block hover:text-blue-light transition-all"><i class="icon-facebook"></i></a>{% endif %}
{% if pimcore_input('instagram') | length %}<a href="{{ pimcore_input('instagram') }}" target="_blank" class="inline-block hover:text-blue-light transition-all"><i class="icon-instagram"></i></a>{% endif %}
{% if pimcore_input('youtube') | length %}<a href="{{ pimcore_input('youtube') }}" target="_blank" class="inline-block hover:text-blue-light transition-all"><i class="icon-youtube"></i></a>{% endif %}
{% if pimcore_input('tiktok') | length %}<a href="{{ pimcore_input('tiktok') }}" target="_blank" class="inline-block hover:text-blue-light transition-all"><i class="icon-tiktok"></i></a>{% endif %}
{% if pimcore_input('mastodon') | length %}<a href="{{ pimcore_input('mastodon') }}" rel="me" target="_blank" class="inline-block hover:text-blue-light transition-all"><i class="icon-mastodon"></i></a>{% endif %}
</div>
<div class="flex-column pl-5">
<a href="#" onclick="window.openPlayer()" class="hover:text-white hover:bg-slate-600 transition-all block pl-3 pr-2 py-1 bg-blue-light text-white rounded-lg text-sm">
<div class="flex justify-start items-center text-white">
<div class="flex-auto font-bold ">
Jetzt live hören
</div>
<div class="flex-auto pl-3" style="line-height: 1em;">
<i class="icon-play text-2xl"></i>
</div>
</div>
</a>
</div>
</div>
{% endif %}