<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>
                    </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 px-6 py-6 md:px-8 md:py-8">
                    {% if imagePath %}
                        <div class="mb-6 flex justify-center border border-primary/10 bg-white/70 p-5">
                            <twig:Image
                                alt="{{ title }}"
                                class="max-h-28 w-auto"
                                row:class="h-full w-full"
                                img:class="h-full w-full object-contain"
                                lazy="{{ false }}"
                                quality="{{ 70 }}"
                                responsive="{{ false }}"
                                path="{{ imagePath|image_path }}"
                                imageWidth="220"
                                imageHeight="220"
                            />
                        </div>
                    {% endif %}

                    {% if description %}
                        <div class="text-[15px] leading-7 text-primary/78 [&_p]:my-0 [&_ul]:my-3 [&_ol]:my-3 [&_li]:ml-5">
                            {{ description|raw }}
                        </div>
                    {% endif %}

                    {% if modalTemplate == constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::MODAL_TEMPLATE_SHIPPING_FEES') %}
                        {% set filteredRows = this.filteredShippingRows %}

                        <div class="mt-6 space-y-6 text-[15px] text-primary/78">
                            <div class="space-y-2 leading-7">
                                {% if partnerCode %}
                                    <p>{{ 'shop.information_modal_shipping_intro_partner'|trans({'%code%': partnerCode}) }}</p>
                                {% endif %}

                                {% if groupLabel %}
                                    <p>{{ 'shop.information_modal_shipping_group'|trans({'%group%': groupLabel}) }}</p>
                                {% endif %}

                                {% if freeShipping %}
                                    <p class="font-semibold text-primary">{{ 'shop.information_modal_shipping_free'|trans }}</p>
                                {% endif %}

                                {% if freeShippingThresholdLabel %}
                                    <p class="font-semibold text-primary">{{ 'shop.information_modal_shipping_free_from'|trans({'%amount%': freeShippingThresholdLabel}) }}</p>
                                {% endif %}

                                <p>{{ 'shop.information_modal_shipping_notice'|trans }}</p>
                            </div>

                            <div class="grid gap-3 md:grid-cols-2">
                                {% if countries|length > 1 %}
                                    <label class="space-y-2">
                                        <span class="font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-secondary">{{ 'shop.information_modal_shipping_filter_country'|trans }}</span>
                                        <select
                                            data-model="on(change)|selectedCountryFilter"
                                            class="min-h-[46px] w-full border border-primary/12 bg-white px-4 text-[15px] text-primary outline-none transition focus:border-primary"
                                        >
                                            <option value="all">{{ 'shop.information_modal_shipping_filter_all_countries'|trans }}</option>
                                            {% for country in countries %}
                                                <option value="{{ country.value }}">{{ country.label }}</option>
                                            {% endfor %}
                                        </select>
                                    </label>
                                {% endif %}

                                {% if showProductTypeFilter %}
                                    <label class="space-y-2">
                                        <span class="font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-secondary">{{ 'shop.information_modal_shipping_filter_type'|trans }}</span>
                                        <select
                                            data-model="on(change)|selectedTypeFilter"
                                            class="min-h-[46px] w-full border border-primary/12 bg-white px-4 text-[15px] text-primary outline-none transition focus:border-primary"
                                        >
                                            <option value="all">{{ 'shop.information_modal_shipping_filter_all_types'|trans }}</option>
                                            {% for type in productTypes %}
                                                <option value="{{ type.value }}">{{ type.label }}</option>
                                            {% endfor %}
                                        </select>
                                    </label>
                                {% endif %}
                            </div>

                            {% if productTypes|length > 1 %}
                                <div class="border border-primary/10 bg-white/70 px-4 py-4">
                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-secondary">
                                        {{ 'shop.information_modal_shipping_types'|trans }}
                                    </div>
                                    <div class="mt-4 flex flex-wrap gap-2">
                                        {% for type in productTypes %}
                                            <div class="border border-primary/10 bg-background px-3 py-2 text-xs text-primary">
                                                <div class="font-semibold">{{ type.label }}</div>
                                                <div class="mt-1 text-primary/65">{{ type.equivalency_label }}</div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if filteredRows is not empty %}
                                <div class="overflow-x-auto border border-primary/10">
                                    <table class="min-w-full text-left">
                                        <thead class="border-b border-primary/10 bg-white/70 text-[10px] uppercase tracking-[0.18em] text-primary/65">
                                            <tr>
                                                <th class="px-4 py-3">{{ 'shop.information_modal_shipping_quantity'|trans }}</th>
                                                <th class="px-4 py-3">{{ 'shop.information_modal_shipping_total'|trans }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-primary/10 bg-background/70">
                                            {% for fee in filteredRows %}
                                                <tr>
                                                    <td class="px-4 py-4 align-top">
                                                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ fee.context_label }}</div>
                                                        <div class="mt-2 text-[15px] font-medium text-primary">{{ fee.quantity_label }}</div>
                                                    </td>
                                                    <td class="px-4 py-4 align-top">
                                                        <div class="flex items-start gap-2">
                                                            <span class="text-[15px] font-medium text-primary">{{ fee.total_price_label }}</span>
                                                            {% if fee.show_tooltip and fee.tooltip_lines is not empty %}
                                                                <span class="group relative inline-flex">
                                                                    <button
                                                                        type="button"
                                                                        class="inline-flex h-5 w-5 items-center justify-center border border-primary/15 text-[10px] font-semibold text-primary/70"
                                                                        aria-label="{{ 'shop.information_modal_shipping_info'|trans }}"
                                                                    >
                                                                        i
                                                                    </button>
                                                                    <span class="pointer-events-none absolute right-0 z-20 hidden w-72 border border-primary/12 bg-background p-3 text-left text-xs leading-5 text-primary shadow-xl group-hover:block group-focus-within:block {% if loop.revindex <= 3 %}bottom-full mb-2{% else %}top-full mt-2{% endif %}">
                                                                        <span class="mb-2 block font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'shop.information_modal_shipping_calculation'|trans }}</span>
                                                                        {% for line in fee.tooltip_lines %}
                                                                            <span class="block">{{ line }}</span>
                                                                        {% endfor %}
                                                                    </span>
                                                                </span>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <div class="text-[15px] leading-7 text-primary/78">
                                    {{ 'shop.information_modal_shipping_empty'|trans }}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
</div>
