{% extends 'base.html' %}
{% load static %}
{% block title %}{{ t.title_cart }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <a href="{% url 'market:market' %}" class="auth-switch" style="display: inline-block; margin-bottom: 10px;">&larr; {{ t.market_title }}</a>
        <span class="section-kicker">{{ t.cart_step }}</span>
        <h1>{{ t.cart_title }}{% if is_b2b %} <span class="b2b-hero-badge" style="color: var(--dark); border-color: var(--border); vertical-align: middle;">{{ t.cart_b2b_badge }}</span>{% endif %}</h1>

        <div id="cart-body">
            {% include 'market/_cart_body.html' %}
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var cartBody = document.getElementById('cart-body');
        if (!cartBody) return;

        cartBody.addEventListener('submit', function (e) {
            var form = e.target.closest('.cart-update-form');
            if (!form) return;
            e.preventDefault();
            var formData = new FormData(form);
            fetch(form.getAttribute('action'), {
                method: 'POST',
                body: formData,
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    cartBody.innerHTML = data.html;
                    updateCartBadges(data.cart_count);
                    if (data.message) showToast(data.message, data.tag || 'success');
                })
                .catch(function () { form.submit(); });
        });
    });
</script>
{% endblock %}