{% extends "layout.html" %}

{% set title = 'My Favourites' %}

{% block content %}

<section class="section profile">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <aside>
                    <div class="profile-name pb-4 bb">
                        <h6 class="mb-1">Mukhtar Ali Gomaa</h6>
                        <p class="mb-2">mukhtar.ali@moselaymd.com</p>
                        <a href="#" class="text-capitalize text-brand"><i class="fa fa-sign-out-alt mr-2"></i>logout</a>
                    </div>
                    <nav>
                        <a class="text-capitalize" href="orders.html">my orders</a>
                        <a class="text-capitalize" href="addresses.html">my addresses</a>
                        <a class="text-capitalize active" href="favourites.html">my favourites</a>
                        <a class="text-capitalize" href="settings.html">account settings</a>
                        <a class="text-capitalize" href="password.html">change password</a>
                    </nav>
                </aside>
            </div>
            <div class="col-sm-9">
                <div class="profile">
                    <h4 class="mb-0">My favourites</h4>
                    <div class="favourites">
                        <div class="row">
                            {% for i in range(0, 2) -%}
                            <div class="col-lg-12 col-md-6 mt-4">
                                <div class="boxed favourite-item">
                                    <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-footer ml-lg-4">
                                            <div class="price">16606 EGP</div>
                                            <div class="cta">
                                                <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>
            </div>
        </div>
    </div>
</section>

{% endblock content %}