LibraryAPI/library_service/templates/books.html

{% extends "base.html" %} {% block title %}LiB - Главная{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
    <aside
        class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
    >
        <h2 class="text-xl font-semibold mb-4">Поиск</h2>

        <div class="relative mb-4">
            <input
                type="text"
                id="book-search-input"
                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
                placeholder="Поиск книг (мин. 3 символа)..."
                minlength="3"
                maxlength="50"
            />
            <svg
                class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
            </svg>
        </div>

        <h2 class="text-xl font-semibold mb-4">Фильтры</h2>

        <div class="mb-4">
            <h3 class="font-medium mb-2">Авторы</h3>
            <div class="relative">
                <div
                    class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white min-h-[42px]"
                    id="selected-authors-container"
                >
                    <input
                        type="text"
                        id="author-search-input"
                        class="flex-grow outline-none bg-transparent min-w-[100px]"
                        placeholder="Начните вводить..."
                    />
                </div>
                <div
                    id="author-dropdown"
                    class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto shadow-lg"
                ></div>
            </div>
        </div>

        <div class="mb-4">
            <h3 class="font-medium mb-2">Жанры</h3>
            <ul id="genres-list" class="max-h-60 overflow-y-auto"></ul>
        </div>

        <button
            id="apply-filters-btn"
            class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200 mb-2"
        >
            Применить фильтры
        </button>
        <button
            id="reset-filters-btn"
            class="w-full bg-white text-gray-500 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition duration-200"
        >
            Сбросить фильтры
        </button>

        <!-- Счётчик результатов -->
        <div
            id="results-counter"
            class="mt-4 text-center text-sm text-gray-500"
        ></div>
    </aside>

    <main class="flex-1">
        <div id="books-container">
            <!-- Книги будут загружены через JS -->
        </div>
        <!-- Пагинация добавляется динамически после books-container -->
    </main>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/books.js"></script>
{% endblock %}