{%- import 'macros/svg.html.twig' as svg -%}

{%- set social_medias_block = pimcore_block('socialMedias') -%}

{%- if editmode -%}

    {%- for i in social_medias_block.iterator -%}

        <p>{{ pimcore_link('link', {
            disabledFields: ['anchor', 'title', 'target', 'parameters', 'accesskey', 'rel', 'tabindex', 'class', 'attributes']
        }) }}</p>
        <p>{{ pimcore_select('icon', {
            'store': [
                ['facebook', 'Facebook'],
                ['instagram', 'Instagram'],
                ['linkedin', 'LinkedIn'],
                ['x', 'X']
            ]
        }) }}</p>

    {%- endfor -%}

{%- else -%}

    <div class="d-flex flex-column gap-10">

        {%- for i in social_medias_block.iterator -%}

            {%- set link = pimcore_link('link') -%}
            {%- set icon = pimcore_select('icon') -%}
            {%- set icon_macro_options = {
                class: 'position-absolute top-50 start-50 translate-middle w-100 h-100'
            } -%}

            <a
                href="{{ link.getHref() }}"
                target="_blank"
                rel="noopener noreferrer"
                class="text-body text-decoration-none d-flex gap-15"
            >

                <span class="p-15 d-block position-relative">
                    {%- if icon == 'facebook' -%}
                        {{ svg.facebook(icon_macro_options) }}
                    {%- elseif icon == 'instagram' -%}
                        {{ svg.instagram(icon_macro_options) }}
                    {%- elseif icon == 'linkedin' -%}
                        {{ svg.linkedin(icon_macro_options) }}
                    {%- elseif icon == 'x' -%}
                        {{ svg.x(icon_macro_options) }}
                    {%- endif -%}
                </span>

                <span>{{ link.getText() }}</span>
                <span class="visually-hidden">{{ 'general.open_new_tab' | trans }}</span>

            </a>

        {%- endfor -%}

    </div>

{%- endif -%}