{% extends "base.html" %}{% block content %}
<div class="container mx-auto p-4 max-w-4xl">
    <div id="author-card" class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <a
                href="/authors"
                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-author-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="author-loader" class="flex items-start animate-pulse">
            <div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
            <div class="flex-1">
                <div class="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
                <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
                <div class="h-4 bg-gray-200 rounded w-1/5"></div>
            </div>
        </div>
        <div id="author-content" class="hidden flex items-start">
            <div
                id="author-avatar"
                class="w-24 h-24 bg-gray-500 text-white rounded-full flex items-center justify-center text-4xl font-bold mr-6 flex-shrink-0"
            ></div>
            <div class="flex-1">
                <div class="flex items-center justify-between mb-2">
                    <h1
                        id="author-name"
                        class="text-3xl font-bold text-gray-900"
                    ></h1>
                    <span id="author-id" class="text-sm text-gray-500"></span>
                </div>
                <div class="flex items-center text-gray-600 mb-4">
                    <svg
                        class="w-5 h-5 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            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>
                    <span id="author-books-count"></span>
                </div>
            </div>
        </div>
    </div>
    <div id="books-section">
        <h2 class="text-xl font-bold mb-4">Книги автора</h2>
        <div id="books-container" class="space-y-4"></div>
    </div>
</div>
<template id="book-item-template">
    <div
        class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200 cursor-pointer book-card bg-white"
    >
        <div class="flex justify-between items-start">
            <div class="flex-1">
                <h3
                    class="book-title text-lg font-semibold text-gray-900 hover:text-gray-400 transition-colors mb-2"
                ></h3>
                <p class="book-desc text-gray-600 text-sm line-clamp-3"></p>
            </div>
            <svg
                class="w-5 h-5 text-gray-400 ml-4 flex-shrink-0"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                />
            </svg>
        </div>
    </div>
</template>
{% endblock %} {% block scripts %}
<script src="/static/page/author.js"></script>
{% endblock %}