<!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" />
	</head>
	<body>
		<div class="wrap">
			<h1 style="margin: 8px 0 0; font-weight: 700;">YouTube Proxy Player</h1>

			<div class="row">
				<input id="q" type="text" placeholder="Paste YouTube link or type keywords" />
				<button id="btnGo">Go</button>
			</div>
			<div id="status" class="muted" style="margin-top:8px;"></div>

			<div id="results" class="grid" style="margin-top: 14px;"></div>
			<div id="pager" class="row" style="margin-top: 8px; display:none;">
				<button id="btnPrevPage">Prev page</button>
				<div id="pageInfo" class="muted"></div>
				<button id="btnNextPage">Next page</button>
			</div>

			<div id="playerWrap" style="margin-top: 18px; display:none;">
				<div class="row" style="justify-content: space-between;">
					<div>
						<div id="nowPlaying" style="font-weight:600;"></div>
						<div id="nowChannel" class="muted"></div>
					</div>
					<a id="openStream" class="pill" href="#" target="_blank" rel="noopener">Open stream</a>
				</div>
				<video id="player" class="player" controls playsinline preload="metadata"></video>
			</div>
			<div id="playerControls" class="row" style="margin-top: 8px; display:none;">
				<button id="btnPrev">Prev</button>
				<button id="btnNext">Next</button>
			</div>
		</div>

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

		<script src="/static/app.js"></script>
	</body>
</html> 
