{% extends "base.html" %}{% block content %}
<div class="container mx-auto p-4 max-w-2xl">
    <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
        <div class="mb-8 border-b border-gray-100 pb-4">
            <h1
                class="text-2xl font-bold text-gray-800 flex items-center gap-3"
            >
                <svg
                    class="w-8 h-8 text-gray-600"
                    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>
                <span>Редактирование жанра</span>
            </h1>
            <p class="text-gray-500 mt-2 text-sm ml-11">
                Измените данные жанра или удалите его из каталога.
            </p>
        </div>

        <div id="loader" class="animate-pulse space-y-4">
            <div class="h-12 bg-gray-200 rounded w-full"></div>
            <div class="h-24 bg-gray-200 rounded w-full"></div>
        </div>

        <form id="edit-genre-form" class="hidden space-y-6">
            <div>
                <label
                    for="genre-name"
                    class="block text-sm font-semibold text-gray-700 mb-2"
                >
                    Название жанра <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    id="genre-name"
                    name="name"
                    required
                    maxlength="100"
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-400 transition"
                    placeholder="Название жанра..."
                />
                <div class="flex justify-end mt-1">
                    <span id="name-counter" class="text-xs text-gray-400"
                        >0/100</span
                    >
                </div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-gray-200">
                <h2
                    class="text-sm font-semibold text-gray-700 mb-3 flex items-center justify-between"
                >
                    <span>Книги в жанре</span>
                    <span
                        id="books-count"
                        class="text-xs text-gray-400 font-normal"
                    ></span>
                </h2>
                <div
                    id="genre-books-container"
                    class="space-y-2 max-h-64 overflow-y-auto"
                >
                    <div class="text-sm text-gray-500 text-center py-4">
                        Загрузка...
                    </div>
                </div>
            </div>

            <div
                class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-100"
            >
                <button
                    type="submit"
                    id="submit-btn"
                    class="flex-1 flex justify-center items-center px-6 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transition disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <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="M5 13l4 4L19 7"
                        ></path>
                    </svg>
                    <span id="submit-text">Сохранить изменения</span>
                    <svg
                        id="loading-spinner"
                        class="hidden animate-spin ml-2 h-5 w-5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle
                            class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"
                        ></circle>
                        <path
                            class="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                    </svg>
                </button>
                <a
                    id="cancel-btn"
                    href="/books"
                    class="flex-1 flex justify-center items-center px-6 py-3 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition text-center"
                >
                    Отмена
                </a>
            </div>
        </form>

        <div id="danger-zone" class="hidden mt-8 pt-6 border-t border-red-200">
            <h3
                class="text-lg font-bold text-red-600 mb-2 flex items-center gap-2"
            >
                <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    ></path>
                </svg>
                Опасная зона
            </h3>
            <p class="text-sm text-gray-600 mb-4">
                Удаление жанра необратимо. Связи с книгами будут удалены, но
                сами книги сохранятся.
            </p>
            <button
                id="delete-btn"
                class="inline-flex items-center px-4 py-2 bg-white border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 transition"
            >
                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    ></path>
                </svg>
                Удалить жанр
            </button>
        </div>
    </div>
</div>

<div
    id="delete-modal"
    class="hidden fixed inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full z-50 flex items-center justify-center"
>
    <div
        class="relative p-5 border w-full max-w-md shadow-lg rounded-lg bg-white"
    >
        <div class="mt-3 text-center">
            <div
                class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4"
            >
                <svg
                    class="h-6 w-6 text-red-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    ></path>
                </svg>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Удалить жанр?
            </h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    Вы уверены, что хотите удалить жанр
                    <span
                        id="modal-genre-name"
                        class="font-bold text-gray-800"
                    ></span
                    >? Это действие нельзя отменить.
                </p>
                <p
                    id="modal-books-warning"
                    class="hidden text-sm text-orange-600 mt-2"
                >
                    В этом жанре есть книги. Связи будут удалены.
                </p>
            </div>
            <div class="flex gap-3 mt-4 justify-center">
                <button
                    id="confirm-delete-btn"
                    class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center"
                >
                    <span>Удалить</span>
                    <svg
                        id="delete-spinner"
                        class="hidden animate-spin ml-2 h-4 w-4 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle
                            class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"
                        ></circle>
                        <path
                            class="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                    </svg>
                </button>
                <button
                    id="cancel-delete-btn"
                    class="px-4 py-2 bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"
                >
                    Отмена
                </button>
            </div>
        </div>
    </div>
</div>

<div
    id="success-modal"
    class="hidden fixed inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full z-50 flex items-center justify-center"
>
    <div
        class="relative p-5 border w-full max-w-md shadow-lg rounded-lg bg-white"
    >
        <div class="mt-3 text-center">
            <div
                class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4"
            >
                <svg
                    class="h-6 w-6 text-green-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 13l4 4L19 7"
                    ></path>
                </svg>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Изменения сохранены!
            </h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    Жанр
                    <span
                        id="success-genre-name"
                        class="font-bold text-gray-800"
                    ></span>
                    успешно обновлён.
                </p>
            </div>
            <div class="flex gap-3 mt-4 justify-center">
                <a
                    id="success-link-btn"
                    href="/"
                    class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
                >
                    На главную
                </a>
                <button
                    id="success-close-btn"
                    class="px-4 py-2 bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"
                >
                    Продолжить
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script src="/static/page/edit_genre.js"></script>
{% endblock %}