{% 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">
		<meta name="referrer" content="strict-origin-when-cross-origin">

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

		<script>
			const CSRF_TOKEN = "{{ csrf_token }}";
			// needs to be hoisted for tests
			urls = {
			{% for path in base_urls %}
			  '{{ path.name }}': '/ajax/{{ path.pattern }}',
			{% endfor %}
			};
			const INTERACTIVITY = "{{ interactivity }}";
			const INTERACTIVITIES = {
			{% for name, description in interactivities.items %}
			  {{name}}: "{{description}}",
			{% endfor %}
			};
            const COLOR_INDICATION = {% if color_indication %}true{% else %}false{% endif %};
			const ADMIN = {% if is_admin %}true{% else %}false{% endif %};
			const CONTROLS_ENABLED = {% if controls_enabled %}true{% else %}false{% endif %};
            // Popper is only used for dropdowns and tooltips, neither of which is used
            // https://getbootstrap.com/docs/5.0/getting-started/introduction/
			const 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>
		{% if demo %}
		<div id="demo-banner" class="information-banner" style="display: block;">
			<i class="fas fa-info-circle"></i>
			This is a demo version of Raveberry with music from <a target="_blank" rel="noopener" href="https://www.jamendo.com/start" class="unlink">Jamendo</a>
		</div>
		{% endif %}
		<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">
						<div class="with-description">
							<div>
								<i class="fas fa-user"></i>
								<span id="users"></span>
							</div>
							<span>Active</span>
						</div>
					</div>
					<div id="visitors-container" class="with-description">
						<div id="visitors"></div>
						<span>Visitors</span>
					</div>
					<div id="theme-controls">
						<div class="with-description">
							<div id="theme-container" class="anim-container">
								<i id="dark-theme" class="fas fa-moon default"></i>
								<i id="light-theme" class="fas fa-sun other"></i>
							</div>
							<span id="theme-description">Theme</span>
						</div>
						{% if color_indication %}
						<div class="with-description">
							<div id="user-color-container">
								<input type="color" id="user-color" value="{{ user_color }}"/>
							</div>
							<span>Votes</span>
						</div>
						{% endif %}
					</div>
				</div>
				<div class="menu-row"{%if not controls_enabled%} style='display: none;'{%endif%}>
					<div class="with-description">
						<a href="{% url 'settings' %}"{%if not is_admin%} style='visibility: hidden;'{%endif%}>
							<i class="fas fa-sliders-h"></i>
						</a>
						<span>Settings</span>
					</div>
					<div class="with-description">
						<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>
						<span>Lights</span>
					</div>
					<div class="with-description">
						<a href="{% url 'network-info' %}">
							<i class="fas fa-qrcode"></i>
						</a>
						<span>Quick Access</span>
					</div>
				</div>
				<div class="menu-row">
					<div id="raveberry-links">
						<div class="with-description">
							<a id="web-link" target="_blank" rel="noopener" href="https://raveberry.party/" class="unlink"><i class="fas fa-globe"></i></a>
							<span>Website</span>
						</div>
						<div class="with-description">
							<a href="{{ apk_link }}" download>
								<svg id="shareberry-icon" height="42px" width="42px">
									<use href="{% static "shareberry.svg" %}#icon"></use>
								</svg>
							</a>
							<span>App</span>
						</div>
					</div>
					<div class="with-description">
						<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>
						<span>Preferred</span>
					</div>
					<div class="with-description">
						<i class="fas fa-comment-dots" id="open-feedback-dialog"></i>
						<span>Feedback</span>
					</div>
				</div>
			</div>
		</div>
		<div id="content">
			{% block content %}
			{% endblock %}
		</div>

		<div id="feedback-modal" class="modal fade" role="dialog">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div id="feedback-title">Send Feedback to the Developer</div>
					<div>
						<span>How do you like Raveberry?</span>
						<div id="feedback-emoji">
							<i class="fas fa-angry icon-disabled"></i>
							<i class="fas fa-frown icon-disabled"></i>
							<i class="fas fa-meh icon-disabled"></i>
							<i class="fas fa-smile icon-disabled"></i>
							<i class="fas fa-laugh icon-disabled"></i>
						</div>
					</div>
					<div>
						<span>Add a comment (optional):</span>
						<textarea rows="3" maxlength="3900" id="feedback-message"></textarea>
					</div>
					<button class="btn" id="submit-feedback">Submit</button>
					<div>
						<span>You can also reach out via:</span>
						<div id="feedback-links">
							<div class="with-description">
								<a id="web-link" target="_blank" rel="noopener" href="https://github.com/raveberry/raveberry/issues" class="unlink">
									<i class="fab fa-github" id="github"></i>
								</a>
								<span>Github</span>
							</div>
							<div class="with-description">
								<a id="web-link" target="_blank" rel="noopener" href="https://discord.gg/dy7Jxvjj9H" class="unlink">
									<i class="fab fa-discord" id="discord"></i>
								</a>
								<span>Discord</span>
							</div>
							<div class="with-description">
								<a id="web-link" target="_blank" rel="noopener" href="https://www.reddit.com/r/raveberry" class="unlink">
									<i class="fab fa-reddit" id="reddit"></i>
								</a>
								<span>Reddit</span>
							</div>
							<div class="with-description">
								<a id="web-link" target="_blank" rel="noopener" href="mailto:raveberry@jhacker.de" class="unlink">
									<i class="fas fa-envelope"></i>
								</a>
								<span>Mail</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</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>
		{% if demo %}
		<footer>
			<span>© <span id="year"></span></span>
			<a href="/legal">Legal Notice</a>
		</footer>
		<script>
			document.getElementById("year").innerHTML = new Date().getFullYear();
		</script>
		{% endif %}
	</body>
</html>
