{% extends "base.html" %}
{% load static %}
{% block title %}Cart · {{ SITE_NAME }}{% endblock %}
{% block content %}
  {% include "public/_breadcrumbs.html" with title="Cart" %}
  <section class="section section-lg bg-default text-center text-sm-right">
    <div class="container">
      {% if lines %}
      <div class="table-custom-responsive">
        <table class="table-custom table-cart">
          <thead>
            <tr>
              <th>Product name</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            {% for line in lines %}
            <tr>
              <td>
                <div class="table-cart-item">
                  <a class="table-cart-figure" href="{{ line.product.get_absolute_url }}">
                    {% if line.image_url %}
                    <img src="{{ line.image_url }}" alt="" width="146" height="132"/>
                    {% elif line.product.image_id %}
                    <img src="{{ line.product.image_url }}" alt="" width="146" height="132"/>
                    {% else %}
                    <img src="{% static 'images/product-mini-1-146x132.png' %}" alt="" width="146" height="132"/>
                    {% endif %}
                  </a>
                  <div>
                    <a class="table-cart-link" href="{{ line.product.get_absolute_url }}">{{ line.product.name }}</a>
                    {% if line.color %}<div class="small">Color: {{ line.color.name }}</div>{% endif %}
                  </div>
                </div>
              </td>
              <td>${{ line.unit_price }}</td>
              <td>
                <form method="post" action="{% url 'shop:cart_update' line.product.slug %}">
                  {% csrf_token %}
                  {% if line.color %}<input type="hidden" name="color" value="{{ line.color.pk }}">{% endif %}
                  <div class="stepper-style-2">
                    <input type="number" name="quantity" value="{{ line.quantity }}" min="0" max="999">
                  </div>
                  <button class="button button-sm button-default-outline" type="submit">Update</button>
                </form>
              </td>
              <td>${{ line.line_total }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="group-xl group-middle justify-content-center">
        <div class="big font-weight-normal">Total</div>
        <div class="heading-3 font-family-base">${{ total }}</div>
        <a class="button button-lg button-primary" href="{% url 'shop:checkout' %}">Checkout</a>
      </div>
      {% else %}
      <p class="big text-center">Cart is empty.</p>
      <p class="text-center"><a class="button button-lg button-primary" href="{% url 'shop:list' %}">Continue shopping</a></p>
      {% endif %}
    </div>
  </section>
{% endblock %}