Country Accordion

{# @var country_accordion ThemeViews\Organisms\countryAccordion\CountryAccordionViewModel #}
{% extends '@atoms/section/section.twig' %}
{% set className = "country-accordion" %}
{% set index = 0 %}
{% set maxItems = 100 %}
{% block content %}
    {% for cityName, city in country_accordion.cities.items %}
        {% if index < maxItems %}
            <button class="py-1.5 block w-full text-left border-t border-t-lighter"
                    data-country="{{ country_accordion.country_slug }}" data-city="{{ city.slug }}">
                <span class="headline headline--m">{{ cityName }}</span> <span class="font-teko-light">[{{ city.count }}]</span>
            </button>
            <div
                    data-vue="country-accordion"
                    data-country="{{ country_accordion.country_slug }}"
                    data-city="{{ city.slug }}"
            ></div>
            {% set index = index + 1 %}
        {% endif %}
    {% endfor %}
    {% if country_accordion.cities.total > maxItems and country_accordion.cities.hasMore %}
        <div data-vue="country-accordion-list"
             data-initial-offset="{{ maxItems }}"
             data-country="{{ country_accordion.country_slug }}"
        ></div>
    {% endif %}
{% endblock %}