<section 
    class="reviews-and-questions-section"
    x-data="{
        tabActive: 1,
        reviewsMore() {
            const list = $el.querySelectorAll('.reviews-and-questions-section__list')[0]
            const html = list.innerHTML
            this.$el.remove()
            list.innerHTML += html
        },
        qMore() {
            const list = $el.querySelectorAll('.reviews-and-questions-section__list')[1]
            const button = list.querySelector('.reviews-and-questions-section__load-more-btn')
            const items = list.querySelectorAll('.reviews-and-questions-section__item')

            for (const item of items) {
                button.insertAdjacentHTML('beforebegin', item.outerHTML)
            }
        }
    }"
>
    <div class="reviews-and-questions-section__tabs">
        {% for item in ["Отзывы", "Вопросы"] %}
            <button class="reviews-and-questions-section__tab-btn" :class="{ active: tabActive === {{ loop.index }} }" @click.prevent="tabActive = {{ loop.index }}" data-action-name="{{ item }}">{{ item }}</button>
        {% endfor %}
    </div>

    <div class="reviews-and-questions-section__container" x-show="tabActive === 1">
        <div class="reviews-and-questions-section__rating-block">
            <div class="reviews-and-questions-section__rating-block__grid">
                <div class="reviews-and-questions-section__rating-block__rating">
                    <span class="reviews-and-questions-section__rating-block__rating-current">4,9</span>
                    <p class="reviews-and-questions-section__rating-block__rating-desc">На основании 14 отзывов</p>
                    <div class="stars-rate stars-rate--small reviews-and-questions-section__rating-block__rating-stars" style="--rate: 4.9"></div>
                </div>
                <ul class="reviews-and-questions-section__rating-block__stats">
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>5</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 86%"></div>
                        <span>86%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>4</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 14%"></div>
                        <span>14%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>3</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>2</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                    <li class="reviews-and-questions-section__rating-block__stat-item">
                        <span>1</span>
                        <div class="reviews-and-questions-section__rating-block__stat-item__progress" style="--progress-percent: 0%"></div>
                        <span>0%</span>
                    </li>
                </ul>
            </div>
            <button class="reviews-and-questions-section__rating-block__btn" data-modal-btn="e899cd98-3478-4ddf-9175-615732317672">Написать отзыв</button>
            <template data-modal-idx="e899cd98-3478-4ddf-9175-615732317672">
                {% include "modals/write-review.twig" %}
            </template>
        </div>

        <div class="reviews-and-questions-section__list-empty">
            <svg class="reviews-and-questions-section__list-empty__icon"><use xlink:href="/sprite.svg#reviews-empty"></use></svg>
            <div class="reviews-and-questions-section__list-empty__main">
                <span>Отзывов пока нет</span>
                <p>Ваш отзыв может стать первым</p>
            </div>
        </div>
    </div>
    
    <div class="reviews-and-questions-section__container" x-show="tabActive === 2">
        <div class="reviews-and-questions-section__list-empty">
            <svg class="reviews-and-questions-section__list-empty__icon"><use xlink:href="/sprite.svg#questions-empty"></use></svg>
            <div class="reviews-and-questions-section__list-empty__main">
                <span>Вопросов пока нет</span>
                <p>Задайте ваш вопрос, на который ответят наши специалисты</p>
            </div>
        </div>
    </div>
</section>
