{{ share_link = "{{ current_url }}?utm_medium=social&utm_campaign=social share&utm_content=share&utm_source="
 | urlencode }}
<div class="flex w-full max-w-screen-md flex-col gap-2.5 self-center py-10">
    <h4 class="{{ background_color === '#004F59' ? 'text-white' : 'text-brand-black' }}">
        {{ social_sharing:share_text }}
    </h4>
    <div class="flex flex-wrap gap-3">
        {{ if social_sharing:facebook:show }}
            <a
                title="{{ social_sharing:facebook:share_text | urlencode }}"
                class="group"
                href="https://www.facebook.com/sharer/sharer.php?u={{ share_link }}facebook"
                target="_blank"
            >
                {{ svg src="images/icons/share/facebook.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
        {{ if social_sharing:whatsapp:show }}
            <a
                title="{{ social_sharing:whatsapp:share_text | urlencode }}"
                class="group"
                href="https://api.whatsapp.com/send?text={{ share_link }}whatsapp"
            >
                {{ svg src="images/icons/share/whatsapp.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
        {{ if social_sharing:telegram:show }}
            <a
                title="{{ social_sharing:telegram:share_text | urlencode }}"
                class="group"
                href="https://telegram.me/share/url?url={{ share_link }}telegram&text={{ share_text | urlencode }}"
                target="_blank"
            >
                {{ svg src="images/icons/share/telegram.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
        {{ if social_sharing:email:show }}
            <a
                title="{{ social_sharing:email:share_text | urlencode }}"
                class="group"
                href="mailto:?subject=&body={{ share_link }}email"
                target="_blank"
            >
                {{ svg src="images/icons/share/email.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
        {{ if social_sharing:x:show }}
            <a
                title="{{ social_sharing:x:share_text | urlencode }}"
                class="group"
                href="https://x.com/intent/post?text={{ share_link }}x"
                target="_blank"
            >
                {{ svg src="images/icons/share/x.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
        {{ if social_sharing:linkedin:show }}
            <a
                title="{{ social_sharing:linkedin:share_text | urlencode }}"
                class="group"
                href="https://www.linkedin.com/shareArticle?mini=true&url={{ share_link }}linkedin"
                target="_blank"
            >
                {{ svg src="images/icons/share/linkedin.svg" class="fill-brand-orange group-hover:fill-brand-orange-hover group-active:fill-brand-orange-active size-13.5" }}
            </a>
        {{ /if }}
    </div>
</div>