{% load piggyback_tags %}
<div class="pb-cart" id="cart-content">
  {% if order and order.items.exists %}
    <div class="pb-cart__items" id="cart-items">
      {% for item in order.items.all %}
        <div class="pb-cart-item" id="cart-item-{{ item.id }}">
          <div class="pb-cart-item__card">
            <span>🎴</span>
            <div>
              <h3>{{ item.card.title }}</h3>
              <p>To: {{ item.recipient.full_name|default:"Not set" }}</p>
              <span class="pb-badge">{{ item.get_delivery_method_display }}</span>
              {% if item.gift_addon %}<span class="pb-badge">🎁 {{ item.gift_addon.name }}</span>{% endif %}
            </div>
          </div>
          <div class="pb-cart-item__actions">
            <div class="pb-cart-item__price">£{{ item.line_total_pence|pence }}</div>
            <button type="button"
                    class="pb-btn pb-btn--sm pb-btn--danger"
                    hx-delete="{% url 'piggyback:cart_remove' item_id=item.id %}"
                    hx-target="#cart-content"
                    hx-select="#cart-content"
                    hx-swap="outerHTML">
              Remove
            </button>
          </div>
        </div>
      {% endfor %}
    </div>

    <aside class="pb-cart__summary" id="cart-summary">
      <h3>Order Summary</h3>
      <div class="pb-cart__row"><span>Subtotal</span><span>£{{ order.subtotal_pence|pence }}</span></div>
      {% if order.discount_pence %}
        <div class="pb-cart__row"><span>Discount</span><span>-£{{ order.discount_pence|pence }}</span></div>
      {% endif %}
      <div class="pb-cart__row pb-cart__row--total"><span>Total</span><span>£{{ order.total_pence|pence }}</span></div>
      <form method="post"
            hx-post="{% url 'piggyback:cart' %}"
            hx-target="#cart-content"
            hx-select="#cart-content"
            hx-swap="outerHTML">
        {% csrf_token %}
        <input type="text" name="promo_code" placeholder="Promo code (try FIRSTCARD)" class="pb-input"
               value="{{ order.promo_code }}">
        <button type="submit" name="action" value="apply_promo" class="pb-btn pb-btn--outline pb-btn--block">Apply promo</button>
        <button type="submit" name="action" value="checkout" class="pb-btn pb-btn--primary pb-btn--block">Checkout</button>
      </form>
    </aside>
  {% else %}
    <div class="pb-empty-state">
      <h2>Your cart is empty</h2>
      <a href="{% url 'piggyback:catalog' %}" class="pb-btn pb-btn--primary">Browse Cards</a>
    </div>
  {% endif %}
</div>