Build a navbar country and language selector

<form class="navbar-locale-selector" data-navbar-locale-selector>
  <div>
    <label for="navbar-country">{{ 'navbar.select_country' | t }}</label>
    <select id="navbar-country" name="country">
      {% for option in countries %}
        <option value="{{ option.iso }}" {% if option.selected %}selected{% endif %}>
          {{ option.name }}
        </option>
      {% endfor %}
    </select>
  </div>

  <div>
    <label for="navbar-language">{{ 'navbar.select_language' | t }}</label>
    <select id="navbar-language" name="language">
      {% for option in language_options %}
        <option value="{{ option.iso }}" {% if option.selected %}selected{% endif %}>
          {{ option.locale }}
        </option>
      {% endfor %}
    </select>
  </div>

  <button type="submit">{{ 'navbar.save_and_close' | t }}</button>
  <p data-locale-error role="alert" hidden></p>
</form>

document.addEventListener("submit", async (event) => {
  const form = event.target;
  if (!(form instanceof HTMLFormElement)) return;
  if (!form.matches("[data-navbar-locale-selector]")) return;

  event.preventDefault();

  const submitButton = form.querySelector('button[type="submit"]');
  const errorMessage = form.querySelector("[data-locale-error]");
  const country = form.querySelector('[name="country"]').value.toUpperCase();
  const language = form.querySelector('[name="language"]').value.toLowerCase();

  if (!window.FairShareSDK) {
    errorMessage.textContent = "Locale settings are not available. Refresh and try again.";
    errorMessage.hidden = false;
    return;
  }

  submitButton.disabled = true;
  errorMessage.hidden = true;

  try {
    await window.FairShareSDK.updateLocaleSettings({ country, language });
    const url = new URL(window.location.href);
    url.searchParams.delete("lang");
    window.location.assign(url.toString());
  } catch (error) {
    console.error("Could not update locale settings", error);
    errorMessage.textContent = "We could not update your country and language. Try again.";
    errorMessage.hidden = false;
    submitButton.disabled = false;
  }
});