{{SHOPCART_CSS}}

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">

$(function() {
	$(".sc_mobi_nav_trigger").click(function() {
		
		$(".sc_mobi_nav_container").toggleClass("sc_mobi_showme");
	});
});
	
</script>

<div class="sc_main_column sc_content_style">
	<form name="theForm" method="post" action="{{SELF_LINK}}">
		<input type="hidden" name="command" value="updateCart">
		<div class="sc_featureheaders">
			<div class="sc_featured_box">Your Shopping Cart </div>
		</div>
		
    {{SHOP_CART_NO_PRODUCTS_DISPLAY}}
    <div class="sc_topbottom_pad sc_toplinks_pad">
    	<div class="sc_align_center">
    		<span class="button_style_grey"><a href="{{SELF_LINK}}">Continue to Shop </a></span>
    	</div>
    </div>
    <div class="sc_topbottom_pad">Your cart is currently empty.</div>
    {{/SHOP_CART_NO_PRODUCTS_DISPLAY}}
                
    {{SOLD_OUT_MESSAGE}}
    <div class="sc_topheader_pad">
    	<br />
      <div class="sold_out_message">{{SOLD_OUT}}</div>
    </div>
    {{/SOLD_OUT_MESSAGE}}
    
    {{SHOP_CART_DISPLAY}}
    <div class="sc_topbottom_pad">
  		<div class="sc_div_grid_2col_57 sc_cart_buttons_container">
  			<div class="sc_cart_buttons_left">
  				<span class="button_style_grey"><a href="{{SELF_LINK}}">Continue to Shop </a></span>
  			</div>
  			<div class="sc_cart_buttons_right">
  				<span class="button_style_grey"><input type="button" onclick="javascript:document.theForm.command.value = 'updateCart'; document.theForm.submit();" value="Update Quantity"></span>
  				<div class="sc_cart_buttons_checkout">
  					<span class="button_style"><input type="submit" onclick="javascript:document.theForm.command.value = 'checkout'; document.theForm.submit();" value="Checkout"></span>
  				</div>
  			</div>
  		</div>
    </div>
    
    <div class="sc_toplinks_pad">
			<div class="shopcart_total_style">
				{{SHOP_CART_TOTALS_LINE}}
				<table style="width:100%;" title="Your Subtotal">
          <tr>
            <td style="width: 80%; text-align: right;" class="subtotal">Your Subtotal </td>
            <td style="width: 20%; text-align: right;" class="subtotal">${{SHOP_CART_SUBTOTAL_FORMATTED}}</td>
          </tr>
          {{COUPON_ERROR_BLOCK}}
          <tr>
            <td style="text-align center;" class="subtotal" colspan="2">{{COUPON_ERROR}}</td>
          </tr>
          {{/COUPON_ERROR_BLOCK}}
          {{COUPONS}}
          {{LOOP}}
          {{ITEM_1}}
          <tr>
            <td style="width: 80%; text-align: right;" class="subtotal">&lt;<a href="{{SELF_LINK}}?command=removeCoupon&couponID={{COUPON_ID}}">remove</a>&gt; Coupon: {{COUPON_NAME}} </td>
            <td style="width: 20%; text-align: right;" class="subtotal">${{COUPON_DISCOUNT_AMOUNT}}</td>
          </tr>
          {{/ITEM_1}}
          {{/LOOP}}
          {{/COUPONS}}
        </table>
        {{/SHOP_CART_TOTALS_LINE}} 
			</div>
		</div>
		
		<div class="sc_featureheaders">
			<div class="style21">Your Items </div>
		</div>
			
    {{SHOP_CART_PRODUCTS_LOOP}}
    <div class="sc_topbottom_pad sc_cart_item">
    	<table style="width: 100%;" title="Shopping Cart > {{PRODUCT_NAME}}">
        <tr>
          <td style="width: 180px; vertical-align: top;" class="block_cell_mobi_small"><img src="./photos/shopcart/productSmallImages/{{PRODUCT_FILENAME}}" alt="{{PRODUCT_NAME}}" class="sc_product_border" /></td>
          <td class="sc_product_text_spacer block_cell_mobi_small">
          	<span class="style14"><a href="{{PRODUCT_LINK}}">{{PRODUCT_NAME}}</a></span> ({{PRODUCT_NUMBER}})<br />
            <span class="sc_product_desc">{{PRODUCT_DESCRIPTION}}</span><br />
            <span class="button_style_grey"><a href="{{PRODUCT_LINK}}">More&nbsp;Info</a></span>
          </td>
        </tr>
      </table>
      <div class="sc_special_text_pad">
        <table title="{{PRODUCT_NAME}} Details">
          <tr>
            <td class="block_cell_mobi">Price: <span class="style18">${{PRODUCT_PRICE_FORMATTED}}</span></td>
            <td class="quantity_pad block_cell_mobi"> <label for="product_{{CART_ITEM_INDEX}}">Quantity:</label>
              <input name="product_{{CART_ITEM_INDEX}}" id="product_{{CART_ITEM_INDEX}}" type="text" size="3" value="{{PRODUCT_QUANTITY}}" /></td>
            
            <td class="block_cell_mobi">
            	<div class="button_style_red_sm"><a href="{{SELF_LINK}}?command=updateCart&removeProduct_{{CART_ITEM_INDEX}}=Y">Remove</a></div>
            </td>
          </tr>
        </table>
			</div>
      {{BACK_ORDERED_MESSAGE}}
        <div class="back_ordered_message"> {{BACK_MESSAGE}} </div>
      {{/BACK_ORDERED_MESSAGE}}
      
      <div class="sc_product_text_spacer">
      	{{SHOP_CART_EXTENSIONS}}
        	{{SHOP_CART_EXTENSION_LOOP}}
          	{{SCE_ITEM_1}}
            	{{EXTENSION_NAME}} - {{EXTENSION_PRICEAFFECT}}{{EXTENSION_PRICEAFFECTAMOUNT}} {{EXTENSION_VALUE}}<br />
						{{/SCE_ITEM_1}}
					{{/SHOP_CART_EXTENSION_LOOP}}
				{{/SHOP_CART_EXTENSIONS}}
			</div>
		</div>
    {{/SHOP_CART_PRODUCTS_LOOP}} 
<!--
		<div class="sc_topbottom_pad">
			<div class="sc_toplinks_pad">
				<div class="sc_div_grid_2col_57">
    			<div>
    				<span class="button_style_grey"><a href="{{SELF_LINK}}">Continue to Shop </a></span>
    			</div>
    			<div>
    				<span class="button_style_grey"><input type="button" onclick="javascript:document.theForm.command.value = 'updateCart'; document.theForm.submit();" value="Update Quantity"></span>
    				<div style="float: right;">
    					<span class="button_style"><input type="button" onclick="javascript:document.theForm.command.value = 'checkout'; document.theForm.submit();" value="Checkout"></span>
    				</div>
    			</div>
    		</div>
			</div>
		</div>
		-->
    {{/SHOP_CART_DISPLAY}}

  </form>
</div>