<div
    class="shopping-cart"
    data-live-component="{{componentId}}"
    data-state='{{stateJson}}'
>
    <!-- Empty State -->
    <if condition="is_empty">
        <div class="cart-empty">
            <div class="empty-icon">🛒</div>
            <h3 class="empty-title">Ihr Warenkorb ist leer</h3>
            <p class="empty-text">Fügen Sie Produkte hinzu, um mit dem Einkauf zu beginnen.</p>
        </div>
    </if>

    <!-- Cart Items -->
    <if condition="has_items">
        <div class="cart-content">
            <!-- Items List -->
            <div class="cart-items">
                <div class="cart-header">
                    <h2 class="cart-title">Warenkorb ({{total_quantity}} Artikel)</h2>
                </div>

                <for items="prepared_items" as="item">
                    <div class="cart-item">
                        <div class="item-image">
                            <img src="{{item.image_url}}" alt="{{item.product_name}}" />
                        </div>

                        <div class="item-details">
                            <h3 class="item-name">{{item.product_name}}</h3>

                            <if condition="item.has_attributes">
                                <p class="item-attributes">{{item.attributes_display}}</p>
                            </if>

                            <div class="item-price">
                                <span class="price-label">Einzelpreis:</span>
                                <span class="price-value">{{item.price_formatted}}</span>
                            </div>
                        </div>

                        <div class="item-quantity">
                            <label class="quantity-label">Menge:</label>
                            <div class="quantity-controls">
                                <button
                                    class="quantity-btn quantity-decrease"
                                    data-live-action="updateQuantity"
                                    data-param-item-id="{{item.id}}"
                                    data-param-new-quantity="{{item.quantity - 1}}"
                                    {{item.can_decrease ? '' : 'disabled'}}
                                >
                                    −
                                </button>
                                <input
                                    type="number"
                                    class="quantity-input"
                                    value="{{item.quantity}}"
                                    min="1"
                                    max="99"
                                    readonly
                                />
                                <button
                                    class="quantity-btn quantity-increase"
                                    data-live-action="updateQuantity"
                                    data-param-item-id="{{item.id}}"
                                    data-param-new-quantity="{{item.quantity + 1}}"
                                    {{item.can_increase ? '' : 'disabled'}}
                                >
                                    +
                                </button>
                            </div>
                        </div>

                        <div class="item-total">
                            <span class="total-label">Gesamt:</span>
                            <span class="total-value">{{item.item_total_formatted}}</span>
                        </div>

                        <button
                            class="item-remove"
                            data-live-action="removeItem"
                            data-param-item-id="{{item.id}}"
                            title="Artikel entfernen"
                        >
                            ✕
                        </button>
                    </div>
                </for>

                <button
                    class="cart-clear"
                    data-live-action="clearCart"
                >
                    🗑️ Warenkorb leeren
                </button>
            </div>

            <!-- Cart Summary -->
            <div class="cart-summary">
                <h3 class="summary-title">Zusammenfassung</h3>

                <!-- Free Shipping Progress -->
                <if condition="!is_free_shipping">
                    <div class="free-shipping-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: {{free_shipping_progress}}%"></div>
                        </div>
                        <p class="progress-text">
                            Noch {{free_shipping_remaining_formatted}} bis kostenloser Versand!
                        </p>
                    </div>
                </if>

                <if condition="is_free_shipping">
                    <div class="free-shipping-achieved">
                        ✓ Kostenloser Versand freigeschaltet!
                    </div>
                </if>

                <!-- Discount Code -->
                <div class="discount-section">
                    <if condition="!has_discount">
                        <div class="discount-form">
                            <input
                                type="text"
                                class="discount-input"
                                placeholder="Rabattcode eingeben"
                                id="discount-code-input"
                            />
                            <button
                                class="discount-apply"
                                data-live-action="applyDiscountCode"
                                data-param-code="__from_input__"
                                onclick="this.setAttribute('data-param-code', document.getElementById('discount-code-input').value)"
                            >
                                Anwenden
                            </button>
                        </div>
                        <p class="discount-hint">Verfügbare Codes: WELCOME10, SAVE20, SUMMER15, VIP25</p>
                    </if>

                    <if condition="has_discount">
                        <div class="discount-applied">
                            <span class="discount-badge">{{discount_label}}</span>
                            <button
                                class="discount-remove"
                                data-live-action="removeDiscountCode"
                                title="Rabattcode entfernen"
                            >
                                ✕
                            </button>
                        </div>
                    </if>
                </div>

                <!-- Shipping Options -->
                <div class="shipping-section">
                    <label class="shipping-label">Versandart:</label>
                    <select
                        class="shipping-select"
                        data-live-action="changeShippingMethod"
                        data-param-method="__from_select__"
                        onchange="this.setAttribute('data-param-method', this.value); this.click();"
                    >
                        <for items="shipping_options" as="option">
                            <option value="{{option.value}}" {{option.is_selected}}>
                                {{option.label}} - {{option.cost_formatted}}
                            </option>
                        </for>
                    </select>
                </div>

                <!-- Price Breakdown -->
                <div class="price-breakdown">
                    <div class="breakdown-row">
                        <span>Zwischensumme:</span>
                        <span>{{subtotal_formatted}}</span>
                    </div>

                    <if condition="has_discount">
                        <div class="breakdown-row discount-row">
                            <span>Rabatt ({{discount_percentage}}%):</span>
                            <span class="discount-value">-{{discount_amount_formatted}}</span>
                        </div>
                        <div class="breakdown-row">
                            <span>Nach Rabatt:</span>
                            <span>{{subtotal_after_discount_formatted}}</span>
                        </div>
                    </if>

                    <div class="breakdown-row">
                        <span>Versand:</span>
                        <span>{{shipping_cost_formatted}}</span>
                    </div>

                    <div class="breakdown-row">
                        <span>MwSt ({{tax_rate_percentage}}%):</span>
                        <span>{{tax_amount_formatted}}</span>
                    </div>

                    <if condition="has_discount || is_free_shipping">
                        <div class="breakdown-row savings-row">
                            <span>Ihre Ersparnis:</span>
                            <span class="savings-value">{{total_savings_formatted}}</span>
                        </div>
                    </if>

                    <div class="breakdown-row total-row">
                        <span class="total-label">Gesamtsumme:</span>
                        <span class="total-value">{{total_formatted}}</span>
                    </div>
                </div>

                <!-- Checkout Button -->
                <button class="checkout-btn" {{meets_minimum_order ? '' : 'disabled'}}>
                    Zur Kasse
                </button>

                <if condition="!meets_minimum_order">
                    <p class="minimum-order-warning">
                        Mindestbestellwert: Noch {{minimum_order_remaining_formatted}} erforderlich
                    </p>
                </if>

                <!-- Trust Badges -->
                <div class="trust-badges">
                    <div class="trust-badge">🔒 Sichere Zahlung</div>
                    <div class="trust-badge">📦 Schneller Versand</div>
                    <div class="trust-badge">↩️ 30 Tage Rückgabe</div>
                </div>
            </div>
        </div>
    </if>
