{% set header_title = 'Cart' %}
{% set background_top = 'assets/images/bg-top-4.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<a href="store.html">Store</a>',
    '<span>Cart</span>'
] %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
<div class="container">
    <div class="nk-store nk-store-cart">
        <div class="table-responsive">

            <!-- START: Products in Cart -->
            <table class="table nk-store-cart-products">
                <tbody>
                    {% for i in [1, 3] %}
                        <tr>
                            <td class="nk-product-cart-thumb">
                                <a href="{{ shop[i].url }}" class="nk-image-box-1 nk-post-image">
                                    <img src="{{ shop[i].photos[0].xs }}" alt="{{ shop[i].title }}" width="115">
                                </a>
                            </td>
                            <td class="nk-product-cart-title">
                                <h5 class="h6">Product:</h5>
                                <div class="nk-gap-1"></div>

                                <h2 class="nk-post-title h4">
                                    <a href="{{ shop[i].url }}">{{ shop[i].title }}</a>
                                </h2>
                            </td>
                            <td class="nk-product-cart-price">
                                <h5 class="h6">Price:</h5>
                                <div class="nk-gap-1"></div>

                                <strong>{{ shop[i].price }}</strong>
                            </td>
                            <td class="nk-product-cart-quantity">
                                <h5 class="h6">Quantity:</h5>
                                <div class="nk-gap-1"></div>

                                <div class="nk-form">
                                    <input type="number" class="form-control" value="1" min="1" max="21">
                                </div>
                            </td>
                            <td class="nk-product-cart-total">
                                <h5 class="h6">Total:</h5>
                                <div class="nk-gap-1"></div>

                                <strong>{{ shop[i].price }}</strong>
                            </td>
                            <td class="nk-product-cart-remove"><a href="#"><span class="ion-android-close"></span></a></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <!-- END: Products in Cart -->

        </div>
        <div class="nk-gap-1"></div>
        <a class="nk-btn nk-btn-rounded nk-btn-color-white float-right" href="#">Update Cart</a>

        <div class="clearfix"></div>
        <div class="nk-gap-2"></div>
        <div class="row vertical-gap">
            <div class="col-md-6">

                <!-- START: Calculate Shipping -->
                <h3 class="nk-title h4">Calculate Shipping</h3>
                <form action="#" class="nk-form">
                    <label for="country-sel">Country <span class="text-main-1">*</span>:</label>
                    <select name="country" class="form-control required" id="country-sel">
                        <option value="">Select a country...</option>
                    </select>

                    <div class="nk-gap-1"></div>
                    <div class="row vertical-gap">
                        <div class="col-sm-6">
                            <label for="state">State / Country <span class="text-main-1">*</span>:</label>
                            <input type="text" class="form-control required" name="state" id="state">
                        </div>
                        <div class="col-sm-6">
                            <label for="zip">Postcode / ZIP <span class="text-main-1">*</span>:</label>
                            <input type="tel" class="form-control required" name="zip" id="zip">
                        </div>
                    </div>

                    <div class="nk-gap-1"></div>
                    <a class="nk-btn nk-btn-rounded nk-btn-color-white float-right" href="#">Update Totals</a>
                </form>
                <!-- END: Calculate Shipping -->

            </div>
            <div class="col-md-6">
                <!-- START: Cart Totals -->
                <h3 class="nk-title h4">Cart Totals</h3>
                <table class="nk-table nk-table-sm">
                    <tbody>
                        <tr class="nk-store-cart-totals-subtotal">
                            <td>
                                Subtotal
                            </td>
                            <td>
                                € 52.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>
                                € 52.00
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- END: Cart Totals -->
            </div>
        </div>

        <div class="nk-gap-2"></div>
        <a class="nk-btn nk-btn-rounded nk-btn-color-main-1 float-right" href="store-checkout.html">Proceed to Checkout</a>
        <div class="clearfix"></div>
    </div>
</div>

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