<turbo-stream action="update" target="recovery_progress"><template><div class="hidden md:block max-w-4xl mx-auto px-4 sm:px-6 py-6">
  <div class="flex items-center justify-center lg:mb-8">
    <div class="flex items-center space-x-4">
      <!-- Step 1 -->
      <div class="flex items-center">
        <div class="w-8 h-8 text-white bg-orange-600 rounded-full flex items-center justify-center text-sm font-medium">
          1
        </div>
        <span class="ml-2 text-sm font-bold text-orange-600">Enter Details</span>
      </div>

      <!-- Connector -->
      <div class="w-16 h-0.5 bg-gray-300 relative">
        <div class="absolute inset-0 bg-cyan-500 progress-bar" style="--progress: 0%;"></div>
      </div>

      <!-- Step 2 -->
      <div class="flex items-center">
        <div class="w-8 h-8 text-gray-600 bg-gray-300 rounded-full flex items-center justify-center text-sm font-medium">
          2
        </div>
        <span class="ml-2 text-sm font-medium text-gray-500">Verify Identity</span>
      </div>

      <!-- Connector -->
      <div class="w-16 h-0.5 bg-gray-300 relative">
        <div class="absolute inset-0 bg-cyan-500 progress-bar" style="--progress: 0%;"></div>
      </div>

      <!-- Step 3 -->
      <div class="flex items-center">
        <div class="w-8 h-8 text-gray-600 bg-gray-300 rounded-full flex items-center justify-center text-sm font-medium">
          3
        </div>
        <span class="ml-2 text-sm font-medium text-gray-500">View Bookings</span>
      </div>
    </div>
  </div>
</div></template></turbo-stream><turbo-stream action="update" target="recovery_step_identity"><template>  <div class="card-hover professional-shadow hover:professional-shadow-hover bg-white rounded-lg cursor-pointer fade-in">
    <div class="rounded-lg bg-gradient-to-r from-teal-500 via-cyan-500 to-[#F47528] p-1">
      <div class="rounded-lg bg-white p-8">
        <div class="text-center mb-8 ">
          <div class="w-16 h-16 bg-cyan-50 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
          </div>
          <h2 class="text-2xl font-semibold text-gray-900">Enter Your Details</h2>
          <p class="text-gray-600 mt-2">Enter your registered phone number and email to access your bookings</p>
        </div>
        <form class="text-sm space-y-6 max-w-md mx-auto" data-turbo="true" data-turbo-stream="true" data-turbo-frame="recovery_content" data-controller="bookings" action="/customers/search" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="E4wc3jAPq4_s5rXgpJEOJHHwVDgc5WwZzNfwLKvUYHbw4qk9U2ky4uwqK6KXnb1mAj5EAM3_wxNjBE8lq19eRA" />
          <div class="space-y-3 mt-3">