</div>

<style>
.shopping-cart {
    max-width: 1200px;
    margin: 0 auto;
}

/* Empty State */
.cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-title {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-text {
    color: #666;
    font-size: 1rem;
}

/* Cart Content */
.cart-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
}

.cart-items {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
}

.cart-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.cart-title {
    font-size: 1.5rem;
    color: #333;
}

/* Cart Item */
.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto auto auto;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    position: relative;
}

.item-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.item-attributes {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.item-price {
    font-size: 0.875rem;
    color: #666;
}

.price-value {
    font-weight: 600;
    color: #333;
}

/* Quantity Controls */
.item-quantity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.quantity-label {
    font-size: 0.875rem;
    color: #666;
}

.quantity-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quantity-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #2196F3;
}

.quantity-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-input {
    width: 50px;
    height: 32px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Item Total */
.item-total {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
}

.total-label {
    font-size: 0.75rem;
    color: #666;
}

.total-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

/* Remove Button */
.item-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border: none;
    background: #f44336;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.item-remove:hover {
    background: #d32f2f;
}

/* Clear Cart Button */
.cart-clear {
    width: 100%;
    padding: 0.75rem;
    margin-top: 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #666;
    transition: all 0.2s;
}

.cart-clear:hover {
    background: #f5f5f5;
    border-color: #f44336;
    color: #f44336;
}

/* Cart Summary */
.cart-summary {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.summary-title {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

/* Free Shipping Progress */
.free-shipping-progress {
    margin-bottom: 1.5rem;
}

.progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.free-shipping-achieved {
    padding: 0.75rem;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 6px;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Discount Section */
.discount-section {
    margin-bottom: 1.5rem;
}

.discount-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.discount-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
}

.discount-apply {
    padding: 0.75rem 1.5rem;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.discount-apply:hover {
    background: #1976D2;
}

.discount-hint {
    font-size: 0.75rem;
    color: #999;
    margin: 0;
    font-style: italic;
}

.discount-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #E8F5E9;
    border-radius: 6px;
}

.discount-badge {
    color: #2E7D32;
    font-weight: 500;
    font-size: 0.875rem;
}

.discount-remove {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
}

/* Shipping Section */
.shipping-section {
    margin-bottom: 1.5rem;
}

.shipping-label {
    display: block;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.shipping-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Price Breakdown */
.price-breakdown {
    margin-bottom: 1.5rem;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
}

.breakdown-row:last-child {
    border-bottom: none;
}

.discount-row {
    color: #4CAF50;
}

.discount-value {
    font-weight: 600;
}

.savings-row {
    background: #FFF3E0;
    margin: 0.5rem -0.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: 4px;
    color: #F57C00;
    font-weight: 500;
}

.savings-value {
    font-weight: 600;
}

.total-row {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid #333;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.total-row .total-value {
    font-size: 1.5rem;
    color: #2196F3;
}

/* Checkout Button */
.checkout-btn {
    width: 100%;
    padding: 1rem;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.checkout-btn:hover:not(:disabled) {
    background: #388E3C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.checkout-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.minimum-order-warning {
    font-size: 0.75rem;
    color: #f44336;
    text-align: center;
    margin: 0 0 1rem 0;
}

/* Trust Badges */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.trust-badge {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .cart-content {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
    }

    .item-quantity,
    .item-total {
        grid-column: 2;
    }

    .item-quantity {
        flex-direction: row;
        justify-content: flex-start;
    }

    .item-total {
        align-items: flex-start;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }
}
</style>
