country-localization.liquid

{%- comment -%}
  Renders the country picker for the localization form

  Accepts:
    - localPosition: pass in the position in which the form is coming up to create specific IDs
{%- endcomment -%}

<div class="disclosure">
  <button
    type="button"
    class="disclosure__button localization-form__select localization-selector link link--text caption-large"
    aria-expanded="false"
    aria-controls="{{ localPosition }}List"
    aria-describedby="{{ localPosition }}Label"
  >
    <span>
      {{- localization.country.currency.iso_code }}
      {{ localization.country.currency.symbol }} | {{ localization.country.name -}}
    </span>
    {% render 'icon-caret' %}
  </button>
  <div class="disclosure__list-wrapper" hidden>
    <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
      {%- for country in localization.available_countries -%}
        <li class="disclosure__item" tabindex="-1">
          <a
            class="link link--text disclosure__link caption-large focus-inset{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %}"
            href="#"
            {% if country.iso_code == localization.country.iso_code %}
              aria-current="true"
            {% endif %}
            data-value="{{ country.iso_code }}"
          >
            <span class="localization-form__currency">
              {{- country.currency.iso_code }}
              {{ country.currency.symbol }} |</span
            >
            {{ country.name }}
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">