{% extends "default.html" %}

{% block title %}
	<title>{{SITE_NAME}} - Live</title>
{% endblock %}

{% block content %}
	<style>
		tr:hover {
			border: 2.5px solid var(--primary);
		}
	</style>
	<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 link, thumb, name, title, viewers in live %}
					<tr onclick="window.open('{{link}}', '_blank')">
						<td width="48"><img src="{{thumb}}" alt="{{name}} thumbnail" referrerpolicy="no-referrer" width="48"></td>
						<td>{{name}}</td>
						<td>{{title}}</td>
						<td>{{viewers}}</td>
					</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 link, thumb, name in offline %}
					<tr onclick="window.open('{{link}}', '_blank')">
						<td width="48"><img src="{{thumb}}" alt="{{name}} thumbnail" referrerpolicy="no-referrer" width="48"></td>
						<td>{{name}}</td>
						<td></td>
						<td></td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
{% endblock %}