Countries

<div>
    <div class="font-bold mb-4">International</div>
    <div class="flex flex-col w-full gap-y-1 field field-reserved">
        <div x-data="selectcountrySwitcher" class="input-wrapper input-wrapper-select flex flex-col relative w-full  ">

            <button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2 dropdown-country
                required
                
                " :class="selected ? 'option-selected' : ''">
                <label for="countrySwitcher" class="text-body-xs text-black/72 flex items-center sr-only">
                    <span>Séléctionnez...</span>
                </label>
                <span class="flex flex-row items-center gap-2">
                    <template x-if="selected && selected.type === 'leading-icon'">
                        <img :src="selected.image" :alt="selected.name">
                    </template>
                    <span x-text="selected ? selected.name : 'Séléctionnez...'">
                        Séléctionnez...
                    </span>
                </span>
                <span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
                    <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                    </svg> </span>
            </button>

            <div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
                <template x-for="option in options">
                    <div>
                        <template x-if="option.type === 'group'">
                            <div class="item-category text-brand-700 font-bold">
                                <div class="dropdown-item-category p-2">
                                    <span class="flex-1" x-text="option.name"></span>
                                </div>
                            </div>
                        </template>

                        <template x-if="option.type !== 'group'">
                            <div @click="select(option.id)" :class="option.checked ? 'selected' : ''">

                                <template x-if="option.href">
                                    <div>
                                        <a :href="option.href" class="dropdown-item cursor-pointer p-2">
                                            <template x-if="option.image">
                                                <img :src="option.image" :alt="option.name">
                                            </template>

                                            <span class="flex-1" x-text="option.name"></span>
                                            <template x-if="option.checked">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                    <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                                </svg>
                                            </template>
                                        </a>
                                    </div>
                                </template>

                                <template x-if="!option.href">
                                    <div class="dropdown-item cursor-pointer p-2">
                                        <template x-if="option.image">
                                            <img :src="option.image" :alt="option.name">
                                        </template>

                                        <span class="flex-1" x-text="option.name"></span>
                                        <template x-if="option.checked">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                            </svg>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <select class="sr-only required" id="countrySwitcher" required name="select" id="select">
                <option value="" selected disabled hidden></option>
                <option value="fr" selected="selected">France (€)</option>
                <option value="br">Brazil (R$)</option>
                <option value="sg">Singapore ($)</option>
            </select>
        </div>
    </div>

    <script>
        function selectcountrySwitcher() {
            return {
                rawOptions: [{
                    "value": "fr",
                    "text": "France (€)",
                    "href": "https://www.etatpur.fr/",
                    "type": "leading-icon",
                    "image": "/img/flags/fr.svg",
                    "selected": true
                }, {
                    "value": "br",
                    "text": "Brazil (R$)",
                    "href": "https://www.etatpur.com.br/",
                    "type": "leading-icon",
                    "image": "/img/flags/br.svg"
                }, {
                    "value": "sg",
                    "text": "Singapore ($)",
                    "href": "https://www.etatpur.sg/",
                    "type": "leading-icon",
                    "image": "/img/flags/sg.svg"
                }],
                options: [],
                show: false,
                selected: null,
                init() {
                    Array.from(this.rawOptions).forEach(option => {
                        if (!option.disabled) {
                            this.options.push({
                                id: option.value,
                                name: option.text,
                                checked: option.selected,
                                image: option.image,
                                href: option.href,
                                type: option.type,
                            })
                        }
                        if (option.selected && option.value) {
                            this.select(option.value);
                        }
                    });
                },
                openSelect() {
                    this.show = !this.show;
                },
                select(id) {
                    this.options = this.options.map(option => {
                        if (option.id === id) {
                            option.checked = true;
                            this.selected = option;
                        } else {
                            option.checked = false;
                        }
                        return option;
                    });
                    document.getElementById('countrySwitcher').value = this.selected.id;
                    this.show = false;
                }
            }
        }
    </script>
</div>