LibraryAPI/library_service/templates/book.html

{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4 max-w-4xl">
    <div id="book-card" class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between mb-4">
            <a
                href="/books"
                class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors"
            >
                <svg
                    class="w-4 h-4 mr-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 19l-7-7 7-7"
                    ></path>
                </svg>
                Вернуться к списку книг
            </a>
            <a
                id="edit-book-btn"
                href="#"
                class="hidden p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
                title="Редактировать книгу"
            >
                <svg
                    class="w-5 h-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                    ></path>
                </svg>
            </a>
        </div>
        <div
            id="book-loader"
            class="flex flex-col md:flex-row items-start animate-pulse"
        >
            <div
                class="w-32 h-40 bg-gray-200 rounded-lg mb-4 md:mb-0 md:mr-6"
            ></div>
            <div class="flex-1 w-full">
                <div class="h-8 bg-gray-200 rounded w-2/3 mb-4"></div>
                <div class="h-5 bg-gray-200 rounded w-1/3 mb-4"></div>
                <div class="space-y-2 mb-6">
                    <div class="h-4 bg-gray-200 rounded w-full"></div>
                    <div class="h-4 bg-gray-200 rounded w-full"></div>
                </div>
            </div>
        </div>
        <div
            id="book-content"
            class="hidden flex flex-col md:flex-row items-start"
        >
            <div
                class="flex flex-col items-center mb-6 md:mb-0 md:mr-8 flex-shrink-0 w-full md:w-auto"
            >
                <div
                    class="w-40 h-56 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center shadow-md mb-4"
                >
                    <svg
                        class="w-20 h-20 text-white opacity-80"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                        ></path>
                    </svg>
                </div>
                <div
                    id="book-status-container"
                    class="relative w-full flex justify-center z-10"
                ></div>
                <div id="book-actions-container" class="mt-4 w-full"></div>
            </div>
            <div class="flex-1 w-full">
                <div
                    class="flex flex-col md:flex-row md:items-start md:justify-between mb-2"
                >
                    <h1
                        id="book-title"
                        class="text-3xl font-bold text-gray-900 leading-tight"
                    ></h1>
                    <span
                        id="book-id"
                        class="hidden md:inline-block text-xs font-mono text-gray-400 mt-2 md:mt-0 md:ml-4"
                    ></span>
                </div>
                <p
                    id="book-authors-text"
                    class="text-lg text-gray-600 font-medium mb-6"
                ></p>

                <div class="prose prose-gray max-w-none mb-8">
                    <h3
                        class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
                    >
                        Описание
                    </h3>
                    <p
                        id="book-description"
                        class="text-gray-700 leading-relaxed"
                    ></p>
                </div>

                <div id="genres-section" class="mb-6 hidden">
                    <h3
                        class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
                    >
                        Жанры
                    </h3>
                    <div
                        id="genres-container"
                        class="flex flex-wrap gap-2"
                    ></div>
                </div>

                <div id="authors-section" class="mb-6 hidden">
                    <h3
                        class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
                    >
                        Авторы (детально)
                    </h3>
                    <div
                        id="authors-container"
                        class="flex flex-wrap gap-3"
                    ></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script src="/static/book.js"></script>
{% endblock %}