<div {{ attributes }}>
    {% if open and product %}
        <div class="modal-scroll-lock theme-review-modal" data-theme-review-modal>
            <button
                type="button"
                class="theme-review-modal__backdrop"
                aria-label="{{ 'shop.close_modal'|trans }}"
                data-action="live#action"
                data-live-action-param="close"
            ></button>

            <div
                id="{{ id }}"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ id }}-title"
                class="theme-review-modal__dialog"
            >
                <header class="theme-review-modal__header">
                    <div>
                        <h2 id="{{ id }}-title">{{ product.name|striptags }}</h2>
                        <p>{{ 'marketing.review.public.title'|trans }}</p>
                    </div>
                    <button
                        type="button"
                        class="theme-review-modal__close"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        <span aria-hidden="true">&times;</span>
                    </button>
                </header>

                <div class="theme-review-modal__content">
                    {{ component('marketing:ProductReviews', {
                        product: product,
                        page: page,
                        livePagination: true,
                        id: id ~ '-content',
                        class: 'theme-reviews--modal'
                    }) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
