{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"><a href="{url path="/cart"}" itemprop="url"><span itemprop="title">Cart</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">Secure Payment</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

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

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

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

            <div id="payment-success" class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">You chose to pay by : <span class="payment-method">Cheque</span></h3>
                </div>
                <div class="panel-body">
                    <h3>Thank you for the trust you place in us.</h3>
                    <p>A summary of your order email has been sent to the following address: email@toto.com</p>
                    <p>Your order will be confirmed by us upon receipt of your payment.</p>

                    <dl class="dl-horizontal">
                        <dt>Order number : </dt>
                        <dd>PRO123456788978979</dd>
                        <dt>Date : </dt>
                        <dd>02/12/2013</dd>
                        <dt>Total : </dt>
                        <dd>$216.25</dd>
                    </dl>
                </div>
            </div>

            <a href="{navigate to="index"}" role="button" class="btn btn-checkout-home"><span>Go home</span></a>

        </article>

    </div>
{/block}

{block name="javascript-initialization"}
<script type="text/javascript">
jQuery(function($order) {

});
</script>
{/block}