{% 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">
        <a
            href="/books"
            class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors mb-4"
        >
            <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>
        <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-4 md:mb-0 md:mr-6 flex-shrink-0"
            >
                <div
                    class="w-32 h-40 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center shadow-md"
                >
                    <svg
                        class="w-16 h-16 text-white"
                        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="mt-3">
                    <span
                        id="book-status"
                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
                    ></span>
                </div>
            </div>
            <div class="flex-1">
                <div class="flex items-start justify-between mb-2">
                    <h1
                        id="book-title"
                        class="text-3xl font-bold text-gray-900"
                    ></h1>
                    <span
                        id="book-id"
                        class="text-sm text-gray-500 ml-4 px-2 py-1 border border-gray-300 rounded-lg"
                    ></span>
                </div>
                <p
                    id="book-authors-text"
                    class="text-lg text-gray-600 mb-4"
                ></p>
                <div class="prose prose-gray max-w-none mb-6">
                    <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-500 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-500 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 %}