{% extends 'supplier-panel/supplier-base.html' %}
{%load static%}

{%block section %}

<section class="content-main">
    <div class="content-header">
        <div>
            <h2 class="content-title card-title">Reviews</h2>
            <!-- <p>Lorem ipsum dolor sit amet.</p> -->
        </div>
        <div>
            <!-- <input type="text" placeholder="Search by name" class="form-control bg-white" /> -->
        </div>
    </div>
    <div class="card mb-4">
        <!-- <header class="card-header">
            <div class="row gx-3">
                <div class="col-lg-4 col-md-6 me-auto">
                    <input type="text" placeholder="Search..." class="form-control" />
                </div>
                <div class="col-lg-2 col-md-3 col-6">
                    <select class="form-select">
                        <option>Status</option>
                        <option>Active</option>
                        <option>Disabled</option>
                        <option>Show all</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-3 col-6">
                    <select class="form-select">
                        <option>Show 20</option>
                        <option>Show 30</option>
                        <option>Show 40</option>
                    </select>
                </div>
            </div>
        </header> -->
        <!-- card-header end// -->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            
                            <th>#ID</th>
                            <th>Product</th>
                            <th>Name</th>
                            <th>Rating</th>
                            <th>Date</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for review in reviews%}
                        <tr>
                            
                            <td>{{review.id}}</td>
                            <td> <a href="{%url 'products:product-details' review.PRDIProduct.PRDSlug %}" target="_blank">{{review.PRDIProduct.product_name}}</a></td>
                            <td>{{review.client_name}}</td>
                            <td>
                                <ul class="rating-stars">
                                    <li style="width: {{review.PRDIProduct.feedbak_average}}%" class="stars-active">
                                        <img src="{% static 'assets-supplier/imgs/icons/stars-active.svg'%}" alt="stars" />
                                    </li>
                                    <li>
                                        <img src="{% static 'assets-supplier/imgs/icons/starts-disable.svg'%}" alt="stars" />
                                    </li>
                                </ul>
                            </td>
                            <td>{{review.rating_date}}</td>
                            <td class="text-end">
                                <a href="{%url 'products:product-details' review.PRDIProduct.PRDSlug %}" class="btn btn-md rounded font-sm">View</a>
                            
                            </td>
                        </tr>
                     {%endfor%}
                    </tbody>
                </table>
            </div>
            <!-- table-responsive//end -->
        </div>
        <!-- card-body end// -->
    </div>
    {%if reviews.has_other_pages %}
    <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-start">
                {%if reviews.has_previous%}
                <li class="page-item">
                    <a class="page-link" href="?page={{reviews.previous_page_number}}"><i class="material-icons md-chevron_left"></i></a>
                </li>
                {%endif%}
                <li class="page-item active"><a class="page-link" href="#">{{reviews.number}}</a></li>
                {%if reviews.paginator.num_pages > reviews.number  %}
                
                <li class="page-item"><a class="page-link" href="?page={{reviews.number|add:1}}">{{reviews.number|add:1}}</a></li>
                {%endif%}
                 <!-- <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                <li class="page-item"><a class="page-link dot" href="#">...</a></li>
                
                <li class="page-item"><a class="page-link" href="?page={{reviews.paginator.num_pages}}">{{reviews.paginator.num_pages}}</a></li>
                {%if reviews.has_next%}
                <li class="page-item">
                    <a class="page-link" href="?page={{reviews.next_page_number}}"><i class="material-icons md-chevron_right"></i></a>
                </li>
                {%endif%}
            </ul>
        </nav>
    </div>
    {%endif%}
</section>

{%endblock section%}

{%block script%} 
{%endblock script%}