{% extends "main/base.html" %}
{% load static %}
{% block title %} {{ context.page_title }} {% endblock %}

{% block filter %}
                      <div class="nav">
                    <button class="btn" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Сортувати
                        <img src="{% static "icons/sort.png" %}" alt="Catalog Icon" width="20"
                            height="18">
                    </button>
                          {% if request.GET.q %}
                            <input type="hidden" name="q" value="{{ request.GET.q }}">
                          {% endif %}
                    <ul class="dropdown-menu bg-dark">
                        <li><a class="dropdown-item text-menu" href="{% url "catalog:index" slug_url 'name' %}" >За назвою</a></li>
                        <li><a class="dropdown-item text-menu" href="{% url "catalog:index" slug_url 'author' %}" >За автором</a></li>
                        <li><a class="dropdown-item text-menu" href="{% url "catalog:index" slug_url 'rating' %}" >За рейтингом</a></li>
                    </ul>
                </div>
{% endblock %}
{% block content %}

              <div class="col-lg-10">
                    <!-- Контент на сторінці -->
                   
                <div class="row">

                        <!-- Контейнер книги -->
                    {% for book_list in books %}

                         <div class="col-lg-4 p-4">
                            <div class="card border-primary rounded custom-shadow">

                                {% if book_list.image.url is not None %}
                                     <img src="{{ book_list.image.url }}" alt="{{ book_list.name }}" class="leftimg ">
                                {% else %}
                                      <div class="image-text-container">
                                          <img class="leftimg" src="{% static "images/Not found image.png" %}" alt="{{ book_list.name }}">
                                        <div class="text-overlay">{{ book_list.author_name }} {{ book_list.author_lastname}} <br><br>{{ book_list.name }}</div>
                                    </div>
                                {% endif %}
                                <div class="text-card">
                                    {{ book_list.author_name }} {{ book_list.author_lastname}}  <br>
                                      <a href="{% url "catalog:book" book_list.slug %}">{{ book_list.name }}</a>
                                      <br><br> <strong>{{downl1}}: {{book_list.quantity_download}}</strong>
                                    <br />
                                    <div class="d-flex justify-content-between">
                                        {{ book_list.description|truncatechars:69 }}
                                    </div>
                                </div>

                            </div>
                        </div>
                       {% empty %}
                            <div>

                               <h1 class="mt-5"><strong>{{ context.main_title|center:"15" }}</strong></h1>
                            </div>                     <!-- Контент на сторінці -->

                          <p class="pt-5" >{{ context.main_text}} </p>
                       {% endfor %}

                </div>
                  <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center my-4">
                            <div class="custom-shadow d-flex">
                                <li class="page-item {% if not books.has_previous %}disabled {% endif %}">
                                  <a class="page-link" href="{% if books.has_previous %}?page={{ books.previous_page_number }}{% else %}#{% endif %}"><<</a>
                                </li>

                                {% for page in books.paginator.page_range %}
                                {% if page >= books.number|add:-2 and page <= books.number|add:2 %}
                                <li class="page-item {% if books.number == page %} active {% endif %}">
                                    <a class="page-link" href="?page={{page}}">{{page}}</a>
                                </li>
                                {% endif %}
                                {% endfor %}

                                <li class="page-item {% if not books.has_next %}disabled {% endif %} ">
                                  <a class="page-link" href="{% if books.has_next %}?page={{ books.next_page_number }}{% else %}#{% endif %}">>></a>
                                </li>
                            </div>
                        </ul>
                  </nav>
           </div>


{% endblock %}