{% extends 'base.html' %}
{% load static %}

{% block js %}
	urls['state'] = '{% url 'settings-state' %}';
	urls['settings'] = {
	{% for path in urls %}
		'{{ path.name }}': '/ajax/settings/{{ path.pattern }}',
	{% endfor %}
	};
	const SPOTIFY_SCOPE = '{{ spotify_scope }}';
	const SPOTIFY_OAUTH_AUTHORIZE_URL = '{{ spotify_oauth_authorize_url }}';
{% endblock %}

{% block content %}
<div id="settings">
	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Basic Settings</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Interactivity (how much normal users can influence the queue)</span>
			<select class="form-control" id="interactivity">
				{% for name,description in interactivities.items %}
				<option data-name="{{name}}">{{ description }}</option>
				{% endfor %}
			</select>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Voting behavior is visible to</span>
			<select class="form-control" id="color-indication">
				{% for name,description in privileges.items %}
					<option data-name="{{name}}">{{ description }}</option>
				{% endfor %}
			</select>
		</li>
		<li class="list-group-item list-item">
			<span class="description">IP vote checking</span>
			<input type="checkbox" id="ip-checking">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Downvotes to kick</span>
			<input id="downvotes-to-kick"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Logging</span>
			<input type="checkbox" id="logging-enabled">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Show new hashtags by default</span>
			<input type="checkbox" id="hashtags-active">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Only privileged users can stream audio</span>
			<input type="checkbox" id="privileged-stream">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Online Suggestions</span>
			<input type="checkbox" id="online-suggestions">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Number of offline suggestions</span>
			<input id="number-of-suggestions"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Host that is pinged to test Internet Connection. "localhost" to force online, leave empty to force offline.</span>
			<input id="connectivity-host"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Internet Connection</span>
			<div>
				<input type="checkbox" id="has-internet">
				<i class="fas fa-sync" id="check-internet"></i>
			</div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Update User Count</span>
			<div>
				<i class="fas fa-sync" id="update-user-count"></i>
			</div>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Queue Control</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">New music only</span>
			<input type="checkbox" id="new-music-only">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Add new songs to the top of the queue instead of to the bottom</span>
			<input type="checkbox" id="enqueue-first">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Song cooldown (Minimum time before a song can be queued again. Requires logging. In hours, 0 to disable)</span>
			<input id="song-cooldown"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Max download size (MB, 0 to disable)</span>
			<input id="max-download-size"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Max songs enqueued per playlist</span>
			<input id="max-playlist-items"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Max number of songs in queue (0 to disable)</span>
			<input id="max-queue-length"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Add this to every query</span>
			<input id="additional-keywords"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Do not enqueue songs containing these words (only Spotify and Soundcloud)</span>
			<input id="forbidden-keywords"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="delete-current-song">Delete Current Song</button>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Party</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">People to Party</span>
			<input id="people-to-party"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Alarm Probability after each song (from 0 to 1)</span>
			<input id="alarm-probability"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Minimum time between buzzers (in seconds)</span>
			<input id="buzzer-cooldown"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Buzzer success probability. (0 to 1, <0 for default sound)</span>
			<input id="buzzer-success-probability"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="trigger-alarm">Trigger Alarm</button>
		</li>
	</ul>

	<ul class="list-group youtube-functionality">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Youtube</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Enabled</span>
			<input type="checkbox" id="youtube-enabled">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Number of online suggestions</span>
			<input id="youtube-suggestions"/>
		</li>
	</ul>

	<ul class="list-group spotify-functionality">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Spotify</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Enabled</span>
			<input type="checkbox" id="spotify-enabled">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Number of online suggestions</span>
			<input id="spotify-suggestions"/>
		</li>
		<li class="list-group-item list-item">
			Info on how to get credentials
			<a href="https://github.com/raveberry/raveberry/blob/master/docs/spotify.md" target="_blank" rel="noopener">Readme</a>
		</li>
		<li class="list-group-item list-item">
			<b>Credentials for device playback</b>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Client ID</span>
			<input id="spotify-device-client-id"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Client Secret</span>
			<input id="spotify-device-client-secret"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Redirect Uri</span>
			<input id="spotify-redirect-uri"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Open this:</span>
			<div id="spotify-authorize-url"></div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Auth Url</span>
			<input id="spotify-authorized-url"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="set-spotify-device-credentials">Set Credentials</button>
		</li>
		<li class="list-group-item list-item">
			<b>Credentials for local playback</b>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Username</span>
			<input id="spotify-username"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Password</span>
			<input id="spotify-password"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Client ID</span>
			<input id="spotify-mopidy-client-id"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Client Secret</span>
			<input id="spotify-mopidy-client-secret"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="set-spotify-mopidy-credentials">Set Credentials</button>
		</li>
	</ul>

	<ul class="list-group soundcloud-functionality">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Soundcloud</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Enabled</span>
			<input type="checkbox" id="soundcloud-enabled">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Number of online suggestions</span>
			<input id="soundcloud-suggestions"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">
				Authentication Token
				<a href="https://mopidy.com/ext/soundcloud/#authentication" data-toggle="tooltip" target="_blank" rel="noopener" title="Click here to get the credentials">
					<i class="fas fa-question-circle"></i>
				</a>
			</span>
			<input type="password" id="soundcloud-auth-token"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="set-soundcloud-credentials">Set Credentials</button>
		</li>
	</ul>

	<ul class="list-group jamendo-functionality">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Jamendo</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Enabled</span>
			<input type="checkbox" id="jamendo-enabled">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Number of online suggestions</span>
			<input id="jamendo-suggestions"/>
		</li>
		<li class="list-group-item list-item">
		<span class="description">
			Client ID
			<a href="https://devportal.jamendo.com/admin/applications" data-toggle="tooltip" target="_blank" rel="noopener" title="Click here to get a client id">
				<i class="fas fa-question-circle"></i>
			</a>
		</span>
			<input id="jamendo-client-id"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="set-jamendo-credentials">Set Credentials</button>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Backup Stream</span>
		</li>
		<li class="list-group-item list-item">
			Set an internet stream to be played when no other song is enqueued. Set empty to disable.
		</li>
		<li class="list-group-item list-item">
			<span class="description">Stream URL</span>
			<input id="backup-stream"/>
		</li>
	</ul>

	<ul class="list-group install-only">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Bluetooth</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Scanning</span>
			<input type="checkbox" id="bluetooth-scanning" autocomplete="off"/>
		</li>
		<!--
		<li class="list-group-item list-item">
			<label for="bluetooth-device-1">Device 1</label>
			<input type="radio" name="bluetooth-device" id="12:34:56:78:9A:BD"/>
		</li>
		-->
		<li class="list-group-item list-item">
			<button class="btn" id="disconnect-bluetooth">Disconnect</button>
			<button class="btn" id="connect-bluetooth">Connect</button>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Sound Output</span>
		</li>
		<li class="list-group-item list-item install-only">
			<span class="description">Duplicate audio into visualization if available</span>
			<input type="checkbox" id="feed-cava">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Output</span>
			<select class="form-control" id="output">
			</select>
		</li>
		<li class="list-group-item list-item">
			Make sure to disable all other platforms when choosing a Spotify device for playback.
		</li>
		<li class="list-group-item list-item">
			<span class="description">Player status (restarting player/server might fix errors)</span>
			<span id="player-status"></span>
		</li>
		<li class="list-group-item list-item centered install-only">
			<button class="btn" id="restart-player">Restart Player</button>
		</li>
	</ul>

	<ul class="list-group install-only">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Wifi</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">SSID</span>
			<input id="wifi-ssid"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Password</span>
			<input type="password" id="wifi-password"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="connect-to-wifi">Connect to Wifi</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Home Wifi Enabled:</span>
			<div id="homewifi-enabled"></div>
		</li>
		<li class="list-group-item list-item">
			<button class="btn" id="disable-homewifi">Disable Home Wifi</button>
			<button class="btn" id="enable-homewifi">Enable Home Wifi</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Home Wifi SSID</span>
			<input id="homewifi-ssid"/>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Local Library</span>
		</li>
		<li class="list-group-item list-item">
			Note: There can only be one library folder. Make sure that all local music you want to import is inside the given directory. If you change the folder, music from previous libraries will become unavailable. Check your permissions if it doesn't work.
		</li>
		<li class="list-group-item list-item">
			<span class="description">Files Found / Files Processed / Files Added</span>
			<span id="scan-progress">0 / 0 / 0</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Local Library Absolute Path</span>
			<input id="library-path" value="{{ local_library }}" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="scan-library">Scan Folder</button>
		</li>
		<li class="list-group-item list-item">
			You can also automatically create a playlist for each folder after scanning a library. Wait until the library scan completed!
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="create-playlists">Create Playlists</button>
		</li>
	</ul>

	<ul class="list-group" id="settings">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Analysis</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Start Date</span>
			<input type="date" id="startdate" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Start Time</span>
			<input type="time" id="starttime" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">End Date</span>
			<input type="date" id="enddate" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item">
			<span class="description">End Time</span>
			<input type="time" id="endtime" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="analyse">Analyse</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Songs Played</span>
			<div id="songs-played"></div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Most Played Song</span>
			<div id="most-played-song"></div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Votes Cast</span>
			<div id="votes-cast"></div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Highest Voted Song</span>
			<div id="highest-voted-song"></div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Most Active Device</span>
		</li>
		<li class="list-group-item list-item" id="most-active-device">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Request Activity</span>
		</li>
		<li class="list-group-item list-item" id="request-activity">
		</li>
		<li class="list-group-item list-item">
			<span class="description">Playlist</span>
		</li>
		<li class="list-group-item list-item" id="playlist">
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="copy-playlist">Copy</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Playlist Name</span>
			<input id="saved-playlist-name" autocomplete="off"/>
		</li>
		<li class="list-group-item list-item centered">
			<button class="btn" id="save-as-playlist">Save as Playlist</button>
		</li>
	</ul>

	<ul class="list-group install-only">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>System</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Hotspot Enabled (without considering homewifi):</span>
			<div id="hotspot-enabled"></div>
		</li>
		<li class="list-group-item list-item hotspot-functionality">
			<button class="btn" id="disable-hotspot">Disable Hotspot</button>
			<button class="btn" id="enable-hotspot">Enable Hotspot</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Wifi Protected:</span>
			<div id="wifi-protection-enabled"></div>
		</li>
		<li class="list-group-item list-item hotspot-functionality">
			<button class="btn" id="disable-wifi-protection">Unprotect Wifi</button>
			<button class="btn" id="enable-wifi-protection">Protect Wifi</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Tunneling Enabled:</span>
			<div id="tunneling-enabled"></div>
		</li>
		<li class="list-group-item list-item hotspot-functionality">
			<button class="btn" id="disable-tunneling">Disable Tunneling</button>
			<button class="btn" id="enable-tunneling">Enable Tunneling</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Remote Enabled:</span>
			<div id="remote-enabled"></div>
		</li>
		<li class="list-group-item list-item remote-functionality">
			<button class="btn" id="disable-remote">Disable Remote</button>
			<button class="btn" id="enable-remote">Enable Remote</button>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Task Strategy:</span>
			<div id="task-strategy"></div>
		</li>
		<li class="list-group-item list-item">
			Celery is slightly slower during startup and requires more RAM, but faster when running.
			Choose Threads if you restart your server often or are on a weak system (e.g. Pi Zero).
			Changing strategy restarts the server.
		</li>
		<li class="list-group-item list-item">
			<button class="btn" id="disable-celery">Use Threads</button>
			<button class="btn" id="enable-celery">Use Celery</button>
		</li>
	</ul>
	<ul class="list-group install-only">
		<li class="list-group-item list-header">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>Power</span>
		</li>
		<li class="list-group-item list-item">
			<button class="btn" id="restart-server">Restart Server</button>
			<button class="btn" id="kill-workers">Kill Workers</button>
		</li>
		<li class="list-group-item list-item">
			<button class="btn" id="reboot-system">Reboot System</button>
			<button class="btn" id="shutdown-system">Shutdown System</button>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item list-header" id="about">
			<i class="fas fa-angle-down settings-collapser collapsed"></i>
			<span>About</span>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Raveberry Version</span>
			<div>{{ version }}</div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Latest Version</span>
			<div>
				<span id="latest-version">unknown</span>
				<i class="fas fa-sync" id="get-latest-version"></i>
			</div>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Update Information Policy</span>
			<select id="update-information-policy">
				<option value="yes">Remind me</option>
				<option value="no">Don't remind me</option>
			</select>
		</li>
		<li class="list-group-item list-item">
			<span class="description">Changelog</span>
			<button class="btn" id="open-changelog">Show</button>
		</li>
		<li class="list-group-item list-item install-only">
			<span class="description">Upgrade Raveberry</span>
			<button class="btn" id="open-upgrade-dialog">Upgrade</button>
		</li>
	</ul>

	<div id="changelog-modal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div id="changelog">
					Fetching changelog...
				</div>
				<button class="btn" id="changelog-ok">Ok</button>
			</div>
		</div>
	</div>

	<div id="upgrade-modal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div>
					Are you sure that you want to upgrade? <br/>
					If this config contains an old database backup, <br/>
					your data <strong>will be lost</strong>! <br/>
					(using the config from your install directory)
				</div>
				<div id="upgrade-config">
					Fetching config...
				</div>
				<button class="btn" id="confirm-upgrade">Yes, I'm sure</button>
			</div>
		</div>
	</div>
</div>

{% endblock %}
