{% extends "base.html" %}
{% block content %}
<h1 class="mm-section-title">Cart</h1>

{% if lines %}
<div class="row g-4">
  <!-- Items -->
  <div class="col-12 col-lg-8">
    <div class="mm-soft-card p-0">
      <div class="table-responsive">
        <table class="table align-middle m-0">
          <thead class="table-light">
            <tr>
              <th>Product</th>
              <th class="text-center">Qty</th>
              <th class="text-end">Unit price</th>
              <th class="text-end">Subtotal</th>
            </tr>
          </thead>
          <tbody>
            {% for row in lines %}
            <tr>
              <td>
                <div class="d-flex align-items-center gap-2">
                  {% if row.product.thumbnail %}
                    <img src="{{ row.product.thumbnail.url }}" alt="{{ row.product.title }}"
                         class="rounded" style="width:56px;height:56px;object-fit:cover;">
                  {% endif %}
                  <a class="text-decoration-none" href="{% url 'product_detail' row.product.slug %}">
                    {{ row.product.title }}
                  </a>
                </div>
              </td>
              <td class="text-center">{{ row.qty }}</td>
              <td class="text-end">$ {{ row.product.price }}</td>
              <td class="text-end fw-bold">$ {{ row.line_total|floatformat:2 }}</td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-end">Total</td>
              <td class="text-end fw-bold">$ {{ total|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Summary -->
  <div class="col-12 col-lg-4">
    <div class="mm-soft-card">
      <h2 class="h6 title">Order Summary</h2>
      <div class="d-flex justify-content-between small mb-2">
        <span>Items</span>
        <span>{{ lines|length }}</span>
      </div>
      <div class="d-flex justify-content-between">
        <strong>Total</strong>
        <strong>$ {{ total|floatformat:2 }}</strong>
      </div>
      <div class="text-muted small mt-2">Taxes and shipping calculated at checkout.</div>

      <div class="d-grid mt-3">
        <!-- If you have a real checkout page, change href="/checkout/" accordingly -->
        <a class="mm-btn mm-btn-block text-center" href="/checkout/">Proceed to Checkout</a>
        <a class="btn btn-light border-0 rounded-3 mt-2" href="/store/">Continue Shopping</a>
      </div>
    </div>
  </div>
</div>
{% else %}
  <div class="mm-soft-card">
    <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
      <div>Your cart is empty.</div>
      <a class="mm-btn" href="/store/">Go to Store</a>
    </div>
  </div>
{% endif %}
{% endblock %}