<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-xl flex-col border border-gold bg-light p-6 shadow-2xl"
            >
                <div class="flex items-start justify-between gap-4 border-b border-gold pb-4">
                    <div id="{{ id }}-title" class="font-serif text-xl uppercase tracking-[0.08em]">
                        {{ title }}
                    </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-4 space-y-4 overflow-y-auto pr-2">
                    {% if imagePath %}
                        <div class="flex justify-center">
                            <twig:Image
                                alt="{{ title }}"
                                class="max-h-[24rem] w-auto"
                                img:class="h-full w-full object-contain"
                                lazy="{{ false }}"
                                quality="{{ 70 }}"
                                responsive="{{ false }}"
                                path="{{ imagePath }}"
                                imageWidth="200"
                                imageHeight="200"
                            />

                        </div>
                    {% endif %}

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