{extends file="layout.tpl"}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">You are here: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">Home</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Cart</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

{block name="main-content"}
    <div class="main">
        <article id="cart" class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">Your Cart</h1>

            <div class="btn-group checkout-progress">
                <a href="#" role="button" class="btn btn-step active"><span class="step-nb">1</span> <span class="step-label">Your Cart</span></a>
                <a href="#" role="button" class="btn btn-step disabled"><span class="step-nb">2</span> <span class="step-label">Billing and delivery</span></a>
                <a href="#" role="button" class="btn btn-step disabled"><span class="step-nb">3</span> <span class="step-label">Check my order</span></a>
                <a href="#" role="button" class="btn btn-step disabled"><span class="step-nb">4</span> <span class="step-label">Secure payment</span></a>
            </div>

            <table class="table table-cart">
                <colgroup>
                    <col width="150">
                    <col>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th class="image">&nbsp;</th>
                    <th class="product">
                        <span class="hidden-xs">Product Name</span>
                        <span class="visible-xs">Name</span>
                    </th>
                    <th class="unitprice">
                        <span class="hidden-xs">Unit Price</span>
                        <span class="visible-xs">Price</span>
                    </th>
                    <th class="qty">
                        <span class="hidden-xs">Quantity</span>
                        <span class="visible-xs">Qty</span>
                    </th>
                    <th class="subprice">
                        <span class="hidden-xs">Total <abbr title="Tax Inclusive">TTC</abbr></span>
                        <span class="visible-xs">Total</span>
                    </th>
                </tr>
                </thead>
                <tbody>

                {loop type="cart" name="cartloop"}

                <tr>
                    <td class="image">
                        <a href="{$PRODUCT_URL}" class="thumbnail">
                            {assign "cart_count" $LOOP_COUNT}
                            {ifloop rel='product-image'}
                                {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
                                    <img src="{$IMAGE_URL}" alt="Product #{$cart_count}"></a>
                                {/loop}
                            {/ifloop}
                            {elseloop rel="product-image"}
                                {images file='assets/img/product/1/118x85.png'}<img itemprop="image" src="{$asset_url}" alt="Product #{$cart_count}">{/images}
                            {/elseloop}
                    </td>
                    <td class="product" >
                        <h3 class="name"><a href="product-details.php">
                                Product #{$LOOP_COUNT}
                            </a></h3>
                        <div class="product-options">
                            <dl class="dl-horizontal">
                                <dt>Available :</dt>
                                <dd>In Stock</dd>
                                <dt>No.</dt>
                                <dd>{$REF}</dd>
                                {*<dt>Select Size</dt>
                                <dd>Large</dd>
                                <dt>Select Delivery Date</dt>
                                <dd>Jan 2, 2013</dd>
                                <dt>Additional Option</dt>
                                <dd>Option 1</dd>*}
                            </dl>
                        </div>
                        <a href="{url path="/cart/delete/{$ITEM_ID}"}" class="btn btn-remove">Remove</a>
                    </td>
                    <td class="unitprice">
                        {if $IS_PROMO == 1}
                            {assign "real_price" $PROMO_TAXED_PRICE}
                            <div class="special-price"><span class="price">{currency attr="symbol"} {$PROMO_TAXED_PRICE}</span></div>
                            <small class="old-price">instead of <span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></small>
                        {else}
                            {assign "real_price" $TAXED_PRICE}
                            <div class="special-price"><span class="price">{currency attr="symbol"} {$TAXED_PRICE}</span></div>
                        {/if}
                    </td>
                    <td class="qty">
                        <div class="form-group group-qty">
                            <form action="{url path="/cart/update"}" method="post" role="form">
                                <input type="hidden" name="cart_item" value="{$ITEM_ID}">
                                <select name="quantity" class="form-control js-update-quantity">
                                    {for $will=1 to $STOCK}
                                        <option {if $QUANTITY == $will}selected="selected"{/if}>{$will}</option>
                                    {/for}
                                </select>
                            </form>
                        </div>
                    </td>
                    <td class="subprice">
                        <span class="price">{currency attr="symbol"} {$real_price * $QUANTITY}</span>
                    </td>
                </tr>

                {/loop}

                </tbody>
                <tfoot>
                <tr >
                    <td colspan="3" class="empty">&nbsp;</td>
                    <th class="total">Total <abbr title="Tax Inclusive">TTC</abbr></th>
                    <td class="total">
                        <div class="total-price">
                            <span class="price">{currency attr="symbol"} {cart attr="total_taxed_price"}</span>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>

            <a href="{navigate to="index"}" role="button" class="btn btn-continue-shopping"><span>Continue Shopping</span></a>
            <a href="{url path="/order/delivery"}" class="btn btn-checkout">Proceed checkout</a>

        </article>

        <aside id="products-upsell" role="complementary" aria-labelledby="products-upsell-label">
            <div class="products-heading">
                <h3 id="products-upsell-label">Upsell Products</h3>
            </div>

            <div class="products-content">
                <ul class="products-grid product-col-<?php echo $product_upsell; ?> hover-effect">
                    <?php
	// Product Parameters
	$has_description = false;	// Product without description
	$has_btn = false;			// Product without button (Add to Cart)

	for ($count = 1; $count <= $product_upsell; $count++) { ?>
                    <li class="item">
                        <?php include('inc/inc-product.php') ?>
                    </li>
                    <?php } ?>
                </ul>
            </div>
        </aside><!-- #products-upsell -->

    </div>
{/block}

{block name="javascript-initialization"}
<script type="text/javascript">
jQuery(function($cart) {
    $cart('.js-update-quantity').on('change', function(e) {
        var newQuantity = $cart(this).val();

        $cart(this).parent().submit();
    })
});
</script>
{/block}