{% load static %}

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link rel="stylesheet" href="{% static "style.css" %}"/>

		<script>
			CSRF_TOKEN = "{{ csrf_token }}";
			urls = {
			{% for path in base_urls %}
			  '{{ path.name }}': '/ajax/{{ path.pattern }}',
			{% endfor %}
			};
			{% if voting_enabled %}
			let VOTING_ENABLED = true;
			{% else %}
			let VOTING_ENABLED = false;
			{% endif %}
			{% if is_admin %}
			let ADMIN = true;
			{% else %}
			let ADMIN = false;
			{% endif %}
			{% if controls_enabled %}
			let CONTROLS_ENABLED = true;
			{% else %}
			let CONTROLS_ENABLED = false;
			{% endif %}
            // Popper is only used for dropdowns and tooltips, neither of which is used
            // https://getbootstrap.com/docs/5.0/getting-started/introduction/
			var Popper = function(){}
			{% block js %}
			{% endblock %}
		</script>
		<script src="{% static "bundle.js" %}"></script>

		<title>Raveberry</title>
		<link id="favicon" rel="shortcut icon" href="{% static "raveberry.svg" %}"/>
	</head>
	<body>
		<div id="disconnected-banner" class="information-banner">
			<i class="fas fa-exclamation-circle"></i>
			disconnected, trying to reconnect...
		</div>
		<div id="reconnected-banner" class="information-banner">
			<i class="fas fa-check-circle"></i>
			reconnected!
		</div>
		<div id="update-banner" class="information-banner">
			<i class="fas fa-info-circle"></i>
			New update available! <br/>
			<div id="update-banner-buttons">
				<span id="goto-update">show me</span> <span id="remind-updates">remind me later</span> <span id="ignore-updates">don't ask again</span>
			</div>
		</div>
		<div id="demo-banner" class="information-banner" {%if demo%}style="display: block;"{%endif%}>
			<i class="fas fa-info-circle"></i>
			This is a demo version of Raveberry with music from <a target="_blank" href="https://www.jamendo.com/start" class="unlink">Jamendo</a>
		</div>
		<nav class="navbar">
			<a class="navbar-brand" href="/">
				<svg id="navbar-icon" height="35px" width="38.8px">
					<use href="{% static "raveberry.svg" %}#icon"></use>
				</svg>
			</a>
			<div id="hashtag-container">
				<input id="hashtag-input" class="hidden">
				<div id="hashtag-text-container" class="autoscrolling-container"><span id="hashtag-text">{{ hashtag }}</span></div>
				<i id="hashtag-plus" class="fas fa-plus-circle"></i>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-container">
				<i class="fas fa-bars"></i>
			</button>
		</nav>
		<div class="collapse" id="menu-container">
			<div id="menu">
				<div class="menu-row">
					<div id="users-container">
						<i class="fas fa-user"></i>
						<span id="users"></span>
					</div>
					<div id="visitors-container">
						<span>Visitors</span>
						<span id="visitors"></span>
					</div>
					<div id="theme-controls">
						<i id="light-theme" class="fas fa-sun"></i>
						<i id="dark-theme" class="fas fa-moon"></i>
					</div>
				</div>
				<div class="menu-row"{%if not controls_enabled and not is_admin%} style='display: none;'{%endif%}>
					<a href="{% url 'settings' %}"{%if not is_admin%} style='visibility: hidden;'{%endif%}>
						<i class="fas fa-sliders-h"></i>
					</a>
					<div id="lights-controls">
						<i class="fas fa-lightbulb icon-disabled" id="lights-indicator"></i>
						<a href="{% url 'lights' %}">
							<i class="fas fa-cog"></i>
						</a>
					</div>
                    <a href="{% url 'network-info' %}">
                        <i class="fas fa-qrcode"></i>
                    </a>
				</div>
				<div class="menu-row">
					<a id="web-link" target="_blank" href="https://raveberry.party/" class="unlink"><i class="fas fa-globe"></i></a>
					<div id="platform-controls">
                        {%if local_enabled%}<i id="local" class="fas fa-hdd icon-disabled"></i>{%endif%}
                        {%if youtube_enabled%}<i id="youtube" class="fab fa-youtube icon-disabled"></i>{%endif%}
						{%if spotify_enabled%}<i id="spotify" class="fab fa-spotify icon-disabled"></i>{%endif%}
                        {%if soundcloud_enabled%}<i id="soundcloud" class="fab fa-soundcloud icon-disabled"></i>{%endif%}
						{%if jamendo_enabled%}<i id="jamendo" class="fab fa-jamendo icon-disabled"></i>{%endif%}
					</div>
					<a href="{{ apk_link }}" download>
						<svg id="shareberry-icon" height="35px" width="35px">
							<use href="{% static "shareberry.svg" %}#icon"></use>
						</svg>
					</a>
				</div>
				{% if streaming_enabled %}
                <div class="menu-row">
                    <div></div>
                    <a id="stream-link" target="_blank" href="/stream" class="unlink">
                        <i class="fas fa-headphones"></i>
                    </a>
                </div>
				{% endif %}
			</div>
		</div>
		<div id="content">
			{% block content %}
			{% endblock %}
		</div>

		<div id="toast-container">
			<div class="toast info" id="info-toast">
				<div class="toast-header">
					<i class="fas fa-info-circle"></i>
					<span class="toast-content"></span>
				</div>
			</div>
			<div class="toast success" id="success-toast">
				<div class="toast-header">
					<i class="fas fa-check-circle"></i>
					<span class="toast-content"></span>
				</div>
			</div>
			<div class="toast warning" id="warning-toast">
				<div class="toast-header">
					<i class="fas fa-exclamation-triangle"></i>
					<span class="toast-content"></span>
				</div>
				<div id="vote-timeout">
					<div id="vote-timeout-bar" class="progress-bar">
					</div>
				</div>
			</div>
			<div class="toast error" id="error-toast">
				<div class="toast-header">
					<i class="fas fa-exclamation-circle"></i>
					<span class="toast-content"></span>
				</div>
			</div>
		</div>
	</body>
</html>
