{% 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 active"  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" 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">
                                {% comment %} <div class="tab-pane fade active show" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="mb-0">Hello Rosie!</h3>
                                        </div>
                                        <div class="card-body">
                                            <p>
                                                From your account dashboard. you can easily check &amp; view your <a href="#">recent orders</a>,<br />
                                                manage your <a href="#">shipping and billing addresses</a> and <a href="#">edit your password and account details.</a>
                                            </p>
                                        </div>
                                    </div>
                                </div> {% endcomment %}
                                <div class="tab-pane fade active show" id="orders" role="tabpanel" aria-labelledby="orders-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 id ="order-number" class="mb-0">Your Downloads</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>Order.ID</th>
                                                            <th>File Name</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>   
                                                        {% for key , value in files.items  %}                                                  
                                                        <tr>
                                                            
                                                            <td>{{key}}</td>
                                                            <td>{{value}}</td>
                                                            <td><a href="{% url 'accounts:download-file' key value %}" class="btn-small d-block">Download</a></td>
                                                            
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                                <div id="empty" {% if files %}
                                                class="not-visible text-center" 
                                                {% else %}
                                                class="text-center" 
                                                {% endif %} class="not-visible text-center" >
                                                    <h5 id="order-number" class="mb-0"> You have't purchases<p></p></h5>
                                                    <a href="/shop/" class="btn mb-5 mt-20"><i class="fi-rs-arrow-left mr-10"></i>Continue Shopping</a>
                                                </div>
                                                <div class="pagination-area mt-20 mb-20">
                                                    <nav aria-label="Page navigation example">
                                                        <div id="spinner-box" class="not-visible text-center">
                                                            <div class="spinner-border" role="status">
                                                              <span class="sr-only"></span>
                                                            </div>
                                                          </div>
                                                          <div id="empty-box" class="not-visible  text-center">
                                                            
                                                          </div>
                            
                                                        <div id ="loading-box" class="not-visible text-center">

                                                            <button id="load-btn" type="button" class="btn btn-success">Load More</button>
                                                            
                                                          </div>
                            
                                                    </nav>
                                                </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%}