<!doctype html>
<html lang="en" class="scroll-smooth">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>YouTube Proxy Player</title>
		<link rel="stylesheet" href="/static/style.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
		<script src="https://cdn.tailwindcss.com"></script>
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							'yt-bg': '#0f0f0f',
							'yt-bg-secondary': '#272727',
							'yt-bg-elevated': '#1a1a1a',
							'yt-bg-hover': '#3f3f3f',
							'yt-text': '#f1f1f1',
							'yt-text-secondary': '#aaaaaa',
							'yt-red': '#ff0000',
							'yt-red-hover': '#cc0000',
							'yt-blue': '#3ea6ff',
							'yt-chip': '#ffffff1a',
							'yt-chip-active': '#f1f1f1',
							'yt-divider': '#ffffff1a',
						},
						fontFamily: {
							'youtube': ['"Roboto"', '"Arial"', 'sans-serif'],
						},
						animation: {
							'fade-in': 'fadeIn 0.3s ease-out',
							'fade-in-up': 'fadeInUp 0.4s ease-out',
							'slide-up': 'slideUp 0.3s ease-out',
							'slide-down': 'slideDown 0.3s ease-out',
							'scale-in': 'scaleIn 0.2s ease-out',
							'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
						},
					}
				}
			}
		</script>
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
	</head>
	<body class="min-h-screen flex flex-col bg-yt-bg text-yt-text font-youtube antialiased">

		<!-- Header / Top Bar -->
		<header id="siteHeader" class="sticky top-0 z-50 bg-yt-bg/95 backdrop-blur-lg border-b border-yt-divider transition-all duration-300">
			<div class="max-w-[1400px] mx-auto px-4 h-14 flex items-center gap-4">
				<!-- Logo -->
				<a href="/" class="flex items-center gap-1.5 flex-shrink-0 group" title="YouTube Proxy Player">
					<div class="relative">
						<div class="w-8 h-8 bg-yt-red rounded-lg flex items-center justify-center transition-transform duration-200 group-hover:scale-110">
							<i class="fa-brands fa-youtube text-white text-sm"></i>
						</div>
						<div class="absolute inset-0 bg-yt-red rounded-lg opacity-0 group-hover:opacity-30 blur-md transition-opacity duration-300"></div>
					</div>
					<span class="font-semibold text-yt-text hidden sm:inline tracking-tight">Proxy</span>
				</a>

				<!-- Search Bar -->
				<div class="flex-1 flex items-center justify-center max-w-2xl mx-auto">
					<div class="flex items-center w-full group">
						<div class="relative flex-1">
							<input id="q" type="text"
								placeholder="Search or paste YouTube link"
								class="w-full h-10 pl-4 pr-10 bg-yt-bg border border-[#303030] rounded-l-full text-sm text-yt-text placeholder-yt-text-secondary focus:outline-none focus:border-yt-blue focus:ring-1 focus:ring-yt-blue/50 transition-all duration-200" />
							<button id="btnClearSearch" class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full hover:bg-yt-bg-hover flex items-center justify-center text-yt-text-secondary opacity-0 transition-all duration-200 pointer-events-none" title="Clear">
								<i class="fa-solid fa-xmark text-xs"></i>
							</button>
						</div>
						<button id="btnGo" class="h-10 px-5 bg-yt-bg-secondary hover:bg-yt-bg-hover border border-l-0 border-[#303030] rounded-r-full text-yt-text-secondary transition-colors duration-200" title="Search">
							<i class="fa-solid fa-magnifying-glass text-sm"></i>
						</button>
					</div>
				</div>

				<!-- Right Actions -->
				<div class="flex items-center gap-1 flex-shrink-0">
					<a id="btnFaq" class="w-10 h-10 rounded-full hover:bg-yt-bg-hover flex items-center justify-center text-yt-text-secondary hover:text-yt-text transition-colors duration-200" title="FAQ" href="{{ FAQ_URL }}" target="_blank" rel="noopener">
						<i class="fa-regular fa-circle-question text-lg"></i>
					</a>
					<button id="btnSettings" class="w-10 h-10 rounded-full hover:bg-yt-bg-hover flex items-center justify-center text-yt-text-secondary hover:text-yt-text transition-colors duration-200" title="Settings">
						<i class="fa-solid fa-gear text-lg"></i>
					</button>
				</div>
			</div>
		</header>

		<!-- Main Content -->
		<main class="flex-1">
			<!-- Player Section -->
			<div id="playerWrap" class="hidden animate-fade-in">
				<div class="bg-black">
					<div class="max-w-[1280px] mx-auto">
						<div class="relative aspect-video w-full overflow-hidden">
							<video id="player" class="w-full h-full object-contain" controls playsinline preload="metadata"></video>
						</div>
					</div>
				</div>

				<!-- Video Info Bar -->
				<div class="max-w-[1280px] mx-auto px-4 py-3">
					<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
						<div class="flex-1 min-w-0">
							<h1 id="nowPlaying" class="text-lg font-semibold text-yt-text leading-snug line-clamp-2"></h1>
							<div class="flex items-center gap-3 mt-1.5">
								<div id="nowChannel" class="text-sm text-yt-text-secondary hover:text-yt-text transition-colors cursor-default"></div>
							</div>
						</div>
						<div class="flex items-center gap-2 flex-shrink-0">
							<select id="videoResolution" class="hidden h-9 px-3 bg-yt-bg-secondary hover:bg-yt-bg-hover rounded-full text-sm text-yt-text border-none outline-none cursor-pointer transition-colors duration-200" title="Resolution"></select>
							<a id="openStream" class="inline-flex items-center gap-2 h-9 px-4 bg-yt-bg-secondary hover:bg-yt-bg-hover rounded-full text-sm text-yt-text transition-colors duration-200" href="#" target="_blank" rel="noopener">
								<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
								Open stream
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- Content Area -->
			<div class="max-w-[1400px] mx-auto px-4 pb-8">
				<!-- Status -->
				<div id="status" class="text-sm text-yt-text-secondary py-2 transition-opacity duration-300"></div>

				<!-- Welcome / Empty State -->
				<div id="welcomeState" class="flex flex-col items-center justify-center py-20 animate-fade-in">
					<div class="w-20 h-20 bg-yt-red/10 rounded-full flex items-center justify-center mb-6 animate-pulse-glow">
						<i class="fa-brands fa-youtube text-yt-red text-4xl"></i>
					</div>
					<h2 class="text-xl font-medium text-yt-text mb-2">Welcome to YouTube Proxy</h2>
					<p class="text-sm text-yt-text-secondary text-center max-w-md">Search for videos, paste a YouTube link, or browse playlists and channels to start watching.</p>
					<div class="flex flex-wrap justify-center gap-2 mt-6">
						<span class="suggestion-chip" data-query="music trending">
							<i class="fa-solid fa-music text-xs mr-1.5"></i> Music Trending
						</span>
						<span class="suggestion-chip" data-query="lofi hip hop">
							<i class="fa-solid fa-headphones text-xs mr-1.5"></i> Lofi Hip Hop
						</span>
						<span class="suggestion-chip" data-query="tech reviews">
							<i class="fa-solid fa-microchip text-xs mr-1.5"></i> Tech Reviews
						</span>
						<span class="suggestion-chip" data-query="gaming highlights">
							<i class="fa-solid fa-gamepad text-xs mr-1.5"></i> Gaming
						</span>
					</div>
				</div>

				<!-- Results Grid -->
				<div id="results" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-6 mt-2"></div>

				<!-- Pagination -->
				<div id="pager" class="hidden mt-8 flex items-center justify-center gap-3">
					<button id="btnPrevPage" class="yt-btn-secondary gap-2">
						<i class="fa-solid fa-chevron-left text-xs"></i>
						Previous
					</button>
					<div id="pageInfo" class="text-sm text-yt-text-secondary px-3"></div>
					<button id="btnNextPage" class="yt-btn-secondary gap-2">
						Next
						<i class="fa-solid fa-chevron-right text-xs"></i>
					</button>
				</div>
			</div>
		</main>

		<!-- Notice Modal -->
		<div id="modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4" style="background:rgba(0,0,0,.7);">
			<div class="modal-content bg-yt-bg-elevated rounded-2xl p-6 max-w-md w-full shadow-2xl border border-yt-divider animate-scale-in">
				<div class="flex items-center gap-3 mb-4">
					<div class="w-10 h-10 bg-yt-red/10 rounded-full flex items-center justify-center flex-shrink-0">
						<i class="fa-solid fa-triangle-exclamation text-yt-red"></i>
					</div>
					<h3 class="font-semibold text-yt-text text-lg">Notice</h3>
				</div>
				<div id="modalMsg" class="text-sm text-yt-text-secondary whitespace-pre-wrap leading-relaxed"></div>
				<div class="mt-5 flex justify-end">
					<button id="modalClose" class="yt-btn-primary">Got it</button>
				</div>
			</div>
		</div>

		<!-- Settings Modal -->
		<div id="settingsModal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4" style="background:rgba(0,0,0,.7);">
			<div class="modal-content bg-yt-bg-elevated rounded-2xl p-6 max-w-md w-full shadow-2xl border border-yt-divider animate-scale-in">
				<div class="flex items-center gap-3 mb-5">
					<div class="w-10 h-10 bg-yt-bg-secondary rounded-full flex items-center justify-center flex-shrink-0">
						<i class="fa-solid fa-gear text-yt-text-secondary"></i>
					</div>
					<h3 class="font-semibold text-yt-text text-lg">Settings</h3>
				</div>
				<div class="space-y-5">
					<label class="block">
						<span class="text-sm font-medium text-yt-text mb-2 block">On video end</span>
						<select id="optOnEnd" class="yt-select">
							<option value="stop">Stop (default)</option>
							<option value="loop">Loop current video</option>
							<option value="next">Play next (Search / Playlist)</option>
						</select>
					</label>
					<label class="block">
						<span class="text-sm font-medium text-yt-text mb-2 block">Preferred resolution</span>
						<select id="optResolution" class="yt-select">
							<option value="0">Auto (best available)</option>
							<option value="2160">2160p (4K)</option>
							<option value="1440">1440p (2K)</option>
							<option value="1080">1080p (Full HD)</option>
							<option value="720">720p (HD)</option>
							<option value="480">480p</option>
							<option value="360">360p</option>
							<option value="240">240p</option>
							<option value="144">144p</option>
						</select>
					</label>
				</div>
				<div class="flex justify-end gap-3 mt-6">
					<button id="settingsCancel" class="yt-btn-secondary">Cancel</button>
					<button id="settingsSave" class="yt-btn-primary">Save</button>
				</div>
			</div>
		</div>

		<!-- Footer -->
		<footer class="mt-auto border-t border-yt-divider bg-yt-bg">
			<div class="max-w-[1400px] mx-auto px-4 py-5 text-center">
				<div class="text-xs text-yt-text-secondary">
					<i class="fa-solid fa-code mr-1"></i>
					Created by <a href="https://github.com/DAN3002/Youtube-Colab-Proxy" target="_blank" rel="noopener" class="text-yt-blue hover:underline font-medium">D.A.N_3002</a>
				</div>
				<div id="appVersion" class="text-[11px] text-yt-text-secondary/50 mt-1">v...</div>
				<div class="text-[10px] text-yt-text-secondary/40 mt-2 max-w-lg mx-auto">This project is for community and educational purposes only, not intended to violate any company's policies or laws.</div>
			</div>
		</footer>

		<!-- Toast Notification Container -->
		<div id="toastContainer" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[200] flex flex-col gap-2 items-center pointer-events-none"></div>

		<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.14/dist/hls.min.js"></script>
		<script src="/static/app.js"></script>
	</body>
</html>
