{% 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" href="{% url 'accounts:order_tracking'%}" ><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:download-list' %}" ><i class="fi-rs-cloud-download mr-10"></i>Downloads</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" id="address-tab" data-bs-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="true"><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="account-detail" role="tabpanel" aria-labelledby="account-detail-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Change Password</h5>
                                        </div>
                                        <div class="card-body">
                                            
                                            <form method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <div class="row">
                                              
                                                    <div class="form-group col-md-6">
                                                        {{form|crispy}}
                                                    </div>

                                                    <div class="col-md-12">
                                                        <button type="submit" class="btn btn-fill-out submit font-weight-bold" name="submit" value="Submit">Save Change</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </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%}