<!DOCTYPE html>
<html lang="en">

<head>
    {{ template "head" . }}
    <title>Настройки | SkazaNull</title>
</head>

<body class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-lg w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
        <div class="text-center">
            <i class="fas fa-quote-left text-4xl text-custom mb-4"></i>
            <h2 class="mt-6 text-3xl font-bold font-[&#39;Playfair_Display&#39;] text-gray-900">
                Настройки юзверя
            </h2>
            <p class="mt-2 text-sm text-gray-600 font-[&#39;Inter&#39;]">
                Изменяй и властвуй
            </p>
        </div>
        <div id="error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
            <p id="error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
        </div>
        <div id="success" class="hidden mt-4 p-4 rounded-md bg-green-50 border border-green-200">
            <p id="success-message" class="text-sm text-green-600 font-[&#39;Inter&#39;]">Юзверь обновлен!</p>
        </div>
        <form id="user-update" class="mt-8 space-y-6" action="/api/auth" method="PATCH">
            <div class="space-y-5">
                <div><label class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">Имя юзверя</label>
                    <div class="mt-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="input-name" name="name" placeholder="Например, &quot;Центробек&quot;"
                               class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
                    </div>
                </div>
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
                        Логин (то, что при авторизации используется)
                    </label>
                    <div class="mt-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-at text-gray-400"></i>
                        </div>
                        <input type="login" id="input-login" name="login" placeholder="Например, &quot;centrobeque&quot;"
                               class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
                    </div>
                </div>
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
                        Пароль
                    </label>
                    <div class="mt-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="input-password" name="password" placeholder="Например, &quot;uzbeki_sila!&quot;"
                               class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
                    </div>
                </div>
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
                        Telegram ID
                    </label>
                    <div class="mt-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fab fa-telegram text-gray-400"></i>
                        </div>
                        <input type="number" id="input-tgid" name="telegram_id" placeholder="Здесь должны быть ТОЛЬКО цифры"
                               class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex justify-between w-full">
                    <button type="submit"
                            class="!rounded-button px-6 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
                        Сохранить изменения
                    </button>
                    <button type="button" id="btn-logout"
                            class="!rounded-button px-6 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 font-[&#34;Inter&#34;]">
                        Выйти
                    </button>
                </div>
            </div>
        </form>
        <hr>
        <a href="/quotes" class="block fas fa-book text-gray-800" style="text-align: center;"> К цитатам</a>
        <div class="text-center">
            <p class="text-xs text-gray-500 font-[&#39;Inter&#39;]">
                <i class="fas fa-quote-right text-custom mr-1"></i>
                &copy; Masahiko AMANO (H1K0), 2025—present
                <i class="fas fa-quote-left text-custom ml-1"></i>
            </p>
        </div>
    </div>
	<script src="/static/js/settings.js"></script>
</body>

</html>
