{% extends "base.html" %} {% block content %}
<div class="container mx-auto p-4">
    <div
        class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4"
    >
        <h2 class="text-2xl font-bold text-gray-800">Авторы</h2>

        <div class="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
            <div class="relative">
                <input
                    type="text"
                    id="author-search-input"
                    placeholder="Поиск автора..."
                    class="border rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400 w-full sm:w-64"
                />
                <svg
                    class="absolute right-3 top-2.5 h-5 w-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"
                    ></path>
                </svg>
            </div>
            <div class="flex gap-2 bg-white rounded-lg p-1 border">
                <label
                    class="cursor-pointer px-3 py-1 rounded hover:bg-gray-100 flex items-center gap-1"
                >
                    <input
                        type="radio"
                        name="sort"
                        value="name_asc"
                        checked
                        class="hidden peer"
                    />
                    <span
                        class="text-sm text-gray-600 peer-checked:text-black peer-checked:font-bold"
                        >А-Я</span
                    >
                </label>
                <label
                    class="cursor-pointer px-3 py-1 rounded hover:bg-gray-100 flex items-center gap-1"
                >
                    <input
                        type="radio"
                        name="sort"
                        value="name_desc"
                        class="hidden peer"
                    />
                    <span
                        class="text-sm text-gray-600 peer-checked:text-black peer-checked:font-bold"
                        >Я-А</span
                    >
                </label>
            </div>
        </div>
    </div>
    <div id="results-counter" class="text-sm text-gray-500 mb-4"></div>
    <div
        id="authors-container"
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    ></div>
    <div id="pagination-container"></div>
</div>
<template id="author-card-template">
    <div
        class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer author-card"
    >
        <div class="flex items-center">
            <div
                class="author-avatar w-12 h-12 bg-gray-500 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4"
            ></div>
            <div class="flex-1">
                <h3
                    class="author-name text-lg font-semibold text-gray-900 hover:text-gray-400 transition-colors"
                ></h3>
                <p class="author-id text-sm text-gray-500"></p>
            </div>
            <svg
                class="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="M9 5l7 7-7 7"
                />
            </svg>
        </div>
    </div>
</template>
<template id="empty-state-template">
    <div class="col-span-full bg-white p-8 rounded-lg shadow-md text-center">
        <svg
            class="mx-auto h-12 w-12 text-gray-400 mb-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">
            Авторы не найдены
        </h3>
        <p class="text-gray-500">Попробуйте изменить параметры поиска</p>
    </div>
</template>
{% endblock %} {% block scripts %}
<script src="/static/authors.js"></script>
{% endblock %}