<div class="mega-menu-popup-wrapper" data-mega-menu-popup x-data="{ tab: 1 }">
    <div class="mega-menu-popup-container">
        <div class="mega-menu-popup-main">
            <div class="mega-menu-popup-list">
                <button class="mega-menu-popup-btn" :class="{ active: tab === 1 }" @click.prevent="tab = 1">
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#menu-car"></use></svg>
                    <span class="mega-menu-popup-btn__label">Легковые автомобили</span>
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="mega-menu-popup-btn" :class="{ active: tab === 2 }" @click.prevent="tab = 2">
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#menu-truck"></use></svg>
                    <span class="mega-menu-popup-btn__label">Грузовые автомобили</span>
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="mega-menu-popup-btn" :class="{ active: tab === 3 }" @click.prevent="tab = 3">
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#menu-moto"></use></svg>
                    <span class="mega-menu-popup-btn__label">Мотоаккумуляторы</span>
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="mega-menu-popup-btn" :class="{ active: tab === 4 }" @click.prevent="tab = 4">
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#menu-boat"></use></svg>
                    <span class="mega-menu-popup-btn__label">Водный транспорт</span>
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="mega-menu-popup-btn" :class="{ active: tab === 5 }" @click.prevent="tab = 5">
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#menu-square"></use></svg>
                    <span class="mega-menu-popup-btn__label">Сопутствующие товары</span>
                    <svg class="mega-menu-popup-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
            </div>

            {% for item in range(1, 5) %}
                <div class="mega-menu-popup-content" x-show="tab === {{ loop.index }}">
                    <div class="mega-menu-popup-block mega-menu-popup-block--country">
                        <span class="mega-menu-popup-block__title">Страна (Не статика {{ item }})</span>
                        <ul class="mega-menu-popup-block__links">
                            {% for item in ["Венгрия", "Германия", "Европа", "Испания", "Казахстан", "Польша", "Австрия", "Беларусь", "Болгария", "Турция", "Чехия", "Южная Корея", "Япония", "Китай", "Россия", "Румыния", "Сербия", "Словения"] %}
                                <li class="mega-menu-popup-block__links__item">
                                    <a href="" class="mega-menu-popup-block__links__item-link">{{ item }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="mega-menu-popup-block mega-menu-popup-block--brand">
                        <span class="mega-menu-popup-block__title">Марка</span>
                        <ul class="mega-menu-popup-block__links">
                            {% for item in ["Cadillac", "Infiniti", "Fiat", "Jeep", "Lexus", "MINI", "Opel", "Smart", "Toyota", "Chery", "Audi", "Ford", "Jaguar", "Land-rover", "Mitsubishi", "Renault", "Skoda", "Volvo", "Geely", "BMW", "Honda", "Kia", "Mazda", "Nissan", "Porsche", "Suzuki", "Volkswagen", "Haval", "Chevrolet", "Hyundai", "Lifan", "Mercedes-Benz", "Peugeot", "SsangYong", "Subaru", "УАЗ"] %}
                                <li class="mega-menu-popup-block__links__item">
                                    <a href="" class="mega-menu-popup-block__links__item-link">{{ item }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="mega-menu-popup-block mega-menu-popup-block--capacity">
                        <span class="mega-menu-popup-block__title">Ëмкость</span>
                        <ul class="mega-menu-popup-block__labels">
                            {% for item in ["35", "36", "38", "40", "41", "42", "44", "45", "47", "48", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "68", "70", "71", "72", "74", "74", "75", "76", "77", "78", "80", "82", "85", "88", "90", "91", "92", "95", "100", "105", "110", "115", "120", "125", "130", "140"] %}
                                <li class="mega-menu-popup-block__labels__item">
                                    <a href="" class="mega-menu-popup-block__labels__item-link">{{ item }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="mega-menu-popup-block-group mega-menu-popup-block-group--popular">
                        <div class="mega-menu-popup-block">
                            <span class="mega-menu-popup-block__title">Полярность</span>
                            <ul class="mega-menu-popup-block__links">
                                {% for item in ["Обратная", "Прямая", "Универсальная"] %}
                                    <li class="mega-menu-popup-block__links__item">
                                        <a href="" class="mega-menu-popup-block__links__item-link">{{ item }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <a href="" class="mega-menu-popup-catalog-btn">Перейти в каталог</a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>