<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>
                        <div id="{{ id }}-title" class="font-serif text-xl uppercase tracking-[0.08em]">{{ title }}</div>
                        {% if variantLabel %}
                            <div class="mt-1 text-sm text-dark/70">{{ variantLabel }}</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-4 overflow-y-auto pr-2">
                    {% if rules is not empty %}
                        <div class="space-y-3">
                            <div class="grid grid-cols-[1.2fr_1fr] gap-4 border-b border-gold/40 pb-2 text-xs uppercase tracking-[0.12em] text-dark/60 sm:grid-cols-[1fr_1fr_1.2fr]">
                                <div>{{ 'shop.degressive_modal_quantity'|trans() }}</div>
                                <div>{{ 'shop.degressive_modal_price'|trans() }}</div>
                                <div class="hidden sm:block">{{ 'shop.degressive_modal_discount'|trans() }}</div>
                            </div>

                            {% for rule in rules %}
                                <div class="grid grid-cols-[1.2fr_1fr] gap-4 border-b border-dark/10 pb-3 text-sm sm:grid-cols-[1fr_1fr_1.2fr]">
                                    <div>{{ rule.range_label }}</div>
                                    <div class="font-semibold">{{ rule.price_label }}</div>
                                    <div class="col-span-2 text-dark/70 sm:col-span-1">{{ rule.detail_label }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-sm text-dark/70">{{ 'shop.degressive_modal_empty'|trans }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
</div>
