{% extends "layout.html" %}

{% set title = 'Summery' %}

{% block content %}

<div class="steps-wrapper">
    <div class="container">
        <ul class="steps list-unstyled d-flex justify-content-between align-items-center">
            <li class="active text-capitalize text-center">cart</li>
            <li class="active text-capitalize text-center">shipping</li>
            <li class="active text-capitalize text-center">payment</li>
            <li class="active current text-capitalize text-center">summery</li>
        </ul>
    </div>
</div>


<section class="section checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Order summery</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="boxed mtlg">
            <div class="summery-card">
                <div class="image-success">
                    <img src="./assets/images/icons/win.svg" alt="">
                </div>
                <div class="summery-content">
                    <h3 class="text-bold mb-2">Your order placed successfully</h3>
                    <div class="thanks mb-3">Thanks for your purchase from <span class="text-brand">Toshiba </span></div>
                    <div class="order-id">Your order ID: F233355554</div>
                </div>
            </div>
        </div>
        <div class="boxed mtlg">
            <div class="order-summery">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="order-k mb-2">Order ID</div>
                        <div class="order-v">F233355554</div>
                    </div>
                    <div class="col-sm-4">
                        <div class="order-k mb-2">Order date</div>
                        <div class="order-v">July 23, 2020</div>
                    </div>
                    <div class="col-sm-4">
                        <div class="order-k mb-2">Bill to</div>
                        <div class="order-v">Mukhtar Ali</div>
                    </div>
                    <div class="col-sm-4">
                        <div class="order-k mb-2">Payment details</div>
                        <div class="order-v">Credit Card</div>
                    </div>
                    <div class="col-sm-4">
                        <div class="order-k mb-2">No. products</div>
                        <div class="order-v">2</div>
                    </div>
                    <div class="col-sm-4">
                        <div class="order-k mb-2">Estimated delivery</div>
                        <div class="order-v">23 - 25 July, 2020</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <a href="#" class="btn text-capitalize d-inline-block mr-3">Back to home page</a>
            <a href="#" class="btn btn-alt text-capitalize d-inline-block">View order details</a>
        </div>
    </div>
</section>


{% endblock content %}