<div class='container--l ma'>
  {% if cart.item_count > 0 %}
    <h1>{{ 'cart.general.title' | t }}</h1>

    <form action="/cart" method="post" novalidate>
      <table class="responsive-table">
        <thead class="small--hide">
          <tr>
            <th colspan="2">{{ 'cart.label.product' | t }}</th>
            <th>{{ 'cart.label.price' | t }}</th>
            <th>{{ 'cart.label.quantity' | t }}</th>
            <th>{{ 'cart.label.total' | t }}</th>
          </tr>
        </thead>
        <tbody>

          {% for item in cart.items %}

          {% comment %}

          Cart Item Template
          =====================
          The data-label attributes on <td> elements are mobile-friendly
          helpers used for responsive-table labels
          {% endcomment %}

            <tr class="responsive-table-row">
              <td data-label="{{ 'customer.order.product' | t }}">
                <a href="{{ item.url | within: collections.all }}">
                  <img src="{{ item | img_url: '240x240' }}" alt="{{ item.title | escape }}">
                </a>
              </td>
              <td>
                <a href="{{ item.url }}">{{ item.product.title }}</a>

                {% unless item.product.has_only_default_variant %}
                  <p>{{ item.variant.title }}</p>
                {% endunless %}

                <p>{{ item.vendor }}</p>

                {%- assign property_size = item.properties | size -%}

                {% if property_size > 0 %}
                  {% for p in item.properties %}
                    {% unless p.last == blank %}
                    {{ p.first }}:

                    {% if p.last contains '/uploads/' %}
                      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                      {{ p.last }}
                    {% endif %}

                    {% endunless %}
                  {% endfor %}
                {% endif %}

                <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                  <small>{{ 'cart.general.remove' | t }}</small>
                </a>
              </td>
              <td data-label="{{ 'cart.label.price' | t }}">
                {% if item.original_line_price != item.line_price %}
                  <span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
                  {{ item.price | money }}
                  <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
                  <s>{{ item.original_price | money }}</s>
                {% else %}
                  {{ item.price | money }}
                {% endif %}
              </td>
              <td data-label="{{ 'cart.label.quantity' | t }}">
                <input type="number"
                       name="updates[]"
                       id="updates_{{ item.key }}"
                       value="{{ item.quantity }}"
                       min="0"
                       aria-label="{{ 'cart.general.item_quantity' | t }}">
              </td>
              <td data-label="{{ 'cart.label.total' | t }}">
                {{ item.line_price | money }}
              </td>
            </tr>

          {% endfor %}
        </tbody>
      </table>

      {% if settings.cart_notes_enable %}
        <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
        <textarea name="note" id="CartSpecialInstructions">{{ cart.note }}</textarea>
      {% endif %}

      <p>{{ 'cart.general.subtotal' | t }}</p>
      <p>{{ cart.total_price | money }}</p>
      {% if cart.total_discounts > 0 %}
        <p>{{ 'cart.general.savings' | t }} {{ cart.total_discounts | money }}</p>
      {% endif %}
      <p>{{ 'cart.general.shipping_at_checkout' | t }}</p>
      <input type="submit" name="update" value="{{ 'cart.general.update' | t }}">
      <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
    </form>
  {% else %}
    <h1>{{ 'cart.general.title' | t }}</h1>

    {% comment %}
    Cart empty state
    {% endcomment %}
    <div class="supports-cookies">
      <p>{{ 'cart.general.empty' | t }}</p>
      <p>{{ 'cart.general.continue_browsing_html' | t }}</p>
    </div>

    {% comment %}
    Cart no cookies state
    ---------------------
    Browser cookies are required to use the cart. If cookies aren't enabled in the
    browser a message is displayed prompting the user to enable them.
    {% endcomment %}
    <div class="supports-no-cookies">
      <p>{{ 'cart.general.cookies_required' | t }}</p>
    </div>
  {% endif %}
</div>
