{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}


{%block body%}
<main class="main pages">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="{% url 'home:index' %" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                <span></span> Pages <span></span> My Account
            </div>
        </div>
    </div>
    <div class="page-content pt-50 pb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 m-auto">
                    {% if messages %}
                    <div class="col-lg-6">
                        {% for message in messages %}
            
                        <div    class="alert align-middle alert-{{message.tags}}">
                            
                            <span class="align-middle"> {{message}}</span>
                        </div>
 
                    {% endfor %}
                </div>
                    {% endif %}
                    <div class="row">
                        <div class="col-md-3">
                            <div class="dashboard-menu">
                                <ul class="nav flex-column" role="tablist">
                                    {% comment %} <li class="nav-item">
                                        <a class="nav-link active" id="dashboard-tab" data-bs-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="false"><i class="fi-rs-settings-sliders mr-10"></i>Dashboard</a>
                                    </li> {% endcomment %}
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'accounts:dashboard_customer'%}"><i class="fi-rs-shopping-bag mr-10"></i>Orders</a>
                                    </li>
                                    <!-- <li class="nav-item">
                                        <a class="nav-link active" id="track-orders-tab" data-bs-toggle="tab" href="#track-orders" role="tab" aria-controls="track-orders" aria-selected="false"><i class="fi-rs-shopping-cart-check mr-10"></i>Track Your Order</a>
                                    </li> -->
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'accounts:change_password' %}"><i class="fi-rs-key mr-10"></i>Change Password</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link"  href="{% url 'accounts:account_details'%}" ><i class="fi-rs-user mr-10"></i>Account details</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'accounts:logout'%}"><i class="fi-rs-sign-out mr-10"></i>Logout</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="tab-content account dashboard-content pl-50">
                               
                                
                                <div class="tab-pane fade active show" id="track-orders" role="tabpanel" aria-labelledby="track-orders-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="mb-0">Orders tracking</h3>
                                        </div>
                                        <div class="card-body contact-from-area">
                                            <p>To track your order please enter your OrderID in the box below and press "Track" button. This was given to you on your receipt and in the confirmation email you should have received.</p>
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <form class="contact-form-style mt-30 mb-50" action="#" method="post">
                                                        <div class="input-style mb-20">
                                                            <label>Order ID</label>
                                                            <input name="order-id" placeholder="Found in your order confirmation email" type="text" />
                                                        </div>
                                                        <div class="input-style mb-20">
                                                            <label>Billing email</label>
                                                            <input name="billing-email" placeholder="Email you used during checkout" type="email" />
                                                        </div>
                                                        <button class="submit submit-auto-width" type="submit">Track</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{%endblock body%}

{%block script%}
        <!-- Vendor JS-->
        <script src="{% static 'assets/js/vendor/modernizr-3.6.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/jquery-3.6.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/jquery-migrate-3.3.0.min.js'%}"></script>
        <script src="{% static 'assets/js/vendor/bootstrap.bundle.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/slick.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.syotimer.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/wow.js'%}"></script>
        <script src="{% static 'assets/js/plugins/perfect-scrollbar.js'%}"></script>
        <script src="{% static 'assets/js/plugins/magnific-popup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/select2.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/waypoints.js'%}"></script>
        <script src="{% static 'assets/js/plugins/counterup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.countdown.min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/images-loaded.js'%}"></script>
        <script src="{% static 'assets/js/plugins/isotope.js'%}"></script>
        <script src="{% static 'assets/js/plugins/scrollup.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.vticker-min.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.theia.sticky.js'%}"></script>
        <script src="{% static 'assets/js/plugins/jquery.elevatezoom.js'%}"></script>
        <!-- Template  JS -->
        <script src="{% static 'assets/js/main.js'%}"></script>
        <script src="{% static 'assets/js/shop.js'%}"></script>
  

{%endblock script%}