<%- include('./partials/header'); %>

<link rel="stylesheet" href="/assets/css/browse.css">
<br>
<h1 class="text-light text-center">Browse Streams</h1>
<br>
<div class="row mt-auto" id="no-active-streams">
	<!-- No active streamers popup -->
	<div class="col-md-11 m-auto">
		<div class="card card-body text-center">
			<span>Nobody is live right now...</span>
		</div>
	</div>
</div>

<div class="row mt-auto">
	<div class="col-md-11 m-auto" id="active-streams"></div>
</div>

<%- include('./partials/footer'); %>

<script type="application/javascript">
	$(document).ready(() => $(`#no-active-streams`).hide());
	fetch(`/api/streams`).then(data => data.json()).then(data => {
		//Check if there are streamers that are live
		if(data.length === 0){
			//Show the "nobody is live" header and return
			$(`#active-streams`).hide();
			$(`#no-active-streams`).show();
			return;
		}
		
		//Loop over the streamers
		for(const streamer of data){
			//Constants for the streamer data display
			const status = streamer.isLive ? "LIVE" : "OFFLINE";
			const statusClass = streamer.isLive ? "online" : "offline";

			//Get more info about the streamer
			const streamerAvatar = ""; //string
			const streamerRoles = {}; //{isVip: boolean, isStaff: boolean}

			//Create the basic skeleton of the streamer card
			let streamerDisplay = $(`<div class="card streamer-wrapper">`).html(`
				<div class="card-body">
					<div class="stream-thumbnail"><div class="thumbnail-inner" style="background-image: url('https://video-${streamer.rtmpServer}.throwdown.tv/api/thumbnail/${streamer.name}'), url('/assets/img/thumbnail.png')" alt="${streamer.displayName} Thumbnail" onclick="window.location.href = '/${streamer.name}'"></div></div>
					<div class="stream-info">
						<h2 class="stream-title"><a href="/${streamer.name}" class="condensed">${streamer.title}</a></h2>
						<p class="stream-desc condensed">${streamer.description}</p>

						<div class="streamer-info">
							<div class="profile-picture"><img src="${streamer.avatarURL}" onerror=this.src="/assets/img/defaultpfp.png" class="avatar circle-crop" alt="Avatar"></div>
							<div class="streamer-info-text">
								<div class="streamer-name">
									${streamer.roles.staff ? `<img src="/assets/img/chat/badges/staff.png" class="staffbadge" alt="[Throwdown Staff]" title="ThrowdownTV Staff">` : ``}
									${streamer.roles.vip ? `<img src="/assets/img/chat/badges/vip.png" class="vipbadge" alt="[VIP]" title="ThrowdownTV VIP Member">` : ``}
									<span class="streamer-display-name lead">${streamer.displayName}</span>
								</div>
								<div class="live-stats">
									<span class="status ${statusClass}">${status}</span>
									<span class="viewers text-danger" title="Live Viewers">
										<i class="streamer-icon icofont icofont-eye-alt"></i><span class="viewer-count">${streamer.viewers}</span>
									</span>
									<span class="followers text-primary" title="Followers">
										<i class="streamer-icon icofont icofont-people"></i><span class="follow-count">${streamer.followers}</span>
									</span>
								</div>
							</div>
						</div>
						
					</div>
  				</div>
			`).append(`</div>`);

			//Add the streamer to the list of those that are streaming
			$(`#active-streams`).append(streamerDisplay);
		}
	});
</script>