<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>YouTube Proxy Player</title>
		<link rel="stylesheet" href="https://unpkg.com/@mantine/core@7.17.8/styles.css" />
		<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>
	</head>
	<body class="min-h-screen flex flex-col bg-neutral-950 text-slate-100" style="min-height: 100vh; display: flex; flex-direction: column;">
		<!-- Header -->
		<header id="siteHeader" class="sticky top-0 z-50 bg-neutral-950/90 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/70 border-b border-slate-800">
			<div class="wrap">
				<div class="row" style="justify-content: space-between;">
					<div class="flex items-center gap-2">
						<span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-red-600 text-white">
							<i class="fa-brands fa-youtube"></i>
						</span>
						<span class="font-semibold">YouTube Proxy</span>
					</div>
					<div class="flex-1 flex items-center gap-2">
						<input id="q" type="text" placeholder="Paste YouTube link or type keywords" class="w-full rounded-lg bg-neutral-900 border border-slate-700 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
						<button id="btnGo" class="px-4 py-2 rounded-md bg-red-600 hover:bg-red-700 text-white text-sm font-medium">Go</button>
					</div>
				<div class="hidden sm:flex items-center gap-2">
					<a id="btnFaq" class="px-3 py-2 rounded-md bg-neutral-800 hover:bg-neutral-700 border border-slate-700" title="FAQ" href="{{ FAQ_URL }}" target="_blank" rel="noopener">
						<i class="fa-regular fa-circle-question"></i>
					</a>
					<button id="btnSettings" class="px-3 py-2 rounded-md bg-neutral-800 hover:bg-neutral-700 border border-slate-700" title="Settings">
						<i class="fa-solid fa-gear"></i>
					</button>
				</div>
				</div>
			</div>
		</header>

		<main style="flex: 1;">
			<div class="wrap">
				<!-- Player section -->
				<div id="playerWrap" class="mt-4" style="margin-top: 18px; display:none;">
					<div class="row" style="justify-content: space-between;">
						<div>
							<div id="nowPlaying" class="text-lg font-semibold"></div>
							<div id="nowChannel" class="muted"></div>
						</div>
					<div class="row" style="gap: 8px;">
						<select id="videoResolution" class="px-2 py-1 rounded-md bg-neutral-900 border border-slate-700 text-xs" title="Resolution" style="display:none;"></select>
						<a id="openStream" class="pill bg-blue-600/20 text-blue-300 hover:bg-blue-600/30" href="#" target="_blank" rel="noopener">Open stream</a>
					</div>
					</div>
					<video id="player" class="player rounded-lg" controls playsinline preload="metadata"></video>
				</div>
				<!-- Player side controls removed -->

				<!-- Status -->
				<div id="status" class="muted mt-2"></div>

				<!-- Results grid -->
				<div id="results" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4" style="margin-top: 14px;"></div>
				<div id="pager" class="row" style="margin-top: 8px; display:none;">
					<button id="btnPrevPage" class="px-3 py-2 rounded-md bg-neutral-800 hover:bg-neutral-700 border border-slate-700">Prev page</button>
					<div id="pageInfo" class="muted"></div>
					<button id="btnNextPage" class="px-3 py-2 rounded-md bg-neutral-800 hover:bg-neutral-700 border border-slate-700">Next page</button>
				</div>
			</div> <!-- end .wrap -->
		</main>

		<!-- Modal -->
		<div id="modal" style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5);">
			<div style="background:#171b21; border:1px solid #262b36; border-radius:12px; padding:16px; max-width:520px; width:calc(100% - 32px); color:#eaeef2;">
				<div style="font-weight:700; margin-bottom:8px;">Notice</div>
				<div id="modalMsg" class="muted" style="white-space:pre-wrap;"></div>
				<div style="margin-top:12px; text-align:right;"><button id="modalClose">Close</button></div>
			</div>
		</div>

		<!-- Settings Modal -->
		<div id="settingsModal" style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5);">
			<div style="background:#171b21; border:1px solid #262b36; border-radius:12px; padding:16px; max-width:520px; width:calc(100% - 32px); color:#eaeef2;">
				<div style="font-weight:700; margin-bottom:8px;">Settings</div>
				<div class="space-y-3">
					<label class="flex flex-col gap-2">
						<span>On video end</span>
						<select id="optOnEnd" class="px-3 py-2 rounded-md bg-neutral-900 border border-slate-700 text-sm">
							<option value="stop">Stop (default)</option>
							<option value="loop">Loopback</option>
							<option value="next">Play next (Search/Playlist)</option>
						</select>
					</label>
					<label class="flex flex-col gap-2">
						<span>Preferred resolution</span>
						<select id="optResolution" class="px-3 py-2 rounded-md bg-neutral-900 border border-slate-700 text-sm">
							<option value="0">Auto (best)</option>
							<option value="2160">2160p</option>
							<option value="1440">1440p</option>
							<option value="1080">1080p</option>
							<option value="720">720p</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="row" style="justify-content: flex-end; margin-top: 12px; gap: 8px;">
					<button id="settingsCancel" class="px-3 py-2 rounded-md bg-neutral-800 hover:bg-neutral-700 border border-slate-700">Cancel</button>
					<button id="settingsSave" class="px-3 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white border border-blue-700">Save</button>
				</div>
			</div>
		</div>

		<!-- Streamlink overlays/settings disabled -->

		<!-- Footer -->
		<footer class="mt-auto text-center py-4 border-t border-slate-800 bg-neutral-900/60">
			<div class="muted text-sm">
				<i class="fa-solid fa-code mr-1.5"></i>
				Created by <a href="https://github.com/DAN3002/Youtube-Colab-Proxy" target="_blank" rel="noopener" class="text-blue-400 font-semibold hover:underline">D.A.N_3002</a>
			</div>
			<div id="appVersion" class="muted text-xs mt-1 opacity-70">v...</div>
			<div class="muted text-[11px] mt-2 opacity-60">This project is for community and educational purposes only, not intended to violate any company's policies or laws.</div>
		</footer>

		<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> 
