{% extends "layout.html" %}

{% set title = 'My Addresses' %}

{% 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 active" 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">My addresses</h4>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="address">
                                <div class="address-box">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="location-name d-block text-capitalize">home</span>
                                        <div class="cta">
                                            <a href="#" class="mr-2" data-toggle="modal" data-target="#addressModel"><i class="fa fa-pencil-alt mr-2"></i></a>
                                            <a href="#" class="text-brand" data-toggle="modal" data-target="#warningModel"><i class="fa fa-trash-alt mr-2"></i></a>
                                        </div>
                                    </div>
                                    <span class="d-flex align-items-center mt-3">
                                        <i class="far fa-user mr-3"></i>
                                        <span>Mukhtar Ali</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-map-marker mr-3"></i>
                                        <span>Cairo, Maadi, Degla , 222 st, Apt. 16</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-phone mr-3"></i>
                                        <span>01XXXXXXXXXX</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="address">
                                <div class="address-box">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="location-name d-block text-capitalize">office</span>
                                        <div class="cta">
                                            <a href="#" class="mr-2" data-toggle="modal" data-target="#addressModel"><i class="fa fa-pencil-alt mr-2"></i></a>
                                            <a href="#" class="text-brand" data-toggle="modal" data-target="#warningModel"><i class="fa fa-trash-alt mr-2"></i></a>
                                        </div>
                                    </div>
                                    <span class="d-flex align-items-center mt-3">
                                        <i class="far fa-user mr-3"></i>
                                        <span>Mukhtar Ali</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-map-marker mr-3"></i>
                                        <span>Giza, Dokki, 1 El Sad El Aaly st, Apt. 16</span>
                                    </span>
                                    <span class="d-flex align-items-center mt-2">
                                        <i class="fa fa-phone mr-3"></i>
                                        <span>01XXXXXXXXXX</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="#" class="btn" data-toggle="modal" data-target="#addressModel"><i class="fa fa-plus mr-2"></i>Add new address</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


{% endblock content %}