{% 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 class="m-2 flex h-full flex-col gap-4" id="cart">
            <div class="text-primary-light">{{ 'cart.cart-empty' | trans }}</div>
            <a
                href="{{ path('shop') }}"
                class="hover:bg-foreground inline-flex w-full items-center justify-center bg-surface-contrast p-2.5 text-center font-medium text-on-foreground">
                {{ 'cart.discover'|trans }}
            </a>
        </div>
        <turbo-stream action="update" targets=".cart-items-count">
            <template> 0 </template>
        </turbo-stream>
    {% else %}
        <div class="flex h-full min-h-0 flex-col overflow-hidden" id="cart">
            <!-- prettier-ignore -->
            {{ 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="border-accent/15 mb-3 flex flex-col gap-1.5 rounded-sm border bg-surface/90 p-2" data-cart-rules>
                        {% if not shippingCountryRulePending and deliverySourceLabel is not empty %}
                            <div class="text-foreground/55 text-xs font-medium md:text-xs">
                                {{ deliverySourceLabel }}
                            </div>
                        {% endif %}

                        {% for rule in visibleQuantityProgressRules %}
                            <div class="flex flex-col gap-1">
                                <div class="flex items-start justify-between gap-2 text-sm leading-tight md:text-base">
                                    <div class="min-w-0">
                                        <div class="min-w-0">
                                            <span class="text-foreground font-medium">{{ rule.title }} :</span>
                                            <span class="text-foreground/75">{{ rule.requirementLabel }}</span>
                                        </div>
                                    </div>

                                    <div class="shrink-0 font-semibold {{ rule.isComplete ? 'text-depot-available' : 'text-foreground' }}">
                                        {{ rule.currentQuantity }}/{{ rule.targetQuantity }}
                                    </div>
                                </div>

                                <div class="h-1 overflow-hidden rounded-full bg-border-muted">
                                    <div
                                        class="h-full rounded-full transition-all duration-300 {{ rule.isComplete ? 'bg-depot-available' : 'bg-accent' }}"
                                        style="width: {{ rule.progressPercent }}%"></div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

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

            <div class="border-accent bg-page mt-auto flex shrink-0 flex-col gap-4 border-t pt-4 pb-2">
                <div class="border-accent flex justify-between border-b pb-4">
                    <div class="font-medium">{{ ('cart.subtotal')|trans() }}</div>
                    <div>{{ form.vars.data.getPricing.subtotalTTC | price_format }} €</div>
                </div>
                {% if form.vars.data.getPricing.degressiveTTC > 0 %}
                    <div class="text-foreground/75 -mt-2 flex justify-between text-sm">
                        <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="flex justify-between text-sm md:text-base">
                    <div>{{ ('cart.delivery')|trans() }}</div>
                    <div class="text-accent">{{ ('cart.undefined')|trans() }}</div>
                </div>
                <div class="border-accent flex justify-between border-t pt-4 font-serif font-semibold md:text-lg">
                    <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="hover:bg-foreground w-full cursor-pointer bg-surface-contrast p-2.5 text-center font-medium text-on-foreground">
                    {{ ('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>
