{% extends "default.html" %}
{% block pagetitle %}Live{% endblock %}
{% block content %}
	<style>
		tr:hover {
			border: 2.5px solid var(--primary);
		}
		img.thumb {
			border-radius: 4px;
		}
		.remove-streamer {
			width: 130px;
		}
	</style>
	<script>
		function go_to(e, link) {
			if (!e.target.classList.contains('remove-streamer'))
				window.open(link, '_blank');
		}
	</script>

	{% if error %}{{macros.alert(error, true)}}{% endif %}
	{% if msg %}{{macros.alert(msg, false)}}{% endif %}

	<div class="px-2 mb-4">
		<h1 class="py-3"><i class="fas fa-circle mr-3" style="color:red"></i>Live</h1>
		<div class="overflow-x-auto">
			<table class="table table-striped mb-5">
				<tbody>
					{% for id, link, thumb, name, title, viewers in live %}
						<tr onclick="go_to(event,'{{link}}')">
							<td width="48"><img loading="lazy" class="thumb" src="{{thumb}}" alt="{{name}} thumbnail" width="48"></td>
							<td>{{name}}</td>
							<td>{{title}}</td>
							<td>{{viewers}} watching</td>
							{% if v and v.admin_level >= PERMS['STREAMERS_MODERATION'] %}
								<td>
									<form action="/live/remove" method="post">
										<input type="hidden" name="formkey" value="{{v|formkey}}">
										<input type="hidden" name="id" value="{{id}}">
										<input autocomplete="off" class="btn btn-primary ml-auto remove-streamer" data-click="disable(this);this.parentElement.submit()" onclick="areyousure(this)" value="Remove">
									</form>
								</td>
							{% endif %}
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>

		<h1 class="py-3"><i class="fas fa-circle mr-3" style="color:gray"></i>Offline</h1>
		<div class="overflow-x-auto">
			<table class="table table-striped mb-5">
				<tbody>
					{% for id, link, thumb, name, minutes, actual, views in offline %}
						<tr onclick="go_to(event,'{{link}}')">
							<td width="48"><img loading="lazy" class="thumb" src="{{thumb}}" alt="{{name}} thumbnail" width="48"></td>
							<td>{{name}}</td>
							<td>{{actual}}</td>
							<td>{{views}} views</td>
							{% if v and v.admin_level >= PERMS['STREAMERS_MODERATION'] %}
								<td>
									<form action="/live/remove" method="post">
										<input type="hidden" name="formkey" value="{{v|formkey}}">
										<input type="hidden" name="id" value="{{id}}">
										<input autocomplete="off" class="btn btn-primary ml-auto remove-streamer" data-click="disable(this);this.parentElement.submit()" onclick="areyousure(this)" value="Remove">
									</form>
								</td>
							{% endif %}
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>

		{% if v and v.admin_level >= PERMS['STREAMERS_MODERATION'] %}
			<form action="/live/add" method="post">
				<input type="hidden" name="formkey" value="{{v|formkey}}">
				<input class="form-control" autocomplete="off" type="text" name="link" class="form-control" placeholder="Enter channel link.." required>
				<input autocomplete="off" class="btn btn-primary mt-3" type="submit" onclick="disable(this)" value="Add Youtube Channel" style="float:right">
			</form>
		{% endif %}
	</div>
{% endblock %}