{% extends "main/base.html" %}
{% load static %}
{% block title %} {{ context.page_title }} {% endblock %}
{% block content %}
                 <div class="col-lg-10">
                    <!-- Контент на сторінці -->
                    <h1 class="mt-5 bg-dark"><strong>{{ context.main_title }}({{ rand_book }}):</strong></h1>

                        {% 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>завантажень: {{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>                     <!-- Контент на сторінці -->
                       {% endfor %}
 </div>
</div>

{% endblock %}