@cascade(["site"])
<div class="fixed bottom-0 z-10 hidden! w-full" x-ref="ipFilter">
    <div
        class="w-full"
        x-ref="ipFilterInner"
        x-data="ipFilter({
                    translations: @js($ip_filter_data["translations"]),
                    langMapping: @js($ip_filter_data["lang_mapping"]),
                    availableCountries: @js($ip_filter_data["available_countries"]),
                    currentSite: @js(config("sites." . $site . ".code")),
                    currentLocale: @js($ip_filter_data["current_locale"]),
                    isLocal: @js($is_local),
                    localSpoofCountry: @js($ip_filter_data["local_spoof_country"]),
                })"
    >
        <div
            id="ipFilterArea"
            class="container-1 w-full bg-brand-black"
            x-show="showView"
            x-transition:enter="transform transition duration-500 ease-out"
            x-transition:enter-start="translate-y-full"
            x-transition:enter-end="translate-y-0"
            x-transition:leave="transform transition duration-500 ease-in-out"
            x-transition:leave-start="translate-y-0 opacity-100"
            x-transition:leave-end="translate-y-full opacity-0"
        >
            <div class="relative flex flex-col-reverse justify-center gap-4 py-7 lg:flex-row-reverse lg:items-center">
                {{-- Country selector and continue button --}}
                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:pr-10">
                    <div
                        class="relative flex min-w-[275px] cursor-pointer items-center rounded-lg border border-[#505050]"
                    >
                        <template x-if="flagVisible">
                            <div class="flag pointer-events-none absolute left-4 z-50">
                                <img
                                    src="https://flagcdn.com/28x21/un.png"
                                    class="w-5 fill-white"
                                    alt="Country Flag"
                                    x-show="selectedCountry.code == 'XX'"
                                />
                                <img
                                    src=""
                                    :src="`https://flagcdn.com/28x21/${selectedCountry.code?.toLowerCase() ?? 'gb'}.png`"
                                    class="w-5 fill-white"
                                    alt="Country Flag"
                                    x-show="selectedCountry.code != 'XX'"
                                />
                            </div>
                        </template>
                        <select
                            id="ip_filter-country_select"
                            x-ref="countryCode"
                            @change="updateCountry($event.target.value)"
                            class="relative flex-1 cursor-pointer appearance-none rounded-lg bg-brand-black py-2.25 pr-2.5 pl-11.25 text-base text-white focus:ring-2 focus:ring-blue-600 focus:outline-1 focus:outline-offset-2 focus:outline-white"
                            tabindex="0"
                        >
                            <template x-for="country in availableCountries" :key="country.code">
                                <option
                                    :value="country.code"
                                    x-text="getTranslatedCountryName(country)"
                                    :selected="country.code === selectedCountry.code"
                                ></option>
                            </template>
                        </select>
                        <svg
                            class="pointer-events-none absolute right-4 ml-2 w-3 fill-white"
                            height="100%"
                            width="100%"
                            viewBox="0 0 14 9"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path d="M1.645 0L7 5.34333L12.355 0L14 1.645L7 8.645L0 1.645L1.645 0Z" />
                        </svg>
                    </div>
                    <button
                        id="ip_filter-continue"
                        class="button min-w-48 cursor-pointer rounded-lg border border-[#E1E1E1] bg-[#E1E1E1] p-2 text-center focus:ring-2 focus:ring-blue-600 focus:outline-1 focus:outline-offset-2 focus:outline-white"
                        @click="navigateTo(selectedCountry.public_url)"
                        tabindex="0"
                    >
                        <span class="text-base text-brand-black" x-text="__('mwb.continue')"></span>
                    </button>
                </div>
                {{-- Text and close button --}}
                <div class="flex justify-between gap-4 lg:w-1/2 lg:justify-end">
                    <p class="text-base text-white" x-text="__('mwb.ip_filter.local_site')"></p>
                    <button
                        id="ip_filter-dismiss"
                        class="top-4 right-4 cursor-pointer self-start rounded focus:ring-2 focus:ring-blue-600 focus:outline-1 focus:outline-offset-2 focus:outline-white lg:absolute lg:top-1/3"
                        @click="setCookie('ip_filter_hidden', 'true', 7);"
                        tabindex="0"
                    >
                        <svg
                            class="h-4 w-5 fill-white lg:h-3 lg:w-3.5"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 14 14"
                        >
                            <path
                                d="M14 1.4L12.6 0 7 5.6 1.4 0 0 1.4 5.6 7 0 12.6 1.4 14 7 8.4l5.6 5.6 1.4-1.4L8.4 7z"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        @env(["production", "staging"])
            <script>
                (function (g, e, o, t, a, r, ge, tl, y) {
                    t = g.getElementsByTagName(e)[0];
                    y = g.createElement(e);
                    y.async = true;
                    y.src =
                        'https://g1386590346.co/gl?id=' +
                        '{{ config("sites." . $site . ".geotargetly_id") }}' +
                        '&refurl=' +
                        g.referrer +
                        '&winurl=' +
                        encodeURIComponent(window.location);
                    t.parentNode.insertBefore(y, t);
                })(document, 'script');
            </script>
        @endenv
    </div>
</div>