{% if items %}
<table class="cart-table">
    <thead>
        <tr><th>{{ t.cart_col_product }}</th><th>{{ t.cart_col_price }}</th><th>{{ t.cart_col_quantity }}</th><th>{{ t.cart_col_total }}</th><th></th></tr>
    </thead>
    <tbody>
        {% for item in items %}
        <tr>
            <td data-label="{{ t.cart_col_product }}" class="cart-cell-product">
                {% if item.product.image_url %}<img src="{{ item.product.image_url }}" alt="">{% endif %}
                <span class="cart-product-info">
                    {{ item.product.display_name }}
                    {% if item.product.market_name %}<br>
                    <span class="market-badge-pill" style="margin-top: 4px;">
                        {% if item.product.market_logo_url %}<img src="{{ item.product.market_logo_url }}" alt="">{% endif %}
                        <span>{{ item.product.market_name|truncatechars:14 }}</span>
                    </span>
                    {% if item.product.quality_grade %} <small style="color: var(--muted);">{{ item.product.quality_grade }}</small>{% endif %}
                    {% elif item.product.vendor_name %}<br>
                    <span class="market-badge-pill" style="margin-top: 4px;">
                        {% if item.product.vendor_logo_url %}<img src="{{ item.product.vendor_logo_url }}" alt="">{% endif %}
                        <span>{{ item.product.vendor_name|truncatechars:14 }}</span>
                    </span>
                    {% if item.product.quality_grade %} <small style="color: var(--muted);">{{ item.product.quality_grade }}</small>{% endif %}
                    {% elif item.product.quality_grade %}<br><small style="color: var(--muted);">{{ item.product.quality_grade }}</small>{% endif %}
                    {% if item.measure_label %}<br><small style="color: var(--muted);">{{ item.measure_label }}</small>{% endif %}
                </span>
            </td>
            <td data-label="{{ t.cart_col_price }}">TSh {{ item.unit_price|floatformat:0 }}/{% if item.measure_label %}{{ item.measure_label }}{% else %}{{ item.product.unit_display }}{% endif %}{% if item.min_qty > 1 %}<br><small style="color: var(--muted);">{{ t.cart_min }} {{ item.min_qty }}</small>{% endif %}</td>
            <td data-label="{{ t.cart_col_quantity }}">
                <div class="qty-controls">
                    <form method="post" action="{% url 'market:update_cart_item' item.cart_item_id %}" class="cart-update-form">
                        {% csrf_token %}<input type="hidden" name="action" value="decrease">
                        <button type="submit" aria-label="{{ t.aria_quantity }} -">-</button>
                    </form>
                    {{ item.quantity }}
                    <form method="post" action="{% url 'market:update_cart_item' item.cart_item_id %}" class="cart-update-form">
                        {% csrf_token %}<input type="hidden" name="action" value="increase">
                        <button type="submit" aria-label="{{ t.aria_quantity }} +">+</button>
                    </form>
                </div>
            </td>
            <td data-label="{{ t.cart_col_total }}">TSh {{ item.line_total|floatformat:0 }}</td>
            <td data-label="" class="cart-cell-remove">
                <form method="post" action="{% url 'market:update_cart_item' item.cart_item_id %}" class="cart-update-form">
                    {% csrf_token %}<input type="hidden" name="action" value="remove">
                    <button type="submit" class="btn-small">{{ t.cart_remove }}</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="cart-summary">
    <div class="cart-summary-row total">
        <span>{{ t.cart_subtotal }}</span>
        <span>TSh {{ subtotal|floatformat:0 }}</span>
    </div>
</div>

<div style="text-align: right; margin-top: 24px;">
    <a href="{% url 'market:checkout_location' %}" class="btn-cta">{{ t.cart_proceed_checkout }} &rarr;</a>
</div>
{% else %}
<p>{{ t.cart_empty }} <a href="{% url 'market:market' %}">{{ t.cart_browse_market }}</a> {{ t.cart_to_add_produce }}</p>
{% endif %}