{% extends "layout.html" %}

{% set title = 'Cart' %}

{% 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 current text-capitalize text-center">cart</li>
            <li class="text-capitalize text-center">shipping</li>
            <li class="text-capitalize text-center">payment</li>
            <li class="text-capitalize text-center">summery</li>
        </ul>
    </div>
</div>

<section class="section checkout">
    <div class="container">
        <div class="row">
            <div class="col order-first">
                <div class="section-title">
                    <h3 class="toshiba-title text-bold no-margin mbmd">Shopping cart</h3>
                    {% include '../template/component/toshiba-border.html' %}
                </div>
            </div>
            <div class="col order-last text-right">
                <div class="cart-items mtsm">You have <span>2 </span> items in your cart</div>
            </div>
        </div>
        <div class="cart-items">
            <div class="row">
                {% for i in range(0, 3) -%}
                <div class="col-lg-12 col-md-6">
                    <div class="boxed mtlg">
                        <div class="cart-item">
                            <a href="product.html" class="product-image-bg d-block mr-lg-4">
                                <div class="product-img">
                                    <img src="{{products[0].src}}" alt="">
                                </div>
                            </a>
                            <div class="product-info">
                                <div class="toshiba-tag">
                                    {% include '../template/component/toshiba-border.html' %}
                                    <span class="d-inline-block mlmd text-bold text-uppercase text-brand">GR-RF646WE</span>
                                </div>
                                <a href="product.html">
                                    <h3 class="no-margin mtsm">646L, 4-Door Refrigerator, 3 System, Convert Zone, Dual Inverter</h3>
                                </a>
                                <div class="subtitle mtsm">Avoiding Cross Contamination Matters</div>
                            </div>
                            <div class="product-counter ml-lg-4">
                                <button type="button" class=""><i class="fa fa-minus"></i></button>
                                <input type="text" name="" class="form-control text-center text-bold" value="1" />
                                <button type="button" class=""><i class="fa fa-plus"></i></button>
                            </div>
                            <div class="product-footer ml-lg-4">
                                <div class="price">16606 EGP</div>
                                <div class="cta">
                                    <button class="favorites mt-2"><i class="far fa-heart mrsm"></i>Add to favorites</button>
                                    <button class="favorites remove mt-2"><i class="far fa-trash-alt mrsm"></i>Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {%- endfor %}
            </div>

        </div>
        <div class="row mt-4">
            <div class="col-lg-5 offset-lg-7 col-md-6">
                <div class="subtotal">
                    <div class="d-flex justify-content-between">
                        <div class="order-sub">
                            <div class="sub text-bold">Order subtotal:</div>
                            <div class="items-no">2 items</div>
                        </div>
                        <div class="price order-last">35212 EGP</div>
                    </div>
                </div>
                <a href="shipping.html" class="btn text-capitalize d-block mt-4">checkout</a>
            </div>
        </div>
    </div>
</section>


<section class="section section-top-none checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Your favorite items</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="cart-items">
            <div class="row">
                <div class="col-lg-12 col-md-6">
                    <div class="boxed mtlg">
                        <div class="cart-item">
                            <a href="product.html" class="product-image-bg d-block mr-lg-4">
                                <div class="product-img">
                                    <img src="{{products[4].src}}" alt="">
                                </div>
                            </a>
                            <div class="product-info">
                                <div class="toshiba-tag">
                                    {% include '../template/component/toshiba-border.html' %}
                                    <span class="d-inline-block mlmd text-bold text-uppercase text-brand">GR-RF646WE</span>
                                </div>
                                <a href="product.html">
                                    <h3 class="no-margin mtsm">508L, Side By Side Refrigerator, 3-in-1 Auto Ice Maker, Dual Inverter, Alloy Cooling Back</h3>
                                </a>
                                <div class="subtitle mtsm">Cool Features Matter</div>
                            </div>
                            <div class="product-counter ml-lg-4" style="max-width:200px;">
                                <button type="button" class=""><i class="fa fa-minus"></i></button>
                                <input type="text" name="" class="form-control text-center text-bold" value="1" />
                                <button type="button" class=""><i class="fa fa-plus"></i></button>
                            </div>
                            <div class="product-footer ml-lg-4">
                                <div class="price">18606 EGP</div>
                                <div class="cta">
                                    <button class="favorites mt-2"><i class="fas fa-shopping-cart mrsm"></i>Add to cart</button>
                                    <button class="favorites remove mt-2"><i class="far fa-trash-alt mrsm"></i>Remove</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="section section-top-none checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Related products</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="related">
            <div class="row">
                {% set length = products.length if products.length < 3 else 3 %}
                {% for i in range(0, length) %}
                <div class="col-sm-6 col-md-4">
                    <div class="boxed">
                        {% include '../template/component/product-card.html' %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>


{% endblock content %}