{% extends "base.html" %} {% block title %}LiB - Книга{% endblock %}
{% block content %}
<div class="container mx-auto p-4 max-w-6xl">
    <div id="book-card" class="bg-white rounded-lg shadow-md p-6 mb-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 mb-4"
                ></div>
                <div id="book-actions-container" class="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>
                <p id="book-page-count-text" class="text-sm text-gray-500 mb-6 hidden">
                    <span class="font-medium">Количество страниц:</span>
                    <span id="book-page-count-value"></span>
                </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 id="loans-section" class="hidden bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-900">Выдачи книги</h2>
            <button
                id="refresh-loans-btn"
                class="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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                    ></path>
                </svg>
            </button>
        </div>
        <div id="loans-container" class="space-y-3">
            <div class="text-center text-gray-500 py-8">
                Загрузка информации о выдачах...
            </div>
        </div>
    </div>
</div>

<div
    id="loan-modal"
    class="hidden fixed inset-0 z-50 overflow-y-auto"
    aria-labelledby="modal-title"
    role="dialog"
    aria-modal="true"
>
    <div
        class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
    >
        <div
            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
            aria-hidden="true"
        ></div>
        <span
            class="hidden sm:inline-block sm:align-middle sm:h-screen"
            aria-hidden="true"
            >&#8203;</span
        >
        <div
            class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
        >
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div
                        class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
                    >
                        <svg
                            class="h-6 w-6 text-blue-600"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M12 4v16m8-8H4"
                            ></path>
                        </svg>
                    </div>
                    <div
                        class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"
                    >
                        <h3
                            class="text-lg leading-6 font-medium text-gray-900"
                            id="modal-title"
                        >
                            Оформить выдачу книги
                        </h3>
                        <div class="mt-4">
                            <div class="relative">
                                <input
                                    type="text"
                                    id="user-search-input"
                                    class="w-full border border-gray-300 rounded-md px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    placeholder="Поиск пользователя (имя, email)..."
                                />
                                <svg
                                    class="w-5 h-5 text-gray-400 absolute left-3 top-2.5"
                                    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"
                                    ></path>
                                </svg>
                            </div>
                            <div
                                id="users-list-container"
                                class="mt-4 border border-gray-200 rounded-md max-h-60 overflow-y-auto divide-y divide-gray-100"
                            >
                                <div
                                    class="p-4 text-center text-gray-500 text-sm"
                                >
                                    Начните ввод для поиска...
                                </div>
                            </div>
                            <div class="mt-4">
                                <label
                                    class="block text-sm font-medium text-gray-700"
                                    >Срок возврата</label
                                >
                                <input
                                    type="date"
                                    id="loan-due-date"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 sm:text-sm"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
            >
                <button
                    type="button"
                    id="confirm-loan-btn"
                    disabled
                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    Выдать
                </button>
                <button
                    type="button"
                    id="cancel-loan-btn"
                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                    Отмена
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script src="/static/page/book.js"></script>
{% endblock %}