<div {{ attributes }}>
    {% if open %}
        <div
            class="modal-scroll-lock fixed inset-0 z-[90] flex items-center justify-center p-4"
        >
            <button
                type="button"
                class="absolute inset-0 bg-black/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-[calc(100vh-2rem)] w-full max-w-3xl flex-col border border-gold bg-light p-6 shadow-2xl sm:p-8"
            >
                <div class="flex items-start justify-between gap-4 border-b border-gold pb-4">
                    <div class="min-w-0">
                        <div id="{{ id }}-title" class="font-serif text-xl uppercase tracking-[0.08em] sm:text-2xl">
                            {{ title }}
                        </div>
                        {% if subtitle %}
                            <div class="mt-1 text-sm uppercase tracking-[0.12em] text-gold">
                                {{ subtitle }}
                            </div>
                        {% endif %}
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 cursor-pointer items-center justify-center text-4xl leading-none text-dark/70 transition hover:text-dark"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </div>

                <div class="mt-6 grid gap-6 overflow-y-auto pr-2 md:grid-cols-[minmax(240px,320px)_minmax(0,1fr)] md:items-start">
                    {% if galleryImages|length > 1 %}
                        <div class="flex justify-center border border-gold/15 bg-white/50 p-6 overflow-visible">
                            <div class="product-gallery splide w-full max-w-[320px]" 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 w-full"
                                                    img:class="mx-auto max-h-[26rem] w-auto object-contain"
                                                    lazy="{{ false }}"
                                                    responsive="{{ false }}"
                                                    quality="{{ 70 }}"
                                                    fm="avif"
                                                    fit="contain"
                                                    bgAlpha="00000000"
                                                    path="{{ galleryImage.path }}"
                                                    imageWidth="{{ galleryImage.width ?: 960 }}"
                                                    imageHeight="{{ galleryImage.height ?: 960 }}"
                                                    alt="{{ title }}"
                                                />
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {% elseif imagePath %}
                        <div class="flex justify-center border border-gold/15 bg-white/50 p-6">
                            <twig:Image
                                mapping="image"
                                class="mx-auto w-full"
                                img:class="mx-auto max-h-[26rem] w-auto object-contain"
                                lazy="{{ false }}"
                                responsive="{{ false }}"
                                quality="{{ 70 }}"
                                fm="avif"
                                fit="contain"
                                bgAlpha="00000000"
                                path="{{ imagePath }}"
                                imageWidth="960"
                                imageHeight="960"
                                alt="{{ title }}"
                            />
                        </div>
                    {% endif %}

                    <div class="space-y-4 text-sm leading-6 text-dark/80">
                        {% if description %}
                            <div>
                                {{ description|raw|nl2br }}
                            </div>
                        {% endif %}

                        {% if dosage %}
                            <div>
                                <span class="font-semibold text-dark">{{ 'collection.champagne.dosage'|trans }}</span>{{ dosage|raw }}
                            </div>
                        {% endif %}

                        {% if introText %}
                            <div class="font-medium text-dark">
                                {{ introText|raw }}
                            </div>
                        {% endif %}

                        {% if assemblages is not empty %}
                            <div class="space-y-1">
                                {% for assemblage in assemblages %}
                                    <div>{{ assemblage|raw }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}

                        {% if filePath %}
                            <div class="pt-2">
                                <a href="{{ filePath|file_path }}" target="_blank"
                                   class="flex items-center gap-3 text-gold hover:opacity-80 hover:underline hover:underline-offset-4">
                                    <svg class="h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.87 20">
                                        <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>
    {% endif %}
</div>
