<div class="d-flex justify-content-center">
    <div class="px-4">
        <!-- Share Button (visible only on medium+ screens) -->
        <button type="button" class="btn btn-outline-primary" 
                data-bs-toggle="popover" data-bs-html="true" title="Share" data-bs-placement="top" data-bs-trigger="focus"
                data-bs-content='
                    {QR_CODE}
                    <div class="d-flex justify-content-between">
                        <a href="https://www.reddit.com/submit?type=LINK&url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg reddit"><i class="fa-brands fa-fw fa-reddit"></i></a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg facebook"><i class="fa-brands fa-fw fa-facebook"></i></a>
                        <a href="https://x.com/intent/tweet?url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg x-black"><i class="fa-brands fa-fw fa-x"></i></a>
                    </div>'>
            Share
        </button>
    </div>
</div>