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="Поиск книг..."
            />
            <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"
                    id="selected-authors-container"
                >
                    <input
                        type="text"
                        id="author-search-input"
                        class="flex-grow outline-none bg-transparent"
                        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"
                ></div>
            </div>
        </div>

        <div class="mb-4">
            <h3 class="font-medium mb-2">Жанры</h3>
            <ul id="genres-list"></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>
    </aside>

    <main class="flex-1" id="books-container">
        <div
            class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
        >
            <div>
                <h3 class="text-lg font-bold mb-1">Product Title 1</h3>
                <p class="text-gray-700 text-sm">
                    A short description of the product, highlighting its key
                    features and benefits.
                </p>
            </div>
            <span class="text-lg font-semibold text-gray-600">$29.99</span>
        </div>

        <div
            class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
        >
            <div>
                <h3 class="text-lg font-bold mb-1">Product Title 2</h3>
                <p class="text-gray-700 text-sm">
                    Another great product with amazing features. You'll love it!
                </p>
            </div>
            <span class="text-lg font-semibold text-blue-600">$49.99</span>
        </div>

        <div
            class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
        >
            <div>
                <h3 class="text-lg font-bold mb-1">Product Title 3</h3>
                <p class="text-gray-700 text-sm">
                    This product is a must-have for every modern home. High
                    quality and durable.
                </p>
            </div>
            <span class="text-lg font-semibold text-gray-600">$19.99</span>
        </div>
    </main>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/books.js"></script>
{% endblock %}