{% set header_title = 'Checkout' %}
{% set header_show = false %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <div class="container">
        <div class="nk-gap-4"></div>

        <div class="nk-store nk-store-checkout">
            <div class="row vertical-gap lg-gap">
                <div class="col-md-6">

                    <!-- START: Billing Details -->
                    <div class="nk-box-3 bg-dark-1">
                        <h3 class="nk-title h4 text-center">Billing Details</h3>
                        <div class="nk-gap"></div>
                        <form action="#" class="nk-form nk-form-style-1">
                            <div class="row vertical-gap">
                                <div class="col-sm-6">
                                    <input type="text" class="form-control required" name="fname" placeholder="First Name *">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control required" name="lname" placeholder="Last Name *">
                                </div>
                            </div>

                            <div class="nk-gap-2"></div>
                            <input type="text" class="form-control" name="company" placeholder="Company Name">

                            <div class="nk-gap-2"></div>
                            <div class="row vertical-gap">
                                <div class="col-sm-6">
                                    <input type="email" class="form-control required" name="email" placeholder="Email Address *">
                                </div>
                                <div class="col-sm-6">
                                    <input type="tel" class="form-control required" name="phone" placeholder="Phone *">
                                </div>
                            </div>

                            <div class="nk-gap-2"></div>
                            <select name="country" class="form-control required">
                                <option value="">Select a country...</option>
                            </select>

                            <div class="nk-gap-2"></div>
                            <input type="text" class="form-control required" name="address" placeholder="Address *">

                            <div class="nk-gap-2"></div>
                            <input type="text" class="form-control required" name="city" placeholder="City *">

                            <div class="nk-gap-2"></div>
                            <div class="row vertical-gap">
                                <div class="col-sm-6">
                                    <input type="email" class="form-control required" name="country" placeholder="Country *">
                                </div>
                                <div class="col-sm-6">
                                    <input type="tel" class="form-control required" name="zip" placeholder="ZIP *">
                                </div>
                            </div>

                            <div class="nk-gap-2"></div>
                            <label class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-indicator"></span>
                                Create an account?
                            </label>
                        </form>
                    </div>
                    <!-- END: Billing Details -->

                </div>
                <div class="col-md-6">
                    <!-- START: Notes -->
                    <div class="nk-box-3 bg-dark-1">
                        <form action="#" class="nk-form nk-form-style-1">
                            <label class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-indicator"></span>
                                Ship to different address?
                            </label>

                            <div class="nk-gap-2"></div>
                            <textarea type="text" class="form-control" name="notes" placeholder="Order Notes" rows="6"></textarea>
                        </form>
                    </div>
                    <!-- END: Notes -->

                </div>
            </div>

            <!-- START: Order Products -->
            <div class="nk-gap-3"></div>
            <div class="nk-box-3 bg-dark-1">
                <h3 class="nk-title h4 text-center">Your Order</h3>
                <div class="nk-gap"></div>
                <div class="table-responsive">
                    <table class="table table-bordered nk-store-cart-order">
                        <thead class="thead-default">
                            <tr>
                                <th class="nk-product-cart-title">Product</th>
                                <th class="nk-product-cart-total">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in [1, 3] %}
                                <tr>
                                    <td class="nk-product-cart-title">
                                        {{ shop[i].title }} &times; {{ '1' if i == 1 else '2' }}
                                    </td>
                                    <td class="nk-product-cart-total">
                                        {{ shop[i].price if i == 1 else '$250.00' }}
                                    </td>
                                </tr>
                            {% endfor %}
                            <tr class="nk-store-cart-totals-subtotal">
                                <td>
                                    Subtotal
                                </td>
                                <td>
                                    $317.00
                                </td>
                            </tr>
                            <tr class="nk-store-cart-totals-shipping">
                                <td>
                                    Shipping
                                </td>
                                <td>
                                    Free Shipping
                                </td>
                            </tr>
                            <tr class="nk-store-cart-totals-total">
                                <td>
                                    Total
                                </td>
                                <td>
                                    $317.00
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- END: Order Products -->

            <div class="nk-gap-1"></div>
            <a class="nk-btn nk-btn-lg link-effect-4 float-right" href="#">Place Order</a>
            <div class="clearfix"></div>
        </div>

        <div class="nk-gap-4"></div>
        <div class="nk-gap-3"></div>
    </div>
{% endblock %}