{% if localization.available_countries.size > 1 %}
  <div 
    id="modal-localization" 
    class="modal fade" 
    tabindex="-1" 
    aria-labelledby="modal-localization-label"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 id="modal-localization-label" class="modal-title">
            {{ 'general.localization.title' | t }}
          </h2>
          <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="{{ 'general.accessibility.close' | t }}">
            {% render 'svg-icons', icon: 'x', size: 20 %}
          </button>
        </div>
        <div class="modal-body">
          {% form 'localization' %}
            <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
            <ul class="list-group list-group-flush" aria-labelledby="modal-localization-label">
              {% for country in localization.available_countries %}
                <button
                  class="list-group-item list-group-item-action {% if country.iso_code == localization.country.iso_code %}active{% endif %}"
                  data-iso-code="{{ country.iso_code }}"
                  aria-current="{% if country.iso_code == localization.country.iso_code %}true{% endif %}"
                  role="button">
                  <div class="localization-form-item-img me-4" aria-hidden="true">
                    {{ country | image_url: width: 20, height: 20 | image_tag }}
                  </div>
                  <div class="localization-form-item-text">
                    <span>
                      {{ country.name }}
                    </span>
                    <small class="opacity-50">
                      {{ country.currency.iso_code }} {{ country.currency.symbol }}
                    </small>
                  </div>
                </button>
              {% endfor %}
            </ul>
          {% endform %}
        </div>
      </div>
    </div>
  </div>
{% endif %}