<div {{ attributes }}>
    {% if open and product %}
        <div class="modal-scroll-lock fixed inset-0 z-modal flex items-center justify-center p-4">
            <button
                type="button"
                class="absolute inset-0 bg-foreground/50"
                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="relative z-10 flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden border border-accent bg-surface"
            >
                <header class="flex items-start justify-between gap-4 border-b border-accent px-5 py-4 sm:px-8">
                    <div class="min-w-0">
                        <h2 id="{{ id }}-title" class="font-serif text-xl uppercase tracking-card-title sm:text-2xl">
                            {{ product.name|striptags }}
                        </h2>
                        <p class="mt-1 text-sm text-foreground/70">{{ 'marketing.review.public.title'|trans }}</p>
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center text-4xl leading-none text-foreground/70 transition hover:text-foreground"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </header>

                <div class="overflow-y-auto">
                    {{ component('marketing:ProductReviews', {
                        product: product,
                        page: page,
                        livePagination: true,
                        id: id ~ '-content',
                        class: 'mt-0'
                    }) }}
                </div>
            </div>
        </div>
    {% endif %}
</div>
