{% comment %}
  Renders a currency select at header and footer

  Accepts:
  - placement: {String} Position of popover content (optional)

  Usage:
  {% render 'currency-select',
    placement: placement
  %}
{% endcomment %}

{% assign random_number = 'now' | date: '%N' | modulo: 100 %}
{% assign id = 'localization_form_' | append: random_number %}

<xo-currency-select class='xo-currency-select'>
  {% if localization.available_countries.size > 1 %}
    {%- form 'localization', id: id, class: 'xo-currency-select__form' -%}
      <div class='xo-currency-select__label'>
        {{ 'localization.country_label' | t }}
      </div>
      <xo-popover-trigger xo-name='{{ id }}' class='xo-currency-select__trigger'>
        <span>
          {{- localization.country.currency.iso_code }}
        </span>
        {% render 'icon', name: 'chevron-down', icon_size: '15' %}
      </xo-popover-trigger>

      <xo-popover xo-name='{{ id }}' xo-placement='{{ placement | default: 'bottom-center' }}' class='xo-currency-select__content'>
        {%- for country in localization.available_countries -%}
          <label class='xo-currency-select__item'>
            <input
              class='xo-currency-select__input'
              type='radio'
              name='country_code'
              value='{{ country.iso_code }}'
              {%- if country.iso_code == localization.country.iso_code %}
                checked
              {% endif %}
            >
            <span class='xo-currency-select__name'>
              {{ country.currency.iso_code }}
            </span>
          </label>
        {%- endfor -%}
      </xo-popover>
    {%- endform -%}
  {% endif %}
</xo-currency-select>
