<div {{ attributes }}>
    {% if open %}
        <div class="modal-scroll-lock fixed inset-0 z-modal flex items-center justify-center p-4 md:p-6">
            <button
                type="button"
                class="absolute inset-0 bg-primary/55 backdrop-blur-[3px]"
                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-[90vh] w-full max-w-5xl flex-col overflow-hidden border border-primary/10 bg-background shadow-[0_32px_80px_rgba(51,38,28,0.22)]"
            >
                <div class="flex items-start justify-between gap-4 border-b border-primary/12 px-6 py-5 md:px-8">
                    <div class="min-w-0">
                        <div id="{{ id }}-title" class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary sm:text-[32px]">
                            {{ title }}
                        </div>
                        {% if subtitle %}
                            <div class="mt-2 font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                {{ subtitle }}
                            </div>
                        {% endif %}
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center text-[34px] leading-none text-primary/60 transition hover:text-primary"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </div>

                <div class="overflow-y-auto">
                    <div class="grid gap-6 px-6 py-6 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)] lg:gap-8 lg:px-8 lg:py-8">
                        <div class="min-w-0">
                            {% if galleryImages|length > 1 %}
                                <div class="border border-primary/10 bg-white/70 p-5 md:p-6">
                                    <div class="product-gallery splide w-full" data-controller="product-gallery">
                                        <div class="splide__track">
                                            <ul class="splide__list">
                                                {% for galleryImage in galleryImages %}
                                                    <li class="splide__slide">
                                                        <twig:Image
                                                            mapping="image"
                                                            class="mx-auto flex h-[280px] w-full items-center justify-center md:h-[360px]"
                                                            row:class="flex h-full w-full items-center justify-center"
                                                            img:class="mx-auto max-h-full w-auto object-contain"
                                                            lazy="{{ false }}"
                                                            responsive="{{ false }}"
                                                            quality="{{ 70 }}"
                                                            fm="avif"
                                                            fit="contain"
                                                            path="{{ galleryImage.path }}"
                                                            imageWidth="{{ galleryImage.width ?: 960 }}"
                                                            imageHeight="{{ galleryImage.height ?: 960 }}"
                                                            alt="{{ title }}"
                                                        />
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            {% elseif imagePath %}
                                <div class="border border-primary/10 bg-white/70 p-5 md:p-6">
                                    <twig:Image
                                        mapping="image"
                                        class="mx-auto flex h-[280px] w-full items-center justify-center md:h-[360px]"
                                        row:class="flex h-full w-full items-center justify-center"
                                        img:class="mx-auto max-h-full w-auto object-contain"
                                        lazy="{{ false }}"
                                        responsive="{{ false }}"
                                        quality="{{ 70 }}"
                                        fm="avif"
                                        fit="contain"
                                        path="{{ imagePath }}"
                                        imageWidth="960"
                                        imageHeight="960"
                                        alt="{{ title }}"
                                    />
                                </div>
                            {% endif %}
                        </div>

                        <div class="min-w-0 space-y-6">
                            {% if description %}
                                <div class="text-[15px] leading-7 text-primary/78">
                                    {{ description|raw|nl2br }}
                                </div>
                            {% endif %}

                            {% if dosage %}
                                <div class="border-t border-primary/10 pt-5">
                                    <div class="font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                        {{ 'collection.champagne.dosage'|trans }}
                                    </div>
                                    <div class="mt-3 text-[15px] leading-7 text-primary/78">
                                        {{ dosage|raw }}
                                    </div>
                                </div>
                            {% endif %}

                            {% if introText %}
                                <div class="border-t border-primary/10 pt-5">
                                    <div class="font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                        {{ 'shop.detail'|trans|striptags }}
                                    </div>
                                    <div class="mt-3 text-[15px] leading-7 text-primary">
                                        {{ introText|raw }}
                                    </div>
                                </div>
                            {% endif %}

                            {% if assemblages is not empty %}
                                <div class="border-t border-primary/10 pt-5">
                                    <div class="font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                        {{ 'collection.champagne.assemblage'|trans }}
                                    </div>
                                    <div class="mt-3 space-y-2 text-[15px] leading-7 text-primary/78">
                                        {% for assemblage in assemblages %}
                                            <div>{{ assemblage|raw }}</div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if filePath %}
                                <div class="border-t border-primary/10 pt-5">
                                    <a
                                        href="{{ filePath|file_path }}"
                                        target="_blank"
                                        class="inline-flex items-center gap-3 border border-primary/15 bg-white px-4 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-primary hover:bg-primary hover:text-white">
                                        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.87 20" aria-hidden="true">
                                            <path d="M12.54,8.78c-.2-.2-.51-.2-.71,0l-3.9,3.9V.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v12.18l-3.9-3.9c-.09-.09-.22-.15-.35-.15-.28,0-.5.22-.5.5,0,.13.05.26.14.35l4.75,4.75c.2.2.51.2.71,0l4.75-4.75c.2-.2.2-.51,0-.71Z"/>
                                            <path d="M14.37,19.46H.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h13.87c.28,0,.5.22.5.5s-.22.5-.5.5Z"/>
                                        </svg>
                                        {{ 'collection.champagne.file'|trans|raw }}
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
