{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cart.css') }}">
{% endblock %}

{% block content %}
<div class="cart-container">
  <h1>Your Shopping Cart</h1>

  {% if items %}
  <div class="cart-items">
    <table class="cart-table">
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Subtotal</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td class="product-info">
            <div class="product-image">
              <img src="{{ item.product.get_image_url() }}" alt="{{ item.product.name }}">
            </div>
            <div class="product-details">
              <h4>{{ item.product.name }}</h4>
              <p class="product-description">{{ item.product.description[:80] }}...</p>
              <div class="stock-info">
                {% if item.product.stock > 10 %}
                <span class="in-stock">✓ In Stock</span>
                {% elif item.product.stock > 0 %}
                <span class="low-stock">⚠ Low Stock ({{ item.product.stock }} left)</span>
                {% else %}
                <span class="out-of-stock">✗ Out of Stock</span>
                {% endif %}
              </div>
            </div>
          </td>
          <td class="price">${{ "%.2f"|format(item.product.price) }}</td>
          <td class="quantity">
            <form method="POST" action="{{ url_for('cart.update_cart', item_id=item.id) }}" class="quantity-form">
              <input type="number" name="quantity" value="{{ item.quantity }}" min="1" max="{{ item.max_quantity }}"
                class="quantity-input">
              <button type="submit" class="btn-update">Update</button>
              <div class="max-quantity">
                Max: {{ item.max_quantity }}
              </div>
            </form>
          </td>
          <td class="subtotal">${{ "%.2f"|format(item.subtotal) }}</td>
          <td class="actions">
            <form method="POST" action="{{ url_for('cart.remove_from_cart', item_id=item.id) }}"
              onsubmit="return confirm('Remove {{ item.product.name }} from cart?')">
              <button type="submit" class="btn-remove">
                Remove
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div class="cart-summary">
      <div class="summary-card">
        <h3>Order Summary</h3>
        <div class="summary-row">
          <span>Subtotal:</span>
          <span>${{ "%.2f"|format(total) }}</span>
        </div>
        <div class="summary-row">
          <span>Shipping:</span>
          <span>Free</span>
        </div>
        <div class="summary-row total">
          <span>Total:</span>
          <span>${{ "%.2f"|format(total) }}</span>
        </div>

        <div class="cart-actions">
          <a href="{{ url_for('main.products') }}" class="btn-continue">
            ← Continue Shopping
          </a>

          <form method="POST" action="{{ url_for('cart.clear_cart') }}" style="display: inline;">
            <button type="submit" class="btn-clear" onclick="return confirm('Clear entire cart?')">
              Clear Cart
            </button>
          </form>

          <a href="{{ url_for('cart.checkout') }}" class="btn-checkout">
            Proceed to Checkout →
          </a>
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <div class="empty-cart">
    <div class="empty-icon">🛒</div>
    <h3>Your cart is empty</h3>
    <p>Add some products to your cart and they will appear here.</p>
    <a href="{{ url_for('main.products') }}" class="btn-shop">
      Browse Products
    </a>
  </div>
  {% endif %}
</div>
{% endblock %}