<!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-4xl 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 class="mb-6 flex justify-between items-center flex-wrap gap-4">
			<div class="flex flex-wrap gap-4">
				<input type="text" id="input-search" placeholder="Поиск цитат..." class="px-4 py-2 border rounded-lg" />
				<select id="input-sorting" class="px-4 py-2 border rounded-lg" style="padding-right: 3.5rem;">
					<option value="-datetime">По дате ↑</option>
					<option value="+datetime">По дате ↓</option>
					<option value="+author">По автору А-Я</option>
					<option value="-author">По автору Я-А</option>
					<option value="+text">По тексту А-Я</option>
					<option value="-text">По тексту Я-А</option>
					<option value="+creator.name">По цитатору А-Я</option>
					<option value="-creator.name">По цитатору Я-А</option>
					<option value="random">Рандом Рандомыч</option>
				</select>
				<button class="text-gray-600 hover:text-blue-500" id="btn-refresh">
					<i class="fas fa-refresh"></i>
				</button>
			</div>
			<button class="bg-custom text-white px-4 py-2 rounded-lg hover:bg-custom/90" id="btn-add-open">Добавить цитату</button>
		</div>
		<hr>
		<div id="block-quotes" class="space-y-4">
			<img id="block-quotes-loader" src="/static/images/loader.gif" alt="Loading..." class="loader">
		</div>
		<hr>
		<div class="mt-6 flex justify-center gap-2">
			<button id="btn-page-first" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
			<div id="pages-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
			<button id="btn-page-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
			<button id="btn-page-curr" class="px-3 py-1 border rounded-lg bg-custom text-white">2</button>
			<button id="btn-page-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">3</button>
			<div id="pages-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
			<button id="btn-page-last" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">10</button>
		</div>
        <a href="/settings" class="block fas fa-gear text-gray-800" style="text-align: center;"> Настройки</a>
		<div class="text-center mt-8">
			<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>
	<div id="quote-creator" class="hidden quote-form flex flex-col items-center justify-center">
		<div class="max-w-4xl w-full mt-8 p-6">
			<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
				<h3 class="text-xl font-bold font-[&#39;Playfair_Display&#39;] text-gray-900 mb-4">Создать цитату</h3>
				<div id="quote-creator-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
					<p id="quote-creator-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
				</div>
				<form id="quote-create" class="space-y-4">
					<div>
						<label for="new-quote-text" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
							Цитата
						</label>
						<textarea id="new-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
								  class="!rounded-button mt-1 block w-full px-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-[&#39;Inter&#39;]"></textarea>
					</div>
					<div>
						<label for="new-quote-author" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
							Автор
						</label>
						<input type="text" id="new-quote-author" name="author" placeholder="Узбекс" required
							   class="!rounded-button mt-1 block w-full px-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-[&#39;Inter&#39;]" />
					</div>
					<div>
						<label for="new-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
							Дата и время
						</label>
						<input type="datetime-local" id="new-quote-datetime" name="datetime" step="1"
							   class="!rounded-button mt-1 block w-full px-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-[&#39;Inter&#39;]" />
					</div>
					<div class="flex justify-end space-x-3">
						<button type="button" id="btn-add-close"
								class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#39;Inter&#39;]">
							Отмена
						</button>
						<button type="submit"
								class="!rounded-button px-4 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-[&#39;Inter&#39;]">
							Создать
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div id="quote-editor" class="hidden quote-form flex flex-col items-center justify-center">
		<div class="max-w-4xl w-full mt-8 p-6">
			<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
				<h3 class="text-xl font-bold font-[&#34;Playfair_Display&#34;] text-gray-900 mb-4">Редактировать цитату</h3>
				<div id="quote-editor-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
					<p id="quote-editor-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
				</div>
				<form id="quote-update" class="space-y-4">
					<div>
						<label for="edit-quote-text" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
							Цитата
						</label>
						<textarea id="edit-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
								  class="!rounded-button mt-1 block w-full px-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;]"></textarea>
					</div>
					<div>
						<label for="edit-quote-author" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
							Автор
						</label>
						<input type="text" id="edit-quote-author" name="author" placeholder="Узбекс" required
							   class="!rounded-button mt-1 block w-full px-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>
						<label for="edit-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
							Дата и время
						</label>
						<input type="datetime-local" id="edit-quote-datetime" name="datetime" step="1"
							   class="!rounded-button mt-1 block w-full px-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 class="flex justify-end space-x-3">
						<button type="button" id="btn-edit-close"
								class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
							Отмена
						</button>
						<button type="submit"
								class="!rounded-button px-4 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>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script src="/static/js/utils.js"></script>
	<script src="/static/js/quotes.js"></script>
</body>

</html>
