<script type="text/javascript">
  function remove_item(id) {
      document.getElementById('updates_'+id).value = 0;
      document.getElementById('cart').submit();
  }
</script>

<div id="cart-page">

  {% if cart.item_count == 0 %}
    <p>Your shopping cart is empty...</p>
  <p><a href="/"><img src="{{ 'continue_shopping_icon.gif' | asset_url }}" alt="Continue shopping"/></a><p>
  {% else %}

  <form action="/cart" method="post" id="cart">

  <table class="cart">
      <tr>
        <th colspan="2">Product</th>
        <th class="short">Qty</th>
        <th>Price</th>
        <th>Total</th>
        <th class="short">Remove</th>
      </tr>

      {% for item in cart.items %}
      <tr class="{% cycle 'odd', 'even' %}">
        <td class="short">{{ item.product.featured_image |  product_img_url: 'thumb' | img_tag }}</td>
    <td><a href="{{item.product.url}}">{{ item.title }}</a></td>
        <td class="short"><input type="text" class="quantity" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{item.quantity}}" onfocus="this.select();"/></td>
        <td class="cart-price">{{ item.price | money }}</td>
        <td class="cart-price">{{item.line_price | money }}</td>
        <td class="short"><a href="#" onclick="remove_item({{item.variant.id}}); return false;" class="remove"><img src="{{ 'cancel_icon.gif' | asset_url }}" alt="Remove" /></a></td>
      </tr>
      {% endfor %}
    </table>
    <p class="updatebtn"><input type="image" value="Update Cart" name="update" src="{{ 'update_icon.gif' | asset_url }}" alt="Update" /></p>
    <p class="subtotal">
    <strong>Subtotal:</strong> {{cart.total_price | money_with_currency }}
    </p>
    <p class="checkout"><input type="image" src="{{ 'checkout_icon.gif' | asset_url }}" alt="Proceed to Checkout" value="Proceed to Checkout" name="checkout"  /></p>

    {% if additional_checkout_buttons %}
    <div class="additional-checkout-buttons">
      <p>- or -</p>
      {{ content_for_additional_checkout_buttons }}
    </div>
    {% endif %}

  </form>

  {% endif %}

</div>
