{% extends "base.html" %}
{% import "macros/savings_highlights.html" as savings %}

{% block page_title %}Shopping Cart{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/checkout/assets/css/cart.ui.css">
{{ savings::assets() }}
{% endblock %}

{% block content %}
<main class="cart-page-container" id="shopping-cart-page" aria-labelledby="cart-page-title" aria-busy="true">
    <div id="cart-feedback" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

    <div id="cart-content" class="cart-grid" hidden>
        <div class="cart-items-section">
            <div class="cart-items-card">
                <div class="cart-header">
                    <h1 class="cart-title" id="cart-page-title">My Cart</h1>
                    <div class="cart-header-actions">
                        <a href="/plugins/catalog/all-products" class="add-more-link">
                            <i class="fas fa-plus-circle"></i> Add more items
                        </a>
                        <button type="button" id="clear-cart-btn" class="btn-clear-cart" data-cart-action="clear">
                            <i class="fas fa-trash-alt"></i> Clear Cart
                        </button>
                        <span id="header-item-count" class="item-count-badge">0 Items</span>
                    </div>
                </div>

                <div id="cart-free-delivery" class="cart-free-delivery" aria-live="polite" hidden>
                    <div class="cart-free-delivery-top">
                        <span id="cart-free-delivery-msg" class="cart-free-delivery-msg">
                            <i class="fas fa-truck" aria-hidden="true"></i>
                            <span class="cart-free-delivery-msg-text"></span>
                        </span>
                        <span id="cart-free-delivery-threshold" class="cart-free-delivery-threshold" hidden></span>
                    </div>
                    <div class="cart-free-delivery-track" aria-hidden="true">
                        <div id="cart-free-delivery-fill" class="cart-free-delivery-fill"></div>
                    </div>
                </div>

                <div id="cart-items-list">
                    <!-- Loaded via JS -->
                </div>

                <div class="cart-footer">
                    <a href="/plugins/catalog/all-products" class="add-more-link">
                        <i class="fas fa-plus-circle"></i> Add more items to your cart
                    </a>
                </div>
            </div>
        </div>

        <div class="cart-summary-section">
            <div class="cart-summary-card">
                <h2 class="summary-heading">Order Summary</h2>

                <div id="cart-summary-mobile-totals" class="cart-summary-mobile-totals" aria-live="polite">
                    <span id="cart-summary-line-items"></span>
                    <span id="cart-summary-line-total"></span>
                </div>

                {{ savings::lifetime_block(id="cart-lifetime-savings") }}
                {{ savings::block(id="cart-customer-savings") }}

                <div class="summary-details">
                    <div class="summary-row">
                        <span>Items Subtotal</span>
                        <span id="summary-subtotal">...</span>
                    </div>
                    <div id="cart-pass-addon-row" class="summary-row" hidden>
                        <span id="cart-pass-addon-label">Premium Pass</span>
                        <span id="summary-pass-addon">...</span>
                    </div>
                    <div class="summary-row">
                        <span>Estimated Shipping</span>
                        <span id="summary-shipping" class="text-success">...</span>
                    </div>
                    <div class="summary-row">
                        <span>Tax</span>
                        <span>...</span>
                    </div>
                </div>

                <div class="summary-total-row">
                    <span>Total Amount</span>
                    <span id="summary-total">...</span>
                </div>

                <button type="button" id="cart-checkout-btn" class="checkout-btn">
                    Checkout Now ➔
                </button>

                <div class="trust-badges">
                    <i class="fab fa-cc-visa fa-2x"></i>
                    <i class="fab fa-cc-mastercard fa-2x"></i>
                    <i class="fab fa-cc-apple-pay fa-2x"></i>
                    <i class="fas fa-lock fa-lg" aria-label="Secure checkout"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Empty State -->
    <section id="empty-cart-state" class="empty-cart-state" aria-labelledby="empty-cart-title" hidden>
        <div class="empty-icon">🛒</div>
        <h2 id="empty-cart-title">Your cart is empty</h2>
        <p>Add items to your cart to see them here.</p>
        <a href="/" class="blocks-button blocks-button-primary">Start Shopping</a>
    </section>

    <!-- Loading State -->
    <div id="cart-loading" aria-live="polite">
        <div class="processing-spinner" aria-hidden="true"></div>
        <p>Loading your items...</p>
    </div>

</main>

<template id="cart-item-template">
    <div class="cart-item-row">
        <div class="cart-item-image-box">
            <img src="" alt="" class="cart-item-img">
        </div>
        <div class="cart-item-info">
            <div>
                <h3 class="cart-item-name"></h3>
                <div class="price-and-qty">
                    <span class="cart-item-price-meta"></span>
                    <div class="qty-control">
                        <button type="button" class="qty-btn dec-btn" aria-label="Decrease quantity">−</button>
                        <span class="qty-value" aria-live="polite">0</span>
                        <button type="button" class="qty-btn inc-btn" aria-label="Increase quantity">+</button>
                    </div>
                </div>
            </div>
            <div class="cart-item-subtotal"></div>
            <button type="button" class="cart-item-remove-btn"><i class="fas fa-trash-alt" aria-hidden="true"></i><span>Remove</span></button>
        </div>
    </div>
</template>

{% endblock %}

{% block scripts %}
<script src="/plugins/checkout/assets/cart.js?v={{ now_ts }}"></script>
{% endblock %}