{% form_theme form with app_form_themes() only %}

<div {{ attributes }} class="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
    {% if deleteItemId %}
        <turbo-stream action="remove" target="cart_{{ deleteItemId }}"> </turbo-stream>
    {% endif %}

    {% if form.vars.data == null or form.vars.data.getQuantity == 0 %}
        <div id="cart" class="flex h-full flex-col items-center justify-center text-center">
            <div class="border border-primary/10 bg-surface px-8 py-10">
                <span aria-hidden="true" class="material-symbols-outlined text-[44px] text-primary/30">shopping_bag</span>
                <p class="mt-4 text-lg text-primary">{{ 'theme.cart.empty_title'|trans }}</p>
                <p class="mt-2 text-sm leading-7 text-on-surface-variant">{{ 'theme.cart.empty_text'|trans }}</p>
            </div>

            <a href="{{ path('shop') }}" class="mt-6 inline-flex w-full cursor-pointer items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-secondary">
                {{ 'theme.cart.empty_cta'|trans }}
            </a>
        </div>

        <turbo-stream action="update" targets=".cart-items-count">
            <template>0</template>
        </turbo-stream>
    {% else %}
        <div id="cart" class="flex h-full min-h-0 flex-col overflow-hidden">
            {{ form_start(form, {'attr': {'data-model': 'debounce(300)|on(change)|*', 'class': 'flex h-full min-h-0 flex-col'}}) }}

            <div class="min-h-0 flex-1 overflow-y-auto pb-4" data-cart-scroll-container>
                {% set visibleQuantityProgressRules = quantityProgressRules|filter(rule => not rule.isComplete) %}

                {% if visibleQuantityProgressRules is not empty %}
                    {% set deliverySourceLabel = '' %}
                    {% for rule in visibleQuantityProgressRules %}
                        {% if deliverySourceLabel is empty and rule.sourceLabel is not empty %}
                            {% set deliverySourceLabel = rule.sourceLabel %}
                        {% endif %}
                    {% endfor %}

                    <div class="mb-4 space-y-3 border border-primary/10 bg-surface px-4 py-4" data-cart-rules>
                        {% if not shippingCountryRulePending and deliverySourceLabel is not empty %}
                            <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/55">
                                {{ deliverySourceLabel }}
                            </div>
                        {% endif %}

                        {% for rule in visibleQuantityProgressRules %}
                            <div class="space-y-2">
                                <div class="flex items-start justify-between gap-3 text-sm leading-tight">
                                    <div class="min-w-0">
                                        <span class="font-medium text-primary">{{ rule.title }} :</span>
                                        <span class="text-on-surface-variant">{{ rule.requirementLabel }}</span>
                                    </div>
                                    <div class="shrink-0 font-semibold text-primary">{{ rule.currentQuantity }}/{{ rule.targetQuantity }}</div>
                                </div>

                                <div class="h-1 overflow-hidden bg-primary/10">
                                    <div class="h-full bg-secondary transition-all duration-300" style="width: {{ rule.progressPercent }}%"></div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {{ form_widget(form.items, {'attr': {'class': 'flex flex-col gap-3'}}) }}
                {{ form_rest(form) }}
            </div>

            <div class="mt-auto shrink-0 border-t border-primary/10 bg-surface px-1 pt-4">
                <div class="flex justify-between border-b border-primary/10 pb-4 text-primary">
                    <div>{{ 'cart.subtotal'|trans }}</div>
                    <div>{{ form.vars.data.getPricing.subtotalTTC | price_format }} €</div>
                </div>

                {% if form.vars.data.getPricing.degressiveTTC > 0 %}
                    <div class="mt-3 flex justify-between text-sm text-on-surface-variant">
                        <div>{{ (form.vars.data.getPricing.degressiveIsBottleOffered ? 'shop.of_which_bottle_offered' : 'shop.of_which_degressive')|trans }}</div>
                        <div>-{{ form.vars.data.getPricing.degressiveTTC | price_format }} €</div>
                    </div>
                {% endif %}

                <div class="mt-4 flex justify-between text-sm text-primary">
                    <div>{{ 'cart.delivery'|trans }}</div>
                    <div class="text-secondary">{{ 'cart.undefined'|trans }}</div>
                </div>

                <div class="mt-4 flex justify-between border-t border-primary/10 pt-4 font-display text-[18px] font-medium [font-optical-sizing:auto] text-primary">
                    <div>{{ 'shop.total_ttc'|trans }}</div>
                    <div>{{ form.vars.data.getPricing.subtotalTTC | price_format }} €</div>
                </div>

                <button
                    type="submit"
                    data-action="live#action:prevent"
                    data-live-action-param="debounce(300)|submitCart"
                    class="mt-4 inline-flex w-full cursor-pointer items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-secondary"
                >
                    {{ 'cart.button'|trans }}
                </button>
            </div>

            {{ form_end(form) }}
        </div>

        <turbo-stream action="update" targets=".cart-items-count">
            <template>{{ form.vars.data.getQuantity }}</template>
        </turbo-stream>
    {% endif %}
</div>
