{% 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 %}
	};
{% endblock %}

{% block content %}
<ul class="list-group" id="settings">
	<li class="list-group-item list-header">
		Settings
	</li>
	<li class="list-group-item list-item">
		<span class="description">Voting</span>
		<input type="checkbox" id="voting-enabled">
	</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">Logging</span>
		<input type="checkbox" id="logging-enabled">
	</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">Show new hashtags by default</span>
		<input type="checkbox" id="hashtags-active">
	</li>
	<li class="list-group-item list-item">
		<span class="description">Embed stream</span>
		<input type="checkbox" id="embed-stream">
	</li>
	<li class="list-group-item list-item">
		<span class="description">Clients stream songs directly instead of using /stream (currently only Jamendo)</span>
		<input type="checkbox" id="dynamic-embedded-stream">
	</li>
    <li class="list-group-item list-item">
        <span class="description">Number of suggestions</span>
        <input id="number-of-suggestions"/>
    </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 (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 centered">
		<button class="btn" id="trigger-alarm">Trigger Alarm</button>
	</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">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">
		<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 youtube-functionality">
    <li class="list-group-item list-header">
        Youtube
    </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">
		Spotify
	</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">
		<span class="description">Username</span>
		<input id="spotify-username"/>
	</li>
	<li class="list-group-item list-item">
		<span class="description">Password</span>
		<input type="password" id="spotify-password"/>
	</li>
	<li class="list-group-item list-item">
		<span class="description">
            Client ID
            <a href="https://mopidy.com/ext/spotify/#authentication" data-toggle="tooltip" target="_blank" title="Click here to get the credentials">
                <i class="fas fa-question-circle"></i>
            </a>
		</span>
		<input id="spotify-client-id"/>
	</li>
	<li class="list-group-item list-item">
		<span class="description">Client Secret</span>
		<input type="password" id="spotify-client-secret"/>
	</li>
	<li class="list-group-item list-item centered">
		<button class="btn" id="set-spotify-credentials">Set Credentials</button>
	</li>
</ul>

<ul class="list-group soundcloud-functionality">
    <li class="list-group-item list-header">
        Soundcloud
    </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" 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">
		Jamendo
	</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" 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">
		Backup Stream
	</li>
	<li class="list-group-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 system-install-only">
	<li class="list-group-item list-header">
		Bluetooth
	</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 system-install-only">
    <li class="list-group-item list-header">
        Sound Output
    </li>
	<li class="list-group-item list-item">
		<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>
        <input id="output"/>
    </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">
		<button class="btn" id="delete-current-song">Delete Current Song</button>
		<button class="btn" id="restart-player">Restart Player</button>
	</li>
</ul>

<ul class="list-group system-install-only">
	<li class="list-group-item list-header">
		Wifi
	</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">
		Local Library
	</li>
	<li class="list-group-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">
        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">
		Analysis
	</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 system-install-only hotspot-functionality">
	<li class="list-group-item list-item">
		<span class="description">Hotspot Enabled:</span>
		<div id="hotspot-enabled"></div>
	</li>
	<li class="list-group-item list-item">
		<button class="btn" id="disable-hotspot">Disable Hotspot</button>
		<button class="btn" id="enable-hotspot">Enable Hotspot</button>
	</li>
</ul>
<ul class="list-group system-install-only hotspot-functionality">
	<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">
		<button class="btn" id="disable-wifi-protection">Unprotect Wifi</button>
		<button class="btn" id="enable-wifi-protection">Protect Wifi</button>
	</li>
</ul>
<ul class="list-group system-install-only hotspot-functionality">
	<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">
		<button class="btn" id="disable-tunneling">Disable Tunneling</button>
		<button class="btn" id="enable-tunneling">Enable Tunneling</button>
	</li>
</ul>
<ul class="list-group system-install-only remote-functionality">
	<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">
		<button class="btn" id="disable-remote">Disable Remote</button>
		<button class="btn" id="enable-remote">Enable Remote</button>
	</li>
</ul>
<ul class="list-group system-install-only">
	<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">
        About
    </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 system-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>

{% endblock %}
