{{#
    @name WeChat Widget
    @desc 
#}}

<!-- /components/_wechat_widget.antlers.html -->
<div id="hs-custom-backdrop-offcanvas"
    class="hs-overlay hs-overlay-open:translate-x-0 hs-overlay-backdrop-open:bg-blue-950/90 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-neutral-800 dark:border-neutral-700"
    tabindex="-1">
    <div class="flex justify-between items-center py-3 px-4 border-b  bg-primary">
        <h3 class="font-bold text-white">
            Serengeti Green Tanzania
        </h3>
        <button type="button"
            class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700"
            data-hs-overlay="#hs-custom-backdrop-offcanvas">
            <span class="sr-only">Close modal</span>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18"></path>
                <path d="m6 6 12 12"></path>
            </svg>
        </button>
    </div>
    <div class="p-4">
        <p class="text-gray-800 text-sm">
            The QR Code For WeChat
        </p>
        <img src="{{theme:wechat_qr_code}}" alt="{{theme:wechat_qr_code:alt}}" />
    </div>
</div>
<!-- End: /components/_wechat_widget.antlers.html -->