<div {{ attributes }}>
    {% if open %}
        <div
            class="modal-scroll-lock fixed inset-0 z-modal flex items-center justify-center p-4"
        >
            <button
                type="button"
                class="absolute inset-0 bg-foreground/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-modal w-full max-w-4xl flex-col border border-accent bg-surface p-6 shadow-2xl"
            >
                <div class="flex items-start justify-between gap-4 border-b border-accent pb-4">
                    <div id="{{ id }}-title" class="font-serif text-xl uppercase tracking-card-title">
                        {{ title }}
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 cursor-pointer items-center justify-center text-4xl leading-none text-foreground/70 transition hover:text-foreground"
                        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-28 w-auto"
                                row:class="w-full"
                                img:class="h-full w-full object-contain"
                                lazy="{{ false }}"
                                quality="{{ 70 }}"
                                responsive="{{ false }}"
                                path="{{ imagePath|image_path }}"
                                imageWidth="200"
                                imageHeight="200"
                            />
                        </div>
                    {% endif %}

                    {% if description %}
                        <div class="text-sm leading-7 text-foreground/80 [&_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="space-y-6 text-sm text-foreground/80">
                            <div class="space-y-1 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-foreground">{{ 'shop.information_modal_shipping_free'|trans }}</p>
                                {% endif %}

                                {% if freeShippingThresholdLabel %}
                                    <p class="font-semibold text-foreground">{{ '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-1">
                                        <span class="text-xs font-semibold uppercase tracking-label text-foreground/60">{{ 'shop.information_modal_shipping_filter_country'|trans }}</span>
                                        <select
                                            data-model="on(change)|selectedCountryFilter"
                                            class="border-foreground/15 bg-surface px-4 py-3 text-sm text-foreground"
                                        >
                                            <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-1">
                                        <span class="text-xs font-semibold uppercase tracking-label text-foreground/60">{{ 'shop.information_modal_shipping_filter_type'|trans }}</span>
                                        <select
                                            data-model="on(change)|selectedTypeFilter"
                                            class="border-foreground/15 bg-surface px-4 py-3 text-sm text-foreground"
                                        >
                                            <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="space-y-2 border border-accent/20 bg-surface/70 px-4 py-3">
                                    <div class="text-xs font-semibold uppercase tracking-label text-foreground/60">{{ 'shop.information_modal_shipping_types'|trans }}</div>
                                    <div class="flex flex-wrap gap-2">
                                        {% for type in productTypes %}
                                            <div class="border border-accent/25 bg-page px-3 py-2 text-xs text-foreground">
                                                <div class="font-semibold">{{ type.label }}</div>
                                                <div class="mt-1 text-foreground/65">{{ type.equivalency_label }}</div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if filteredRows is not empty %}
                                <div class="overflow-x-auto border border-accent/25">
                                    <table class="min-w-full divide-y divide-accent/25 text-left">
                                        <thead class="bg-page/70 text-xs uppercase tracking-card-title text-foreground/70">
                                        <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-accent/15 bg-surface">
                                        {% for fee in filteredRows %}
                                            <tr>
                                                <td class="px-4 py-3 align-top">
                                                    <div class="text-caption font-semibold uppercase tracking-card-title text-foreground/55">{{ fee.context_label }}</div>
                                                    <div class="mt-1 text-sm font-medium text-foreground">{{ fee.quantity_label }}</div>
                                                </td>
                                                <td class="px-4 py-3 align-top">
                                                    <div class="flex items-start gap-2">
                                                        <span class="text-sm font-medium text-foreground">{{ 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="border-foreground/20 text-foreground/70 inline-flex h-5 w-5 items-center justify-center rounded-full border text-caption font-semibold"
                                                                    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-accent/30 bg-surface p-3 text-left text-xs leading-5 text-foreground 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 text-caption font-semibold uppercase tracking-card-title text-foreground/55">{{ '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-sm leading-7 text-foreground/80">
                                    {{ 'shop.information_modal_shipping_empty'|trans }}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
</div>
