{% extends "base.html" %} {% block title %}LiB - Авторы{% endblock %} {% block
content %}
<div class="flex flex-1 mt-4 p-4">
    <aside
        class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
    >
        <h2 class="text-xl font-semibold mb-4">Поиск</h2>
        <div class="relative mb-4">
            <input
                type="text"
                id="author-search-input"
                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
                placeholder="Поиск авторов..."
                maxlength="50"
            />
            <svg
                class="absolute left-3 top-1/2 transform -translate-y-1/2 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
            </svg>
        </div>
        <h2 class="text-xl font-semibold mb-4">Сортировка</h2>
        <div class="mb-4">
            <div class="space-y-2">
                <label class="flex items-center cursor-pointer">
                    <input
                        type="radio"
                        name="sort"
                        value="name_asc"
                        checked
                        class="w-4 h-4 text-gray-500 focus:ring-gray-500"
                    />
                    <span class="ml-2 text-gray-700">По имени (А-Я)</span>
                </label>
                <label class="flex items-center cursor-pointer">
                    <input
                        type="radio"
                        name="sort"
                        value="name_desc"
                        class="w-4 h-4 text-gray-500 focus:ring-gray-500"
                    />
                    <span class="ml-2 text-gray-700">По имени (Я-А)</span>
                </label>
            </div>
        </div>
        <button
            id="reset-filters-btn"
            class="w-full bg-white text-gray-500 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition duration-200"
        >
            Сбросить
        </button>
        <div
            id="results-counter"
            class="mt-4 text-center text-sm text-gray-500"
        ></div>
    </aside>
    <main class="flex-1">
        <div id="authors-container"></div>
        <div id="pagination-container"></div>
    </main>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/authors.js"></script>
{% endblock %}