{% if editmode %}
{# styles only for editmode #}
<link rel="stylesheet" href="{{ asset('static/'~bundleName~'/css/styles.css') }}">
<link rel="stylesheet" href="{{ asset('static/'~bundleName~'/css/editmode.css') }}">
{% endif %}
<footer>
<div class="section row">
<div class="main-content flex-col box-center offset-single">
<div class="xs-12 flex-col">
<div class="col xs-12 m-3 l-3">
<div class="footer-box footer-link-list">
<h4> {{ pimcore_input("footerHeadlineOne") }}</h4>
<ul class="level-0">
{% for i in pimcore_iterate_block(pimcore_block('footerBlockOnelinks')) %}
<li>{{ pimcore_link('myLink', {'class': "footer-item"}) }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col xs-12 m-3 l-3">
<div class="footer-box footer-link-list">
<h4> {{ pimcore_input("footerHeadlineTwo") }}</h4>
<ul class="level-0">
{% for i in pimcore_iterate_block(pimcore_block('footerBlockTwolinks')) %}
<li>{{ pimcore_link('myLink', {'class': "footer-item"}) }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col xs-12 m-3 l-3">
<div class="footer-box footer-link-list">
<h4> {{ pimcore_input("footerHeadlineThree") }}</h4>
<ul>
{% for i in pimcore_iterate_block(pimcore_block('footerBlockThreelinks')) %}
<li>{{ pimcore_link('myLink', {'class': "footer-item"}) }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col xs-12 m-3 l-3">
<div class="footer-link-list">
<h4> {{ pimcore_input("footerHeadlineFour") }}</h4>
<ul>
{% for i in pimcore_iterate_block(pimcore_block('footerBlockFourlinks')) %}
<li>{{ pimcore_link('myLink', {'class': "footer-item"}) }}</li>
{% endfor %}
</ul>
{% if editmode %}
<div class="offset-top">
<div class="hint">
<div>{{ 'admin.footer.hint.socialMediaLinks' }}</div>
</div>
<div class="offset-bottom-single">
<label>Facebook URL</label><br>
{{ pimcore_link('facebookLink') }}
</div>
<div class="offset-bottom-single">
<label>Instagram URL</label><br>
{{ pimcore_link('instagramLink') }}
</div>
<div class="offset-bottom-single">
<label>Youtube URL</label><br>
{{ pimcore_link('youtubeLink') }}
</div>
</div>
{% else %}
<ul class="social-icons">
<li>
<a href="{{ pimcore_link('facebookLink').getHref() }}" alt="{{ pimcore_link('facebookLink').getText() }}" title="{{ pimcore_link('facebookLink').getText() }}" target="{{ pimcore_link('facebookLink').getTarget() }}" aria-label="facebook" rel="noopener">
<span class="icon facebook"></span>
</a>
</li>
<li>
<a href="{{ pimcore_link('instagramLink').getHref() }}" alt="{{ pimcore_link('instagramLink').getText() }}" title="{{ pimcore_link('instagramLink').getText() }}" target="{{ pimcore_link('instagramLink').getTarget() }}" aria-label="instagram" rel="noopener">
<span class="icon instagram"></span>
</a>
</li>
<li>
<a href="{{ pimcore_link('youtubeLink').getHref() }}" alt="{{ pimcore_link('youtubeLink').getText() }}" title="{{ pimcore_link('youtubeLink').getText() }}" target="{{ pimcore_link('youtubeLink').getTarget() }}" aria-label="youtube" rel="noopener">
<span class="icon youtube"></span>
</a>
</li>
</ul>
{% endif %}
</div>
</div>
<div class="col xs-12">
<div class="footer-text">
{{ pimcore_wysiwyg("footerTextMiddle", {
'placeholder': 'Footer Text'
}) }}
</div>
</div>
</div>
</div>
</div>
</footer>