<div data-controller="phone" class="relative w-full">
  <label class="capitalize font-medium block mb-3 min-w-fit" for="mobile_number">Mobile Number (without &#39;0&#39;)</label>
  <div class="flex rounded-sm shadow-sm">
    <!-- Trigger -->
    <button
      type="button"
      data-action="click->phone#toggle"
      class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600 rounded-s-md"
    >
      <span data-phone-target="selected">
        <span class='me-2'>🇬🇧</span> +44
      </span>
      <svg class="ms-2.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 8l4 4 4-4"/>
      </svg>
    </button>

    <!-- Phone input -->
    <input
      type="tel"
      name="customer[phone]"
      id="phone"
      value=""
      required
      minlength="5"
      maxlength="17"
      pattern="[0-9]{5,17}"
      placeholder=""
      class="py-3 px-4 block outline-none w-full text-gray-900 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 text-sm border border-s-0 border-e-md border-gray-200 rounded-e-md"
      
      data-action="keydown->phone#checkValid blur->phone#checkValid "
      />
  </div>

  <!-- Dropdown -->
  <div
    data-phone-target="dropdown"
    class="absolute z-20 mt-1 hidden w-full rounded-md bg-white shadow-lg border border-gray-200 max-h-72 overflow-y-auto"
  >
    <!-- 🔍 Search input -->
    <div class="p-2 border-b border-gray-200">
      <input
        type="text"
        placeholder="Search country..."
        data-phone-target="search"
        data-action="input->phone#filter"
        class="w-full px-3 py-1.5 text-sm text-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
    </div>

    <!-- 📃 Country list -->
    <div data-phone-target="list">
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AF"
          data-prefix-value="+93"
          data-name-value="Afghanistan"
          data-flag-value="🇦🇫"
          data-label="afghanistan +93"
        >
          <span class="mr-2">🇦🇫</span>
          <span>Afghanistan (+93)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AX"
          data-prefix-value="+358"
          data-name-value="Åland Islands"
          data-flag-value="🇦🇽"
          data-label="åland islands +358"
        >
          <span class="mr-2">🇦🇽</span>
          <span>Åland Islands (+358)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AL"
          data-prefix-value="+355"
          data-name-value="Albania"
          data-flag-value="🇦🇱"
          data-label="albania +355"
        >
          <span class="mr-2">🇦🇱</span>
          <span>Albania (+355)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DZ"
          data-prefix-value="+213"
          data-name-value="Algeria"
          data-flag-value="🇩🇿"
          data-label="algeria +213"
        >
          <span class="mr-2">🇩🇿</span>
          <span>Algeria (+213)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AS"
          data-prefix-value="+1684"
          data-name-value="American Samoa"
          data-flag-value="🇦🇸"
          data-label="american samoa +1684"
        >
          <span class="mr-2">🇦🇸</span>
          <span>American Samoa (+1684)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AD"
          data-prefix-value="+376"
          data-name-value="Andorra"
          data-flag-value="🇦🇩"
          data-label="andorra +376"
        >
          <span class="mr-2">🇦🇩</span>
          <span>Andorra (+376)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AO"
          data-prefix-value="+244"
          data-name-value="Angola"
          data-flag-value="🇦🇴"
          data-label="angola +244"
        >
          <span class="mr-2">🇦🇴</span>
          <span>Angola (+244)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AI"
          data-prefix-value="+1264"
          data-name-value="Anguilla"
          data-flag-value="🇦🇮"
          data-label="anguilla +1264"
        >
          <span class="mr-2">🇦🇮</span>
          <span>Anguilla (+1264)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AQ"
          data-prefix-value="+672"
          data-name-value="Antarctica"
          data-flag-value="🇦🇶"
          data-label="antarctica +672"
        >
          <span class="mr-2">🇦🇶</span>
          <span>Antarctica (+672)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AG"
          data-prefix-value="+1268"
          data-name-value="Antigua and Barbuda"
          data-flag-value="🇦🇬"
          data-label="antigua and barbuda +1268"
        >
          <span class="mr-2">🇦🇬</span>
          <span>Antigua and Barbuda (+1268)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AR"
          data-prefix-value="+54"
          data-name-value="Argentina"
          data-flag-value="🇦🇷"
          data-label="argentina +54"
        >
          <span class="mr-2">🇦🇷</span>
          <span>Argentina (+54)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AM"
          data-prefix-value="+374"
          data-name-value="Armenia"
          data-flag-value="🇦🇲"
          data-label="armenia +374"
        >
          <span class="mr-2">🇦🇲</span>
          <span>Armenia (+374)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AW"
          data-prefix-value="+297"
          data-name-value="Aruba"
          data-flag-value="🇦🇼"
          data-label="aruba +297"
        >
          <span class="mr-2">🇦🇼</span>
          <span>Aruba (+297)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AU"
          data-prefix-value="+61"
          data-name-value="Australia"
          data-flag-value="🇦🇺"
          data-label="australia +61"
        >
          <span class="mr-2">🇦🇺</span>
          <span>Australia (+61)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AT"
          data-prefix-value="+43"
          data-name-value="Austria"
          data-flag-value="🇦🇹"
          data-label="austria +43"
        >
          <span class="mr-2">🇦🇹</span>
          <span>Austria (+43)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AZ"
          data-prefix-value="+994"
          data-name-value="Azerbaijan"
          data-flag-value="🇦🇿"
          data-label="azerbaijan +994"
        >
          <span class="mr-2">🇦🇿</span>
          <span>Azerbaijan (+994)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BS"
          data-prefix-value="+1242"
          data-name-value="Bahamas"
          data-flag-value="🇧🇸"
          data-label="bahamas +1242"
        >
          <span class="mr-2">🇧🇸</span>
          <span>Bahamas (+1242)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BH"
          data-prefix-value="+973"
          data-name-value="Bahrain"
          data-flag-value="🇧🇭"
          data-label="bahrain +973"
        >
          <span class="mr-2">🇧🇭</span>
          <span>Bahrain (+973)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BD"
          data-prefix-value="+880"
          data-name-value="Bangladesh"
          data-flag-value="🇧🇩"
          data-label="bangladesh +880"
        >
          <span class="mr-2">🇧🇩</span>
          <span>Bangladesh (+880)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BB"
          data-prefix-value="+1246"
          data-name-value="Barbados"
          data-flag-value="🇧🇧"
          data-label="barbados +1246"
        >
          <span class="mr-2">🇧🇧</span>
          <span>Barbados (+1246)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BY"
          data-prefix-value="+375"
          data-name-value="Belarus"
          data-flag-value="🇧🇾"
          data-label="belarus +375"
        >
          <span class="mr-2">🇧🇾</span>
          <span>Belarus (+375)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BE"
          data-prefix-value="+32"
          data-name-value="Belgium"
          data-flag-value="🇧🇪"
          data-label="belgium +32"
        >
          <span class="mr-2">🇧🇪</span>
          <span>Belgium (+32)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BZ"
          data-prefix-value="+501"
          data-name-value="Belize"
          data-flag-value="🇧🇿"
          data-label="belize +501"
        >
          <span class="mr-2">🇧🇿</span>
          <span>Belize (+501)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BJ"
          data-prefix-value="+229"
          data-name-value="Benin"
          data-flag-value="🇧🇯"
          data-label="benin +229"
        >
          <span class="mr-2">🇧🇯</span>
          <span>Benin (+229)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BM"
          data-prefix-value="+1441"
          data-name-value="Bermuda"
          data-flag-value="🇧🇲"
          data-label="bermuda +1441"
        >
          <span class="mr-2">🇧🇲</span>
          <span>Bermuda (+1441)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BT"
          data-prefix-value="+975"
          data-name-value="Bhutan"
          data-flag-value="🇧🇹"
          data-label="bhutan +975"
        >
          <span class="mr-2">🇧🇹</span>
          <span>Bhutan (+975)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BO"
          data-prefix-value="+591"
          data-name-value="Bolivia, Plurinational State of bolivia"
          data-flag-value="🇧🇴"
          data-label="bolivia, plurinational state of bolivia +591"
        >
          <span class="mr-2">🇧🇴</span>
          <span>Bolivia, Plurinational State of bolivia (+591)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BA"
          data-prefix-value="+387"
          data-name-value="Bosnia and Herzegovina"
          data-flag-value="🇧🇦"
          data-label="bosnia and herzegovina +387"
        >
          <span class="mr-2">🇧🇦</span>
          <span>Bosnia and Herzegovina (+387)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BW"
          data-prefix-value="+267"
          data-name-value="Botswana"
          data-flag-value="🇧🇼"
          data-label="botswana +267"
        >
          <span class="mr-2">🇧🇼</span>
          <span>Botswana (+267)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BV"
          data-prefix-value="+47"
          data-name-value="Bouvet Island"
          data-flag-value="🇧🇻"
          data-label="bouvet island +47"
        >
          <span class="mr-2">🇧🇻</span>
          <span>Bouvet Island (+47)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BR"
          data-prefix-value="+55"
          data-name-value="Brazil"
          data-flag-value="🇧🇷"
          data-label="brazil +55"
        >
          <span class="mr-2">🇧🇷</span>
          <span>Brazil (+55)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IO"
          data-prefix-value="+246"
          data-name-value="British Indian Ocean Territory"
          data-flag-value="🇮🇴"
          data-label="british indian ocean territory +246"
        >
          <span class="mr-2">🇮🇴</span>
          <span>British Indian Ocean Territory (+246)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BN"
          data-prefix-value="+673"
          data-name-value="Brunei Darussalam"
          data-flag-value="🇧🇳"
          data-label="brunei darussalam +673"
        >
          <span class="mr-2">🇧🇳</span>
          <span>Brunei Darussalam (+673)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BG"
          data-prefix-value="+359"
          data-name-value="Bulgaria"
          data-flag-value="🇧🇬"
          data-label="bulgaria +359"
        >
          <span class="mr-2">🇧🇬</span>
          <span>Bulgaria (+359)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BF"
          data-prefix-value="+226"
          data-name-value="Burkina Faso"
          data-flag-value="🇧🇫"
          data-label="burkina faso +226"
        >
          <span class="mr-2">🇧🇫</span>
          <span>Burkina Faso (+226)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BI"
          data-prefix-value="+257"
          data-name-value="Burundi"
          data-flag-value="🇧🇮"
          data-label="burundi +257"
        >
          <span class="mr-2">🇧🇮</span>
          <span>Burundi (+257)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KH"
          data-prefix-value="+855"
          data-name-value="Cambodia"
          data-flag-value="🇰🇭"
          data-label="cambodia +855"
        >
          <span class="mr-2">🇰🇭</span>
          <span>Cambodia (+855)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CM"
          data-prefix-value="+237"
          data-name-value="Cameroon"
          data-flag-value="🇨🇲"
          data-label="cameroon +237"
        >
          <span class="mr-2">🇨🇲</span>
          <span>Cameroon (+237)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CA"
          data-prefix-value="+1"
          data-name-value="Canada"
          data-flag-value="🇨🇦"
          data-label="canada +1"
        >
          <span class="mr-2">🇨🇦</span>
          <span>Canada (+1)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CV"
          data-prefix-value="+238"
          data-name-value="Cape Verde"
          data-flag-value="🇨🇻"
          data-label="cape verde +238"
        >
          <span class="mr-2">🇨🇻</span>
          <span>Cape Verde (+238)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KY"
          data-prefix-value="+345"
          data-name-value="Cayman Islands"
          data-flag-value="🇰🇾"
          data-label="cayman islands +345"
        >
          <span class="mr-2">🇰🇾</span>
          <span>Cayman Islands (+345)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CF"
          data-prefix-value="+236"
          data-name-value="Central African Republic"
          data-flag-value="🇨🇫"
          data-label="central african republic +236"
        >
          <span class="mr-2">🇨🇫</span>
          <span>Central African Republic (+236)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TD"
          data-prefix-value="+235"
          data-name-value="Chad"
          data-flag-value="🇹🇩"
          data-label="chad +235"
        >
          <span class="mr-2">🇹🇩</span>
          <span>Chad (+235)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CL"
          data-prefix-value="+56"
          data-name-value="Chile"
          data-flag-value="🇨🇱"
          data-label="chile +56"
        >
          <span class="mr-2">🇨🇱</span>
          <span>Chile (+56)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CN"
          data-prefix-value="+86"
          data-name-value="China"
          data-flag-value="🇨🇳"
          data-label="china +86"
        >
          <span class="mr-2">🇨🇳</span>
          <span>China (+86)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CX"
          data-prefix-value="+61"
          data-name-value="Christmas Island"
          data-flag-value="🇨🇽"
          data-label="christmas island +61"
        >
          <span class="mr-2">🇨🇽</span>
          <span>Christmas Island (+61)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CC"
          data-prefix-value="+61"
          data-name-value="Cocos (Keeling) Islands"
          data-flag-value="🇨🇨"
          data-label="cocos (keeling) islands +61"
        >
          <span class="mr-2">🇨🇨</span>
          <span>Cocos (Keeling) Islands (+61)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CO"
          data-prefix-value="+57"
          data-name-value="Colombia"
          data-flag-value="🇨🇴"
          data-label="colombia +57"
        >
          <span class="mr-2">🇨🇴</span>
          <span>Colombia (+57)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KM"
          data-prefix-value="+269"
          data-name-value="Comoros"
          data-flag-value="🇰🇲"
          data-label="comoros +269"
        >
          <span class="mr-2">🇰🇲</span>
          <span>Comoros (+269)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CG"
          data-prefix-value="+242"
          data-name-value="Congo"
          data-flag-value="🇨🇬"
          data-label="congo +242"
        >
          <span class="mr-2">🇨🇬</span>
          <span>Congo (+242)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CD"
          data-prefix-value="+243"
          data-name-value="Congo, The Democratic Republic of the Congo"
          data-flag-value="🇨🇩"
          data-label="congo, the democratic republic of the congo +243"
        >
          <span class="mr-2">🇨🇩</span>
          <span>Congo, The Democratic Republic of the Congo (+243)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CK"
          data-prefix-value="+682"
          data-name-value="Cook Islands"
          data-flag-value="🇨🇰"
          data-label="cook islands +682"
        >
          <span class="mr-2">🇨🇰</span>
          <span>Cook Islands (+682)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CR"
          data-prefix-value="+506"
          data-name-value="Costa Rica"
          data-flag-value="🇨🇷"
          data-label="costa rica +506"
        >
          <span class="mr-2">🇨🇷</span>
          <span>Costa Rica (+506)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CI"
          data-prefix-value="+225"
          data-name-value="Cote d&#39;Ivoire"
          data-flag-value="🇨🇮"
          data-label="cote d&#39;ivoire +225"
        >
          <span class="mr-2">🇨🇮</span>
          <span>Cote d&#39;Ivoire (+225)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HR"
          data-prefix-value="+385"
          data-name-value="Croatia"
          data-flag-value="🇭🇷"
          data-label="croatia +385"
        >
          <span class="mr-2">🇭🇷</span>
          <span>Croatia (+385)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CU"
          data-prefix-value="+53"
          data-name-value="Cuba"
          data-flag-value="🇨🇺"
          data-label="cuba +53"
        >
          <span class="mr-2">🇨🇺</span>
          <span>Cuba (+53)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CY"
          data-prefix-value="+357"
          data-name-value="Cyprus"
          data-flag-value="🇨🇾"
          data-label="cyprus +357"
        >
          <span class="mr-2">🇨🇾</span>
          <span>Cyprus (+357)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CZ"
          data-prefix-value="+420"
          data-name-value="Czech Republic"
          data-flag-value="🇨🇿"
          data-label="czech republic +420"
        >
          <span class="mr-2">🇨🇿</span>
          <span>Czech Republic (+420)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DK"
          data-prefix-value="+45"
          data-name-value="Denmark"
          data-flag-value="🇩🇰"
          data-label="denmark +45"
        >
          <span class="mr-2">🇩🇰</span>
          <span>Denmark (+45)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DJ"
          data-prefix-value="+253"
          data-name-value="Djibouti"
          data-flag-value="🇩🇯"
          data-label="djibouti +253"
        >
          <span class="mr-2">🇩🇯</span>
          <span>Djibouti (+253)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DM"
          data-prefix-value="+1767"
          data-name-value="Dominica"
          data-flag-value="🇩🇲"
          data-label="dominica +1767"
        >
          <span class="mr-2">🇩🇲</span>
          <span>Dominica (+1767)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DO"
          data-prefix-value="+1849"
          data-name-value="Dominican Republic"
          data-flag-value="🇩🇴"
          data-label="dominican republic +1849"
        >
          <span class="mr-2">🇩🇴</span>
          <span>Dominican Republic (+1849)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="EC"
          data-prefix-value="+593"
          data-name-value="Ecuador"
          data-flag-value="🇪🇨"
          data-label="ecuador +593"
        >
          <span class="mr-2">🇪🇨</span>
          <span>Ecuador (+593)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="EG"
          data-prefix-value="+20"
          data-name-value="Egypt"
          data-flag-value="🇪🇬"
          data-label="egypt +20"
        >
          <span class="mr-2">🇪🇬</span>
          <span>Egypt (+20)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SV"
          data-prefix-value="+503"
          data-name-value="El Salvador"
          data-flag-value="🇸🇻"
          data-label="el salvador +503"
        >
          <span class="mr-2">🇸🇻</span>
          <span>El Salvador (+503)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GQ"
          data-prefix-value="+240"
          data-name-value="Equatorial Guinea"
          data-flag-value="🇬🇶"
          data-label="equatorial guinea +240"
        >
          <span class="mr-2">🇬🇶</span>
          <span>Equatorial Guinea (+240)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ER"
          data-prefix-value="+291"
          data-name-value="Eritrea"
          data-flag-value="🇪🇷"
          data-label="eritrea +291"
        >
          <span class="mr-2">🇪🇷</span>
          <span>Eritrea (+291)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="EE"
          data-prefix-value="+372"
          data-name-value="Estonia"
          data-flag-value="🇪🇪"
          data-label="estonia +372"
        >
          <span class="mr-2">🇪🇪</span>
          <span>Estonia (+372)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ET"
          data-prefix-value="+251"
          data-name-value="Ethiopia"
          data-flag-value="🇪🇹"
          data-label="ethiopia +251"
        >
          <span class="mr-2">🇪🇹</span>
          <span>Ethiopia (+251)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FK"
          data-prefix-value="+500"
          data-name-value="Falkland Islands (Malvinas)"
          data-flag-value="🇫🇰"
          data-label="falkland islands (malvinas) +500"
        >
          <span class="mr-2">🇫🇰</span>
          <span>Falkland Islands (Malvinas) (+500)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FO"
          data-prefix-value="+298"
          data-name-value="Faroe Islands"
          data-flag-value="🇫🇴"
          data-label="faroe islands +298"
        >
          <span class="mr-2">🇫🇴</span>
          <span>Faroe Islands (+298)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FJ"
          data-prefix-value="+679"
          data-name-value="Fiji"
          data-flag-value="🇫🇯"
          data-label="fiji +679"
        >
          <span class="mr-2">🇫🇯</span>
          <span>Fiji (+679)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FI"
          data-prefix-value="+358"
          data-name-value="Finland"
          data-flag-value="🇫🇮"
          data-label="finland +358"
        >
          <span class="mr-2">🇫🇮</span>
          <span>Finland (+358)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FR"
          data-prefix-value="+33"
          data-name-value="France"
          data-flag-value="🇫🇷"
          data-label="france +33"
        >
          <span class="mr-2">🇫🇷</span>
          <span>France (+33)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GF"
          data-prefix-value="+594"
          data-name-value="French Guiana"
          data-flag-value="🇬🇫"
          data-label="french guiana +594"
        >
          <span class="mr-2">🇬🇫</span>
          <span>French Guiana (+594)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PF"
          data-prefix-value="+689"
          data-name-value="French Polynesia"
          data-flag-value="🇵🇫"
          data-label="french polynesia +689"
        >
          <span class="mr-2">🇵🇫</span>
          <span>French Polynesia (+689)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TF"
          data-prefix-value="+262"
          data-name-value="French Southern Territories"
          data-flag-value="🇹🇫"
          data-label="french southern territories +262"
        >
          <span class="mr-2">🇹🇫</span>
          <span>French Southern Territories (+262)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GA"
          data-prefix-value="+241"
          data-name-value="Gabon"
          data-flag-value="🇬🇦"
          data-label="gabon +241"
        >
          <span class="mr-2">🇬🇦</span>
          <span>Gabon (+241)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GM"
          data-prefix-value="+220"
          data-name-value="Gambia"
          data-flag-value="🇬🇲"
          data-label="gambia +220"
        >
          <span class="mr-2">🇬🇲</span>
          <span>Gambia (+220)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GE"
          data-prefix-value="+995"
          data-name-value="Georgia"
          data-flag-value="🇬🇪"
          data-label="georgia +995"
        >
          <span class="mr-2">🇬🇪</span>
          <span>Georgia (+995)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="DE"
          data-prefix-value="+49"
          data-name-value="Germany"
          data-flag-value="🇩🇪"
          data-label="germany +49"
        >
          <span class="mr-2">🇩🇪</span>
          <span>Germany (+49)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GH"
          data-prefix-value="+233"
          data-name-value="Ghana"
          data-flag-value="🇬🇭"
          data-label="ghana +233"
        >
          <span class="mr-2">🇬🇭</span>
          <span>Ghana (+233)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GI"
          data-prefix-value="+350"
          data-name-value="Gibraltar"
          data-flag-value="🇬🇮"
          data-label="gibraltar +350"
        >
          <span class="mr-2">🇬🇮</span>
          <span>Gibraltar (+350)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GR"
          data-prefix-value="+30"
          data-name-value="Greece"
          data-flag-value="🇬🇷"
          data-label="greece +30"
        >
          <span class="mr-2">🇬🇷</span>
          <span>Greece (+30)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GL"
          data-prefix-value="+299"
          data-name-value="Greenland"
          data-flag-value="🇬🇱"
          data-label="greenland +299"
        >
          <span class="mr-2">🇬🇱</span>
          <span>Greenland (+299)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GD"
          data-prefix-value="+1473"
          data-name-value="Grenada"
          data-flag-value="🇬🇩"
          data-label="grenada +1473"
        >
          <span class="mr-2">🇬🇩</span>
          <span>Grenada (+1473)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GP"
          data-prefix-value="+590"
          data-name-value="Guadeloupe"
          data-flag-value="🇬🇵"
          data-label="guadeloupe +590"
        >
          <span class="mr-2">🇬🇵</span>
          <span>Guadeloupe (+590)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GU"
          data-prefix-value="+1671"
          data-name-value="Guam"
          data-flag-value="🇬🇺"
          data-label="guam +1671"
        >
          <span class="mr-2">🇬🇺</span>
          <span>Guam (+1671)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GT"
          data-prefix-value="+502"
          data-name-value="Guatemala"
          data-flag-value="🇬🇹"
          data-label="guatemala +502"
        >
          <span class="mr-2">🇬🇹</span>
          <span>Guatemala (+502)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GG"
          data-prefix-value="+44"
          data-name-value="Guernsey"
          data-flag-value="🇬🇬"
          data-label="guernsey +44"
        >
          <span class="mr-2">🇬🇬</span>
          <span>Guernsey (+44)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GN"
          data-prefix-value="+224"
          data-name-value="Guinea"
          data-flag-value="🇬🇳"
          data-label="guinea +224"
        >
          <span class="mr-2">🇬🇳</span>
          <span>Guinea (+224)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GW"
          data-prefix-value="+245"
          data-name-value="Guinea-Bissau"
          data-flag-value="🇬🇼"
          data-label="guinea-bissau +245"
        >
          <span class="mr-2">🇬🇼</span>
          <span>Guinea-Bissau (+245)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GY"
          data-prefix-value="+592"
          data-name-value="Guyana"
          data-flag-value="🇬🇾"
          data-label="guyana +592"
        >
          <span class="mr-2">🇬🇾</span>
          <span>Guyana (+592)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HT"
          data-prefix-value="+509"
          data-name-value="Haiti"
          data-flag-value="🇭🇹"
          data-label="haiti +509"
        >
          <span class="mr-2">🇭🇹</span>
          <span>Haiti (+509)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HM"
          data-prefix-value="+672"
          data-name-value="Heard Island and Mcdonald Islands"
          data-flag-value="🇭🇲"
          data-label="heard island and mcdonald islands +672"
        >
          <span class="mr-2">🇭🇲</span>
          <span>Heard Island and Mcdonald Islands (+672)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VA"
          data-prefix-value="+379"
          data-name-value="Holy See (Vatican City State)"
          data-flag-value="🇻🇦"
          data-label="holy see (vatican city state) +379"
        >
          <span class="mr-2">🇻🇦</span>
          <span>Holy See (Vatican City State) (+379)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HN"
          data-prefix-value="+504"
          data-name-value="Honduras"
          data-flag-value="🇭🇳"
          data-label="honduras +504"
        >
          <span class="mr-2">🇭🇳</span>
          <span>Honduras (+504)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HK"
          data-prefix-value="+852"
          data-name-value="Hong Kong"
          data-flag-value="🇭🇰"
          data-label="hong kong +852"
        >
          <span class="mr-2">🇭🇰</span>
          <span>Hong Kong (+852)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="HU"
          data-prefix-value="+36"
          data-name-value="Hungary"
          data-flag-value="🇭🇺"
          data-label="hungary +36"
        >
          <span class="mr-2">🇭🇺</span>
          <span>Hungary (+36)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IS"
          data-prefix-value="+354"
          data-name-value="Iceland"
          data-flag-value="🇮🇸"
          data-label="iceland +354"
        >
          <span class="mr-2">🇮🇸</span>
          <span>Iceland (+354)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IN"
          data-prefix-value="+91"
          data-name-value="India"
          data-flag-value="🇮🇳"
          data-label="india +91"
        >
          <span class="mr-2">🇮🇳</span>
          <span>India (+91)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ID"
          data-prefix-value="+62"
          data-name-value="Indonesia"
          data-flag-value="🇮🇩"
          data-label="indonesia +62"
        >
          <span class="mr-2">🇮🇩</span>
          <span>Indonesia (+62)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IR"
          data-prefix-value="+98"
          data-name-value="Iran, Islamic Republic of Persian Gulf"
          data-flag-value="🇮🇷"
          data-label="iran, islamic republic of persian gulf +98"
        >
          <span class="mr-2">🇮🇷</span>
          <span>Iran, Islamic Republic of Persian Gulf (+98)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IQ"
          data-prefix-value="+964"
          data-name-value="Iraq"
          data-flag-value="🇮🇶"
          data-label="iraq +964"
        >
          <span class="mr-2">🇮🇶</span>
          <span>Iraq (+964)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IE"
          data-prefix-value="+353"
          data-name-value="Ireland"
          data-flag-value="🇮🇪"
          data-label="ireland +353"
        >
          <span class="mr-2">🇮🇪</span>
          <span>Ireland (+353)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IM"
          data-prefix-value="+44"
          data-name-value="Isle of Man"
          data-flag-value="🇮🇲"
          data-label="isle of man +44"
        >
          <span class="mr-2">🇮🇲</span>
          <span>Isle of Man (+44)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IL"
          data-prefix-value="+972"
          data-name-value="Israel"
          data-flag-value="🇮🇱"
          data-label="israel +972"
        >
          <span class="mr-2">🇮🇱</span>
          <span>Israel (+972)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="IT"
          data-prefix-value="+39"
          data-name-value="Italy"
          data-flag-value="🇮🇹"
          data-label="italy +39"
        >
          <span class="mr-2">🇮🇹</span>
          <span>Italy (+39)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="JM"
          data-prefix-value="+1876"
          data-name-value="Jamaica"
          data-flag-value="🇯🇲"
          data-label="jamaica +1876"
        >
          <span class="mr-2">🇯🇲</span>
          <span>Jamaica (+1876)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="JP"
          data-prefix-value="+81"
          data-name-value="Japan"
          data-flag-value="🇯🇵"
          data-label="japan +81"
        >
          <span class="mr-2">🇯🇵</span>
          <span>Japan (+81)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="JE"
          data-prefix-value="+44"
          data-name-value="Jersey"
          data-flag-value="🇯🇪"
          data-label="jersey +44"
        >
          <span class="mr-2">🇯🇪</span>
          <span>Jersey (+44)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="JO"
          data-prefix-value="+962"
          data-name-value="Jordan"
          data-flag-value="🇯🇴"
          data-label="jordan +962"
        >
          <span class="mr-2">🇯🇴</span>
          <span>Jordan (+962)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KZ"
          data-prefix-value="+7"
          data-name-value="Kazakhstan"
          data-flag-value="🇰🇿"
          data-label="kazakhstan +7"
        >
          <span class="mr-2">🇰🇿</span>
          <span>Kazakhstan (+7)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KE"
          data-prefix-value="+254"
          data-name-value="Kenya"
          data-flag-value="🇰🇪"
          data-label="kenya +254"
        >
          <span class="mr-2">🇰🇪</span>
          <span>Kenya (+254)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KI"
          data-prefix-value="+686"
          data-name-value="Kiribati"
          data-flag-value="🇰🇮"
          data-label="kiribati +686"
        >
          <span class="mr-2">🇰🇮</span>
          <span>Kiribati (+686)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KP"
          data-prefix-value="+850"
          data-name-value="Korea, Democratic People&#39;s Republic of Korea"
          data-flag-value="🇰🇵"
          data-label="korea, democratic people&#39;s republic of korea +850"
        >
          <span class="mr-2">🇰🇵</span>
          <span>Korea, Democratic People&#39;s Republic of Korea (+850)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KR"
          data-prefix-value="+82"
          data-name-value="Korea, Republic of South Korea"
          data-flag-value="🇰🇷"
          data-label="korea, republic of south korea +82"
        >
          <span class="mr-2">🇰🇷</span>
          <span>Korea, Republic of South Korea (+82)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="XK"
          data-prefix-value="+383"
          data-name-value="Kosovo"
          data-flag-value="🇽🇰"
          data-label="kosovo +383"
        >
          <span class="mr-2">🇽🇰</span>
          <span>Kosovo (+383)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KW"
          data-prefix-value="+965"
          data-name-value="Kuwait"
          data-flag-value="🇰🇼"
          data-label="kuwait +965"
        >
          <span class="mr-2">🇰🇼</span>
          <span>Kuwait (+965)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KG"
          data-prefix-value="+996"
          data-name-value="Kyrgyzstan"
          data-flag-value="🇰🇬"
          data-label="kyrgyzstan +996"
        >
          <span class="mr-2">🇰🇬</span>
          <span>Kyrgyzstan (+996)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LA"
          data-prefix-value="+856"
          data-name-value="Laos"
          data-flag-value="🇱🇦"
          data-label="laos +856"
        >
          <span class="mr-2">🇱🇦</span>
          <span>Laos (+856)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LV"
          data-prefix-value="+371"
          data-name-value="Latvia"
          data-flag-value="🇱🇻"
          data-label="latvia +371"
        >
          <span class="mr-2">🇱🇻</span>
          <span>Latvia (+371)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LB"
          data-prefix-value="+961"
          data-name-value="Lebanon"
          data-flag-value="🇱🇧"
          data-label="lebanon +961"
        >
          <span class="mr-2">🇱🇧</span>
          <span>Lebanon (+961)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LS"
          data-prefix-value="+266"
          data-name-value="Lesotho"
          data-flag-value="🇱🇸"
          data-label="lesotho +266"
        >
          <span class="mr-2">🇱🇸</span>
          <span>Lesotho (+266)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LR"
          data-prefix-value="+231"
          data-name-value="Liberia"
          data-flag-value="🇱🇷"
          data-label="liberia +231"
        >
          <span class="mr-2">🇱🇷</span>
          <span>Liberia (+231)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LY"
          data-prefix-value="+218"
          data-name-value="Libyan Arab Jamahiriya"
          data-flag-value="🇱🇾"
          data-label="libyan arab jamahiriya +218"
        >
          <span class="mr-2">🇱🇾</span>
          <span>Libyan Arab Jamahiriya (+218)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LI"
          data-prefix-value="+423"
          data-name-value="Liechtenstein"
          data-flag-value="🇱🇮"
          data-label="liechtenstein +423"
        >
          <span class="mr-2">🇱🇮</span>
          <span>Liechtenstein (+423)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LT"
          data-prefix-value="+370"
          data-name-value="Lithuania"
          data-flag-value="🇱🇹"
          data-label="lithuania +370"
        >
          <span class="mr-2">🇱🇹</span>
          <span>Lithuania (+370)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LU"
          data-prefix-value="+352"
          data-name-value="Luxembourg"
          data-flag-value="🇱🇺"
          data-label="luxembourg +352"
        >
          <span class="mr-2">🇱🇺</span>
          <span>Luxembourg (+352)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MO"
          data-prefix-value="+853"
          data-name-value="Macao"
          data-flag-value="🇲🇴"
          data-label="macao +853"
        >
          <span class="mr-2">🇲🇴</span>
          <span>Macao (+853)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MK"
          data-prefix-value="+389"
          data-name-value="Macedonia"
          data-flag-value="🇲🇰"
          data-label="macedonia +389"
        >
          <span class="mr-2">🇲🇰</span>
          <span>Macedonia (+389)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MG"
          data-prefix-value="+261"
          data-name-value="Madagascar"
          data-flag-value="🇲🇬"
          data-label="madagascar +261"
        >
          <span class="mr-2">🇲🇬</span>
          <span>Madagascar (+261)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MW"
          data-prefix-value="+265"
          data-name-value="Malawi"
          data-flag-value="🇲🇼"
          data-label="malawi +265"
        >
          <span class="mr-2">🇲🇼</span>
          <span>Malawi (+265)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MY"
          data-prefix-value="+60"
          data-name-value="Malaysia"
          data-flag-value="🇲🇾"
          data-label="malaysia +60"
        >
          <span class="mr-2">🇲🇾</span>
          <span>Malaysia (+60)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MV"
          data-prefix-value="+960"
          data-name-value="Maldives"
          data-flag-value="🇲🇻"
          data-label="maldives +960"
        >
          <span class="mr-2">🇲🇻</span>
          <span>Maldives (+960)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ML"
          data-prefix-value="+223"
          data-name-value="Mali"
          data-flag-value="🇲🇱"
          data-label="mali +223"
        >
          <span class="mr-2">🇲🇱</span>
          <span>Mali (+223)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MT"
          data-prefix-value="+356"
          data-name-value="Malta"
          data-flag-value="🇲🇹"
          data-label="malta +356"
        >
          <span class="mr-2">🇲🇹</span>
          <span>Malta (+356)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MH"
          data-prefix-value="+692"
          data-name-value="Marshall Islands"
          data-flag-value="🇲🇭"
          data-label="marshall islands +692"
        >
          <span class="mr-2">🇲🇭</span>
          <span>Marshall Islands (+692)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MQ"
          data-prefix-value="+596"
          data-name-value="Martinique"
          data-flag-value="🇲🇶"
          data-label="martinique +596"
        >
          <span class="mr-2">🇲🇶</span>
          <span>Martinique (+596)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MR"
          data-prefix-value="+222"
          data-name-value="Mauritania"
          data-flag-value="🇲🇷"
          data-label="mauritania +222"
        >
          <span class="mr-2">🇲🇷</span>
          <span>Mauritania (+222)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MU"
          data-prefix-value="+230"
          data-name-value="Mauritius"
          data-flag-value="🇲🇺"
          data-label="mauritius +230"
        >
          <span class="mr-2">🇲🇺</span>
          <span>Mauritius (+230)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="YT"
          data-prefix-value="+262"
          data-name-value="Mayotte"
          data-flag-value="🇾🇹"
          data-label="mayotte +262"
        >
          <span class="mr-2">🇾🇹</span>
          <span>Mayotte (+262)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MX"
          data-prefix-value="+52"
          data-name-value="Mexico"
          data-flag-value="🇲🇽"
          data-label="mexico +52"
        >
          <span class="mr-2">🇲🇽</span>
          <span>Mexico (+52)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="FM"
          data-prefix-value="+691"
          data-name-value="Micronesia, Federated States of Micronesia"
          data-flag-value="🇫🇲"
          data-label="micronesia, federated states of micronesia +691"
        >
          <span class="mr-2">🇫🇲</span>
          <span>Micronesia, Federated States of Micronesia (+691)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MD"
          data-prefix-value="+373"
          data-name-value="Moldova"
          data-flag-value="🇲🇩"
          data-label="moldova +373"
        >
          <span class="mr-2">🇲🇩</span>
          <span>Moldova (+373)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MC"
          data-prefix-value="+377"
          data-name-value="Monaco"
          data-flag-value="🇲🇨"
          data-label="monaco +377"
        >
          <span class="mr-2">🇲🇨</span>
          <span>Monaco (+377)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MN"
          data-prefix-value="+976"
          data-name-value="Mongolia"
          data-flag-value="🇲🇳"
          data-label="mongolia +976"
        >
          <span class="mr-2">🇲🇳</span>
          <span>Mongolia (+976)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ME"
          data-prefix-value="+382"
          data-name-value="Montenegro"
          data-flag-value="🇲🇪"
          data-label="montenegro +382"
        >
          <span class="mr-2">🇲🇪</span>
          <span>Montenegro (+382)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MS"
          data-prefix-value="+1664"
          data-name-value="Montserrat"
          data-flag-value="🇲🇸"
          data-label="montserrat +1664"
        >
          <span class="mr-2">🇲🇸</span>
          <span>Montserrat (+1664)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MA"
          data-prefix-value="+212"
          data-name-value="Morocco"
          data-flag-value="🇲🇦"
          data-label="morocco +212"
        >
          <span class="mr-2">🇲🇦</span>
          <span>Morocco (+212)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MZ"
          data-prefix-value="+258"
          data-name-value="Mozambique"
          data-flag-value="🇲🇿"
          data-label="mozambique +258"
        >
          <span class="mr-2">🇲🇿</span>
          <span>Mozambique (+258)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MM"
          data-prefix-value="+95"
          data-name-value="Myanmar"
          data-flag-value="🇲🇲"
          data-label="myanmar +95"
        >
          <span class="mr-2">🇲🇲</span>
          <span>Myanmar (+95)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NA"
          data-prefix-value="+264"
          data-name-value="Namibia"
          data-flag-value="🇳🇦"
          data-label="namibia +264"
        >
          <span class="mr-2">🇳🇦</span>
          <span>Namibia (+264)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NR"
          data-prefix-value="+674"
          data-name-value="Nauru"
          data-flag-value="🇳🇷"
          data-label="nauru +674"
        >
          <span class="mr-2">🇳🇷</span>
          <span>Nauru (+674)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NP"
          data-prefix-value="+977"
          data-name-value="Nepal"
          data-flag-value="🇳🇵"
          data-label="nepal +977"
        >
          <span class="mr-2">🇳🇵</span>
          <span>Nepal (+977)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NL"
          data-prefix-value="+31"
          data-name-value="Netherlands"
          data-flag-value="🇳🇱"
          data-label="netherlands +31"
        >
          <span class="mr-2">🇳🇱</span>
          <span>Netherlands (+31)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AN"
          data-prefix-value="+599"
          data-name-value="Netherlands Antilles"
          data-flag-value=""
          data-label="netherlands antilles +599"
        >
          <span class="mr-2"></span>
          <span>Netherlands Antilles (+599)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NC"
          data-prefix-value="+687"
          data-name-value="New Caledonia"
          data-flag-value="🇳🇨"
          data-label="new caledonia +687"
        >
          <span class="mr-2">🇳🇨</span>
          <span>New Caledonia (+687)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NZ"
          data-prefix-value="+64"
          data-name-value="New Zealand"
          data-flag-value="🇳🇿"
          data-label="new zealand +64"
        >
          <span class="mr-2">🇳🇿</span>
          <span>New Zealand (+64)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NI"
          data-prefix-value="+505"
          data-name-value="Nicaragua"
          data-flag-value="🇳🇮"
          data-label="nicaragua +505"
        >
          <span class="mr-2">🇳🇮</span>
          <span>Nicaragua (+505)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NE"
          data-prefix-value="+227"
          data-name-value="Niger"
          data-flag-value="🇳🇪"
          data-label="niger +227"
        >
          <span class="mr-2">🇳🇪</span>
          <span>Niger (+227)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NG"
          data-prefix-value="+234"
          data-name-value="Nigeria"
          data-flag-value="🇳🇬"
          data-label="nigeria +234"
        >
          <span class="mr-2">🇳🇬</span>
          <span>Nigeria (+234)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NU"
          data-prefix-value="+683"
          data-name-value="Niue"
          data-flag-value="🇳🇺"
          data-label="niue +683"
        >
          <span class="mr-2">🇳🇺</span>
          <span>Niue (+683)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NF"
          data-prefix-value="+672"
          data-name-value="Norfolk Island"
          data-flag-value="🇳🇫"
          data-label="norfolk island +672"
        >
          <span class="mr-2">🇳🇫</span>
          <span>Norfolk Island (+672)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MP"
          data-prefix-value="+1670"
          data-name-value="Northern Mariana Islands"
          data-flag-value="🇲🇵"
          data-label="northern mariana islands +1670"
        >
          <span class="mr-2">🇲🇵</span>
          <span>Northern Mariana Islands (+1670)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="NO"
          data-prefix-value="+47"
          data-name-value="Norway"
          data-flag-value="🇳🇴"
          data-label="norway +47"
        >
          <span class="mr-2">🇳🇴</span>
          <span>Norway (+47)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="OM"
          data-prefix-value="+968"
          data-name-value="Oman"
          data-flag-value="🇴🇲"
          data-label="oman +968"
        >
          <span class="mr-2">🇴🇲</span>
          <span>Oman (+968)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PK"
          data-prefix-value="+92"
          data-name-value="Pakistan"
          data-flag-value="🇵🇰"
          data-label="pakistan +92"
        >
          <span class="mr-2">🇵🇰</span>
          <span>Pakistan (+92)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PW"
          data-prefix-value="+680"
          data-name-value="Palau"
          data-flag-value="🇵🇼"
          data-label="palau +680"
        >
          <span class="mr-2">🇵🇼</span>
          <span>Palau (+680)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PS"
          data-prefix-value="+970"
          data-name-value="Palestinian Territory, Occupied"
          data-flag-value="🇵🇸"
          data-label="palestinian territory, occupied +970"
        >
          <span class="mr-2">🇵🇸</span>
          <span>Palestinian Territory, Occupied (+970)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PA"
          data-prefix-value="+507"
          data-name-value="Panama"
          data-flag-value="🇵🇦"
          data-label="panama +507"
        >
          <span class="mr-2">🇵🇦</span>
          <span>Panama (+507)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PG"
          data-prefix-value="+675"
          data-name-value="Papua New Guinea"
          data-flag-value="🇵🇬"
          data-label="papua new guinea +675"
        >
          <span class="mr-2">🇵🇬</span>
          <span>Papua New Guinea (+675)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PY"
          data-prefix-value="+595"
          data-name-value="Paraguay"
          data-flag-value="🇵🇾"
          data-label="paraguay +595"
        >
          <span class="mr-2">🇵🇾</span>
          <span>Paraguay (+595)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PE"
          data-prefix-value="+51"
          data-name-value="Peru"
          data-flag-value="🇵🇪"
          data-label="peru +51"
        >
          <span class="mr-2">🇵🇪</span>
          <span>Peru (+51)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PH"
          data-prefix-value="+63"
          data-name-value="Philippines"
          data-flag-value="🇵🇭"
          data-label="philippines +63"
        >
          <span class="mr-2">🇵🇭</span>
          <span>Philippines (+63)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PN"
          data-prefix-value="+64"
          data-name-value="Pitcairn"
          data-flag-value="🇵🇳"
          data-label="pitcairn +64"
        >
          <span class="mr-2">🇵🇳</span>
          <span>Pitcairn (+64)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PL"
          data-prefix-value="+48"
          data-name-value="Poland"
          data-flag-value="🇵🇱"
          data-label="poland +48"
        >
          <span class="mr-2">🇵🇱</span>
          <span>Poland (+48)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PT"
          data-prefix-value="+351"
          data-name-value="Portugal"
          data-flag-value="🇵🇹"
          data-label="portugal +351"
        >
          <span class="mr-2">🇵🇹</span>
          <span>Portugal (+351)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PR"
          data-prefix-value="+1939"
          data-name-value="Puerto Rico"
          data-flag-value="🇵🇷"
          data-label="puerto rico +1939"
        >
          <span class="mr-2">🇵🇷</span>
          <span>Puerto Rico (+1939)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="QA"
          data-prefix-value="+974"
          data-name-value="Qatar"
          data-flag-value="🇶🇦"
          data-label="qatar +974"
        >
          <span class="mr-2">🇶🇦</span>
          <span>Qatar (+974)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="RO"
          data-prefix-value="+40"
          data-name-value="Romania"
          data-flag-value="🇷🇴"
          data-label="romania +40"
        >
          <span class="mr-2">🇷🇴</span>
          <span>Romania (+40)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="RU"
          data-prefix-value="+7"
          data-name-value="Russia"
          data-flag-value="🇷🇺"
          data-label="russia +7"
        >
          <span class="mr-2">🇷🇺</span>
          <span>Russia (+7)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="RW"
          data-prefix-value="+250"
          data-name-value="Rwanda"
          data-flag-value="🇷🇼"
          data-label="rwanda +250"
        >
          <span class="mr-2">🇷🇼</span>
          <span>Rwanda (+250)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="RE"
          data-prefix-value="+262"
          data-name-value="Reunion"
          data-flag-value="🇷🇪"
          data-label="reunion +262"
        >
          <span class="mr-2">🇷🇪</span>
          <span>Reunion (+262)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="BL"
          data-prefix-value="+590"
          data-name-value="Saint Barthelemy"
          data-flag-value="🇧🇱"
          data-label="saint barthelemy +590"
        >
          <span class="mr-2">🇧🇱</span>
          <span>Saint Barthelemy (+590)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SH"
          data-prefix-value="+290"
          data-name-value="Saint Helena, Ascension and Tristan Da Cunha"
          data-flag-value="🇸🇭"
          data-label="saint helena, ascension and tristan da cunha +290"
        >
          <span class="mr-2">🇸🇭</span>
          <span>Saint Helena, Ascension and Tristan Da Cunha (+290)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="KN"
          data-prefix-value="+1869"
          data-name-value="Saint Kitts and Nevis"
          data-flag-value="🇰🇳"
          data-label="saint kitts and nevis +1869"
        >
          <span class="mr-2">🇰🇳</span>
          <span>Saint Kitts and Nevis (+1869)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LC"
          data-prefix-value="+1758"
          data-name-value="Saint Lucia"
          data-flag-value="🇱🇨"
          data-label="saint lucia +1758"
        >
          <span class="mr-2">🇱🇨</span>
          <span>Saint Lucia (+1758)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="MF"
          data-prefix-value="+590"
          data-name-value="Saint Martin"
          data-flag-value="🇲🇫"
          data-label="saint martin +590"
        >
          <span class="mr-2">🇲🇫</span>
          <span>Saint Martin (+590)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="PM"
          data-prefix-value="+508"
          data-name-value="Saint Pierre and Miquelon"
          data-flag-value="🇵🇲"
          data-label="saint pierre and miquelon +508"
        >
          <span class="mr-2">🇵🇲</span>
          <span>Saint Pierre and Miquelon (+508)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VC"
          data-prefix-value="+1784"
          data-name-value="Saint Vincent and the Grenadines"
          data-flag-value="🇻🇨"
          data-label="saint vincent and the grenadines +1784"
        >
          <span class="mr-2">🇻🇨</span>
          <span>Saint Vincent and the Grenadines (+1784)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="WS"
          data-prefix-value="+685"
          data-name-value="Samoa"
          data-flag-value="🇼🇸"
          data-label="samoa +685"
        >
          <span class="mr-2">🇼🇸</span>
          <span>Samoa (+685)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SM"
          data-prefix-value="+378"
          data-name-value="San Marino"
          data-flag-value="🇸🇲"
          data-label="san marino +378"
        >
          <span class="mr-2">🇸🇲</span>
          <span>San Marino (+378)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ST"
          data-prefix-value="+239"
          data-name-value="Sao Tome and Principe"
          data-flag-value="🇸🇹"
          data-label="sao tome and principe +239"
        >
          <span class="mr-2">🇸🇹</span>
          <span>Sao Tome and Principe (+239)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SA"
          data-prefix-value="+966"
          data-name-value="Saudi Arabia"
          data-flag-value="🇸🇦"
          data-label="saudi arabia +966"
        >
          <span class="mr-2">🇸🇦</span>
          <span>Saudi Arabia (+966)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SN"
          data-prefix-value="+221"
          data-name-value="Senegal"
          data-flag-value="🇸🇳"
          data-label="senegal +221"
        >
          <span class="mr-2">🇸🇳</span>
          <span>Senegal (+221)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="RS"
          data-prefix-value="+381"
          data-name-value="Serbia"
          data-flag-value="🇷🇸"
          data-label="serbia +381"
        >
          <span class="mr-2">🇷🇸</span>
          <span>Serbia (+381)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SC"
          data-prefix-value="+248"
          data-name-value="Seychelles"
          data-flag-value="🇸🇨"
          data-label="seychelles +248"
        >
          <span class="mr-2">🇸🇨</span>
          <span>Seychelles (+248)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SL"
          data-prefix-value="+232"
          data-name-value="Sierra Leone"
          data-flag-value="🇸🇱"
          data-label="sierra leone +232"
        >
          <span class="mr-2">🇸🇱</span>
          <span>Sierra Leone (+232)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SG"
          data-prefix-value="+65"
          data-name-value="Singapore"
          data-flag-value="🇸🇬"
          data-label="singapore +65"
        >
          <span class="mr-2">🇸🇬</span>
          <span>Singapore (+65)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SK"
          data-prefix-value="+421"
          data-name-value="Slovakia"
          data-flag-value="🇸🇰"
          data-label="slovakia +421"
        >
          <span class="mr-2">🇸🇰</span>
          <span>Slovakia (+421)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SI"
          data-prefix-value="+386"
          data-name-value="Slovenia"
          data-flag-value="🇸🇮"
          data-label="slovenia +386"
        >
          <span class="mr-2">🇸🇮</span>
          <span>Slovenia (+386)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SB"
          data-prefix-value="+677"
          data-name-value="Solomon Islands"
          data-flag-value="🇸🇧"
          data-label="solomon islands +677"
        >
          <span class="mr-2">🇸🇧</span>
          <span>Solomon Islands (+677)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SO"
          data-prefix-value="+252"
          data-name-value="Somalia"
          data-flag-value="🇸🇴"
          data-label="somalia +252"
        >
          <span class="mr-2">🇸🇴</span>
          <span>Somalia (+252)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ZA"
          data-prefix-value="+27"
          data-name-value="South Africa"
          data-flag-value="🇿🇦"
          data-label="south africa +27"
        >
          <span class="mr-2">🇿🇦</span>
          <span>South Africa (+27)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SS"
          data-prefix-value="+211"
          data-name-value="South Sudan"
          data-flag-value="🇸🇸"
          data-label="south sudan +211"
        >
          <span class="mr-2">🇸🇸</span>
          <span>South Sudan (+211)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GS"
          data-prefix-value="+500"
          data-name-value="South Georgia and the South Sandwich Islands"
          data-flag-value="🇬🇸"
          data-label="south georgia and the south sandwich islands +500"
        >
          <span class="mr-2">🇬🇸</span>
          <span>South Georgia and the South Sandwich Islands (+500)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ES"
          data-prefix-value="+34"
          data-name-value="Spain"
          data-flag-value="🇪🇸"
          data-label="spain +34"
        >
          <span class="mr-2">🇪🇸</span>
          <span>Spain (+34)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="LK"
          data-prefix-value="+94"
          data-name-value="Sri Lanka"
          data-flag-value="🇱🇰"
          data-label="sri lanka +94"
        >
          <span class="mr-2">🇱🇰</span>
          <span>Sri Lanka (+94)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SD"
          data-prefix-value="+249"
          data-name-value="Sudan"
          data-flag-value="🇸🇩"
          data-label="sudan +249"
        >
          <span class="mr-2">🇸🇩</span>
          <span>Sudan (+249)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SR"
          data-prefix-value="+597"
          data-name-value="Suriname"
          data-flag-value="🇸🇷"
          data-label="suriname +597"
        >
          <span class="mr-2">🇸🇷</span>
          <span>Suriname (+597)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SJ"
          data-prefix-value="+47"
          data-name-value="Svalbard and Jan Mayen"
          data-flag-value="🇸🇯"
          data-label="svalbard and jan mayen +47"
        >
          <span class="mr-2">🇸🇯</span>
          <span>Svalbard and Jan Mayen (+47)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SZ"
          data-prefix-value="+268"
          data-name-value="Eswatini"
          data-flag-value="🇸🇿"
          data-label="eswatini +268"
        >
          <span class="mr-2">🇸🇿</span>
          <span>Eswatini (+268)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SE"
          data-prefix-value="+46"
          data-name-value="Sweden"
          data-flag-value="🇸🇪"
          data-label="sweden +46"
        >
          <span class="mr-2">🇸🇪</span>
          <span>Sweden (+46)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="CH"
          data-prefix-value="+41"
          data-name-value="Switzerland"
          data-flag-value="🇨🇭"
          data-label="switzerland +41"
        >
          <span class="mr-2">🇨🇭</span>
          <span>Switzerland (+41)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="SY"
          data-prefix-value="+963"
          data-name-value="Syrian Arab Republic"
          data-flag-value="🇸🇾"
          data-label="syrian arab republic +963"
        >
          <span class="mr-2">🇸🇾</span>
          <span>Syrian Arab Republic (+963)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TW"
          data-prefix-value="+886"
          data-name-value="Taiwan"
          data-flag-value="🇹🇼"
          data-label="taiwan +886"
        >
          <span class="mr-2">🇹🇼</span>
          <span>Taiwan (+886)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TJ"
          data-prefix-value="+992"
          data-name-value="Tajikistan"
          data-flag-value="🇹🇯"
          data-label="tajikistan +992"
        >
          <span class="mr-2">🇹🇯</span>
          <span>Tajikistan (+992)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TZ"
          data-prefix-value="+255"
          data-name-value="Tanzania, United Republic of Tanzania"
          data-flag-value="🇹🇿"
          data-label="tanzania, united republic of tanzania +255"
        >
          <span class="mr-2">🇹🇿</span>
          <span>Tanzania, United Republic of Tanzania (+255)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TH"
          data-prefix-value="+66"
          data-name-value="Thailand"
          data-flag-value="🇹🇭"
          data-label="thailand +66"
        >
          <span class="mr-2">🇹🇭</span>
          <span>Thailand (+66)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TL"
          data-prefix-value="+670"
          data-name-value="Timor-Leste"
          data-flag-value="🇹🇱"
          data-label="timor-leste +670"
        >
          <span class="mr-2">🇹🇱</span>
          <span>Timor-Leste (+670)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TG"
          data-prefix-value="+228"
          data-name-value="Togo"
          data-flag-value="🇹🇬"
          data-label="togo +228"
        >
          <span class="mr-2">🇹🇬</span>
          <span>Togo (+228)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TK"
          data-prefix-value="+690"
          data-name-value="Tokelau"
          data-flag-value="🇹🇰"
          data-label="tokelau +690"
        >
          <span class="mr-2">🇹🇰</span>
          <span>Tokelau (+690)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TO"
          data-prefix-value="+676"
          data-name-value="Tonga"
          data-flag-value="🇹🇴"
          data-label="tonga +676"
        >
          <span class="mr-2">🇹🇴</span>
          <span>Tonga (+676)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TT"
          data-prefix-value="+1868"
          data-name-value="Trinidad and Tobago"
          data-flag-value="🇹🇹"
          data-label="trinidad and tobago +1868"
        >
          <span class="mr-2">🇹🇹</span>
          <span>Trinidad and Tobago (+1868)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TN"
          data-prefix-value="+216"
          data-name-value="Tunisia"
          data-flag-value="🇹🇳"
          data-label="tunisia +216"
        >
          <span class="mr-2">🇹🇳</span>
          <span>Tunisia (+216)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TR"
          data-prefix-value="+90"
          data-name-value="Turkey"
          data-flag-value="🇹🇷"
          data-label="turkey +90"
        >
          <span class="mr-2">🇹🇷</span>
          <span>Turkey (+90)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TM"
          data-prefix-value="+993"
          data-name-value="Turkmenistan"
          data-flag-value="🇹🇲"
          data-label="turkmenistan +993"
        >
          <span class="mr-2">🇹🇲</span>
          <span>Turkmenistan (+993)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TC"
          data-prefix-value="+1649"
          data-name-value="Turks and Caicos Islands"
          data-flag-value="🇹🇨"
          data-label="turks and caicos islands +1649"
        >
          <span class="mr-2">🇹🇨</span>
          <span>Turks and Caicos Islands (+1649)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="TV"
          data-prefix-value="+688"
          data-name-value="Tuvalu"
          data-flag-value="🇹🇻"
          data-label="tuvalu +688"
        >
          <span class="mr-2">🇹🇻</span>
          <span>Tuvalu (+688)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="UG"
          data-prefix-value="+256"
          data-name-value="Uganda"
          data-flag-value="🇺🇬"
          data-label="uganda +256"
        >
          <span class="mr-2">🇺🇬</span>
          <span>Uganda (+256)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="UA"
          data-prefix-value="+380"
          data-name-value="Ukraine"
          data-flag-value="🇺🇦"
          data-label="ukraine +380"
        >
          <span class="mr-2">🇺🇦</span>
          <span>Ukraine (+380)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="AE"
          data-prefix-value="+971"
          data-name-value="United Arab Emirates"
          data-flag-value="🇦🇪"
          data-label="united arab emirates +971"
        >
          <span class="mr-2">🇦🇪</span>
          <span>United Arab Emirates (+971)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="GB"
          data-prefix-value="+44"
          data-name-value="United Kingdom"
          data-flag-value="🇬🇧"
          data-label="united kingdom +44"
        >
          <span class="mr-2">🇬🇧</span>
          <span>United Kingdom (+44)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="US"
          data-prefix-value="+1"
          data-name-value="United States"
          data-flag-value="🇺🇸"
          data-label="united states +1"
        >
          <span class="mr-2">🇺🇸</span>
          <span>United States (+1)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="UY"
          data-prefix-value="+598"
          data-name-value="Uruguay"
          data-flag-value="🇺🇾"
          data-label="uruguay +598"
        >
          <span class="mr-2">🇺🇾</span>
          <span>Uruguay (+598)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="UZ"
          data-prefix-value="+998"
          data-name-value="Uzbekistan"
          data-flag-value="🇺🇿"
          data-label="uzbekistan +998"
        >
          <span class="mr-2">🇺🇿</span>
          <span>Uzbekistan (+998)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VU"
          data-prefix-value="+678"
          data-name-value="Vanuatu"
          data-flag-value="🇻🇺"
          data-label="vanuatu +678"
        >
          <span class="mr-2">🇻🇺</span>
          <span>Vanuatu (+678)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VE"
          data-prefix-value="+58"
          data-name-value="Venezuela, Bolivarian Republic of Venezuela"
          data-flag-value="🇻🇪"
          data-label="venezuela, bolivarian republic of venezuela +58"
        >
          <span class="mr-2">🇻🇪</span>
          <span>Venezuela, Bolivarian Republic of Venezuela (+58)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VN"
          data-prefix-value="+84"
          data-name-value="Vietnam"
          data-flag-value="🇻🇳"
          data-label="vietnam +84"
        >
          <span class="mr-2">🇻🇳</span>
          <span>Vietnam (+84)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VG"
          data-prefix-value="+1284"
          data-name-value="Virgin Islands, British"
          data-flag-value="🇻🇬"
          data-label="virgin islands, british +1284"
        >
          <span class="mr-2">🇻🇬</span>
          <span>Virgin Islands, British (+1284)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="VI"
          data-prefix-value="+1340"
          data-name-value="Virgin Islands, U.S."
          data-flag-value="🇻🇮"
          data-label="virgin islands, u.s. +1340"
        >
          <span class="mr-2">🇻🇮</span>
          <span>Virgin Islands, U.S. (+1340)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="WF"
          data-prefix-value="+681"
          data-name-value="Wallis and Futuna"
          data-flag-value="🇼🇫"
          data-label="wallis and futuna +681"
        >
          <span class="mr-2">🇼🇫</span>
          <span>Wallis and Futuna (+681)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="YE"
          data-prefix-value="+967"
          data-name-value="Yemen"
          data-flag-value="🇾🇪"
          data-label="yemen +967"
        >
          <span class="mr-2">🇾🇪</span>
          <span>Yemen (+967)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ZM"
          data-prefix-value="+260"
          data-name-value="Zambia"
          data-flag-value="🇿🇲"
          data-label="zambia +260"
        >
          <span class="mr-2">🇿🇲</span>
          <span>Zambia (+260)</span>
        </button>
        <button
          type="button"
          class="flex items-center w-full px-4 py-2 text-sm text-gray-800 hover:bg-gray-100 country-option"
          data-action="click->phone#select"
          data-code-value="ZW"
          data-prefix-value="+263"
          data-name-value="Zimbabwe"
          data-flag-value="🇿🇼"
          data-label="zimbabwe +263"
        >
          <span class="mr-2">🇿🇼</span>
          <span>Zimbabwe (+263)</span>
        </button>
    </div>
  </div>

  <!-- Hidden input for selected country code -->
  <input type="hidden" name="customer[prefix]" data-phone-target="prefixInput"  data-country=&quot;GB&quot;>
</div>
</div>
<div class="space-y-3 mt-3">
  <label class="capitalize font-medium block min-w-fit" for="customer_email_address">Email address</label>
  <div class="flex rounded-sm shadow-sm">
    <button class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600 rounded-s-md" type="button">
      <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
        <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
        <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
      </svg>
    </button>
    <input class="py-3 px-4 block outline-1 -outline-offset-1 outline-gray-300 dark:outline-gray-600 px-3 py-2 w-full text-gray-900 dark:text-white dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 text-sm border-s-0 border-e-md border-gray-200 rounded-e-md" required="required" type="email" name="customer[email]" id="customer_email" />
  </div>
</div>

          <!-- Verification Method -->
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
              <div class="flex">
                <div class="flex-shrink-0">
                  <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="text-sm text-green-800">
                    Simply enter your details to access your bookings.
                  </p>
                </div>
              </div>
            </div>

          <!-- Submit Button -->
          <input type="submit" name="commit" value="Verify &amp; Search" class="w-full py-3 px-4 bg-gradient-to-r from-cyan-500 to-teal-500 text-white font-medium rounded-lg hover:bg-gradient-to-r hover:from-cyan-600 hover:to-teal-600 transition-all" data-disable-with="Verify &amp; Search" />
</form>      </div>
    </div>
  </div>
</template></turbo-stream><turbo-stream action="update" target="recovery_step_verify"><template></template></turbo-stream><turbo-stream action="update" target="recovery_step_bookings"><template></template></turbo-stream>