{% 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 id="active-stylesheet" rel="stylesheet" href="{% static "dark.css" %}"/>
		<link id="inactive-stylesheet" rel="stylesheet-disabled" href="{% static "light.css" %}"/>

		<script>
			CSRF_TOKEN = "{{ csrf_token }}";
			urls = {
				/* the state url is changed by every page so it receives their specific state */
				'state': '{% url 'base_state' %}',
				'submit_hashtag': '{% url 'submit_hashtag' %}',
				'set_lights_shortcut': '{% url 'set_lights_shortcut' %}',
				'dark_icon': '{% static "graphics/raveberry_dark.png" %}',
				'normal_icon': '{% static "graphics/raveberry_normal.png" %}',
				'normal_light_icon': '{% static "graphics/raveberry_normal_light.png" %}',
				'party_icon': '{% static "graphics/raveberry_rainbow.gif" %}',
				'shareberry_light_icon': '{% static "graphics/shareberry_dark.png" %}',
				'shareberry_dark_icon': '{% static "graphics/shareberry_normal.png" %}',
				'upgrade_available': '{% url 'upgrade_available' %}',
			};
			{% if voting_system %}
			let VOTING_SYSTEM = true;
			{% else %}
			let VOTING_SYSTEM = 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" type="image/png" href="{% static "graphics/raveberry_dark.png" %}"/>
	</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>
		<nav class="navbar">
			<a class="navbar-brand" href="/">
				<img id="navbar_icon" height="30" alt="" onerror="this.style.visibility='hidden'" src="{% static "graphics/raveberry_normal.png" %}">
			</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 icon_disabled"></i>
						<i id="dark_theme" class="fas fa-moon icon_disabled"></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"{%if voting_system and controls_enabled == False%} style="visibility: hidden"{%endif%}>
						<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' %}"{%if not is_admin%} style='visibility: hidden;'{%endif%}>
                        <i class="fas fa-qrcode"></i>
                    </a>
				</div>
				<div class="menu_row">
					<a id="github_link" target="_blank" rel="noopener noreferrer" href="https://github.com/raveberry/raveberry" class="unlink">
						<i class="fab fa-github"></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%}
					</div>
					<a href="{{ apk_link }}" download>
						<img id="shareberry_icon" height="30" alt="" onerror="this.style.visibility='hidden'" src="{% static "graphics/shareberry_normal.png" %}">
					</a>
				</div>
                <div class="menu_row">
                    <div></div>
                    <a id="stream_link" target="_blank" rel="noopener noreferrer" href="/stream" class="unlink">
                        <i class="fas fa-headphones"></i>
                    </a>
                </div>
			</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>
