{% extends "layout.html" %}

{% set title = 'My Orders' %}

{% 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 active" href="orders.html">my orders</a>
                        <a class="text-capitalize" href="addresses.html">my addresses</a>
                        <a class="text-capitalize" 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-4">Order history</h4>
                    <div id="accordion">
                        {% for product in products %}
                            <div class="prev-order">
                            <div class="order-header" id="headingOne">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-{{loop.index}}" aria-expanded="false" aria-controls="collapse-{{loop.index}}">
                                        <div class="row">
                                            <div class="col">
                                                <div class="o-head text-left mbsm text-uppercase">Order no</div>
                                                <div class="o-body text-left">467645</div>
                                            </div>
                                            <div class="col">
                                                <div class="o-head text-left mbsm text-uppercase">Order date</div>
                                                <div class="o-body text-left">10 june 2020</div>
                                            </div>
                                            <div class="col">
                                                <div class="o-head text-left mbsm text-uppercase">Total</div>
                                                <div class="o-body text-left">16500 EGP</div>
                                            </div>
                                            <div class="col">
                                                <div class="o-head text-left mbsm text-uppercase">Status</div>
                                                <div class="o-body text-left">Pending</div>
                                            </div>
                                            <div class="col col-sm-4">
                                                <div class="o-body o-view text-left">Order Details<i class="fa fa-chevron-right mlsm"></i></div>
                                            </div>
                                        </div>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapse-{{loop.index}}" class="collapse" aria-labelledby="heading-{{loop.index}}" data-parent="#accordion">
                                <div class="order-body">
                                    <div class="order-list">
                                        <div class="order-item">
                                            <div class="order-product">
                                                <figure>
                                                    <img src="{{product.src}}" alt="">
                                                </figure>
                                                <div class="order-content">
                                                    <h6 class="text-semibold mb-1">646L, 4-Door Refrigerator, 3 System, Convert Zone, Dual Inverter</h6>
                                                    <span class="price">16500 EGP</span>
                                                </div>
                                            </div>
                                            <div class="order-status text-regular text-success">Delivered</div>
                                            <div>
                                                <a href="#" class="text-regular text-brand" data-toggle="modal" data-target="#reviewModel"><i class="fa fa-pencil-alt mr-2"></i>Write a review</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">Previous</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}