{{define "logs"}}
<!doctype html>
<html lang="en">
	<head>
		{{template "head-common" .}}
		<title>{{.Title}}</title>
	</head>
	<body class="bg-gray-900 text-gray-100">
		{{template "accessibility-common" .}} {{template "main-layout-start" .}}
		{{template "logs-content" .}} {{template "main-layout-end" .}}
		{{template "body-common-scripts" .}}
		<script>
			// Auto-scroll to bottom
			function scrollToBottom() {
				const container = document.getElementById("log-container");
				if (container) {
					container.scrollTop = container.scrollHeight;
				}
			}

			// Scroll after content loads
			document.body.addEventListener("htmx:afterSwap", function (evt) {
				if (evt.target.id === "log-content") {
					scrollToBottom();
				}
			});

			// Initial scroll on page load
			window.addEventListener("load", function () {
				scrollToBottom();
			});

			// Auto-refresh logs every 30 seconds
			setInterval(function () {
				htmx.ajax("GET", "/api/logs", { target: "#log-content" });
			}, 30000);
		</script>
	</body>
</html>
{{end}} {{define "logs-content"}}
<div class="space-y-6">
	<div class="mb-6">
		<h2 class="text-3xl font-bold text-white">Logs Viewer</h2>
		<p class="text-gray-400 mt-1">View manager and application logs</p>
	</div>

	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			Recent Errors
		</h3>

		<div
			id="recent-errors-list"
			hx-get="/api/logs/errors"
			hx-trigger="load"
			hx-swap="innerHTML"
		>
			Loading errors...
		</div>
	</div>

	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			Log Information
		</h3>

		<div class="grid grid-cols-2 gap-4">
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Log File</p>
				<p class="font-mono text-sm text-white">
					~/.config/mpv/mpv-manager.log
				</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Log Location</p>
				<p class="font-medium text-white">File-based logging</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Log Level</p>
				<p class="font-medium text-white">Info</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Verbose Mode</p>
				<p class="font-medium text-white">Disabled</p>
			</div>
		</div>
	</div>

	<div class="bg-gray-800 rounded-lg p-6">
		<div class="flex items-center justify-between mb-4">
			<h3 class="text-xl font-semibold text-purple-400">
				Application Log
			</h3>
			<div class="flex gap-2">
				<button
					class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded transition flex items-center gap-2"
					hx-get="/api/logs"
					hx-target="#log-content"
					hx-on:htmx:before-request="this.disabled = true; this.querySelector('i').classList.add('bx-spin')"
					hx-on:htmx:after-request="this.disabled = false; this.querySelector('i').classList.remove('bx-spin')"
				>
					<i class="bx bx-refresh-cw"></i>
					Refresh
				</button>
				<button
					class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded transition flex items-center gap-2"
					data-modal="clear-logs"
				>
					<i class="bx bx-trash"></i>
					Clear
				</button>
				<a
					href="/api/logs/download"
					class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded transition flex items-center gap-2"
				>
					<i class="bx bx-archive-arrow-down"></i>
					Download
				</a>
			</div>
		</div>

		<div
			class="bg-gray-900 rounded-lg p-4 max-h-[600px] overflow-auto"
			id="log-container"
		>
			<pre
				id="log-content"
				class="text-sm text-gray-300 font-mono whitespace-pre-wrap"
				hx-get="/api/logs"
				hx-trigger="load"
				hx-swap="innerHTML"
			>
Loading logs...</pre
			>
		</div>
	</div>
</div>
{{end}} {{define "recent-errors"}} {{if .}}
<div class="space-y-3">
	{{range .}}
	<div class="bg-gray-700 rounded-lg p-4 border-l-4 border-red-500">
		<div class="flex items-start justify-between mb-2">
			<span class="text-red-400 font-mono text-sm">{{.Timestamp}}</span>
			<i class="bx bx-error text-red-400"></i>
		</div>
		<p class="text-white font-medium mb-2">{{.Message}}</p>
		{{if .Details}}
		<pre
			class="text-gray-400 text-xs font-mono bg-gray-800 p-2 rounded overflow-x-auto"
		>
{{.Details}}</pre
		>
		{{end}}
	</div>
	{{end}}
</div>
{{else}}
<div class="text-gray-400 text-sm p-4 bg-gray-700 rounded-lg">
	<div class="flex items-center gap-2">
		<i class="bx bx-check-circle text-green-400"></i>
		<span>No recent errors found</span>
	</div>
</div>
{{end}} {{end}}
