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

{% block scripts %}
<script>
	urls['state'] = '{% url 'settings_state' %}';
	urls['set_voting_system'] = '{% url 'set_voting_system' %}';
    urls['set_new_music_only'] = '{% url 'set_new_music_only' %}';
	urls['set_logging_enabled'] = '{% url 'set_logging_enabled' %}';
    urls['set_online_suggestions'] = '{% url 'set_online_suggestions' %}';
    urls['set_number_of_suggestions'] = '{% url 'set_number_of_suggestions' %}';
	urls['set_people_to_party'] = '{% url 'set_people_to_party' %}';
	urls['set_alarm_probability'] = '{% url 'set_alarm_probability' %}';
	urls['set_downvotes_to_kick'] = '{% url 'set_downvotes_to_kick' %}';
	urls['set_max_download_size'] = '{% url 'set_max_download_size' %}';
	urls['set_max_playlist_items'] = '{% url 'set_max_playlist_items' %}';
	urls['check_internet'] = '{% url 'check_internet' %}';
	urls['update_user_count'] = '{% url 'update_user_count' %}';

    urls['set_youtube_enabled'] = '{% url 'set_youtube_enabled' %}';
    urls['set_youtube_suggestions'] = '{% url 'set_youtube_suggestions' %}';

    urls['set_spotify_enabled'] = '{% url 'set_spotify_enabled' %}';
	urls['set_spotify_credentials'] = '{% url 'set_spotify_credentials' %}';
    urls['set_spotify_suggestions'] = '{% url 'set_spotify_suggestions' %}';

    urls['set_soundcloud_enabled'] = '{% url 'set_soundcloud_enabled' %}';
    urls['set_soundcloud_credentials'] = '{% url 'set_soundcloud_credentials' %}';
    urls['set_soundcloud_suggestions'] = '{% url 'set_soundcloud_suggestions' %}';

	urls['set_bluetooth_scanning'] = '{% url 'set_bluetooth_scanning' %}';
	urls['connect_bluetooth'] = '{% url 'connect_bluetooth' %}';
	urls['disconnect_bluetooth'] = '{% url 'disconnect_bluetooth' %}';

    urls['output_devices'] = '{% url 'output_devices' %}';
    urls['set_output_device'] = '{% url 'set_output_device' %}';

	urls['available_ssids'] = '{% url 'available_ssids' %}';
	urls['connect_to_wifi'] = '{% url 'connect_to_wifi' %}';
	urls['enable_homewifi'] = '{% url 'enable_homewifi' %}';
	urls['disable_homewifi'] = '{% url 'disable_homewifi' %}';
	urls['stored_ssids'] = '{% url 'stored_ssids' %}';
	urls['set_homewifi_ssid'] = '{% url 'set_homewifi_ssid' %}';

    urls['list_subdirectories'] = '{% url 'list_subdirectories' %}';
    urls['scan_library'] = '{% url 'scan_library' %}';
    urls['create_playlists'] = '{% url 'create_playlists' %}';

	urls['analyse'] = '{% url 'analyse' %}';

    urls['disable_streaming'] = '{% url 'disable_streaming' %}';
    urls['enable_streaming'] = '{% url 'enable_streaming' %}';
	urls['disable_events'] = '{% url 'disable_events' %}';
	urls['enable_events'] = '{% url 'enable_events' %}';
	urls['disable_hotspot'] = '{% url 'disable_hotspot' %}';
	urls['enable_hotspot'] = '{% url 'enable_hotspot' %}';
	urls['unprotect_wifi'] = '{% url 'unprotect_wifi' %}';
	urls['protect_wifi'] = '{% url 'protect_wifi' %}';
	urls['disable_tunneling'] = '{% url 'disable_tunneling' %}';
	urls['enable_tunneling'] = '{% url 'enable_tunneling' %}';
	urls['disable_remote'] = '{% url 'disable_remote' %}';
	urls['enable_remote'] = '{% url 'enable_remote' %}';
	urls['reboot_server'] = '{% url 'reboot_server' %}';
	urls['reboot_system'] = '{% url 'reboot_system' %}';
	urls['shutdown_system'] = '{% url 'shutdown_system' %}';

    urls['get_latest_version'] = '{% url 'get_latest_version' %}';
    urls['get_upgrade_config'] = '{% url 'get_upgrade_config' %}';
    urls['upgrade_raveberry'] = '{% url 'upgrade_raveberry' %}';
</script>
<script src="{% static "js/settings.js" %}"></script>
{% 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 System</span>
		<input type="checkbox" id="voting_system">
	</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">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">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">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">
        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">
	<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" rel="noopener noreferrer"
                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">
    <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" rel="noopener noreferrer"
               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 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">Output Device</span>
        <input id="output_device"/>
    </li>
    <li class="list-group-item list_item centered">
        <button class="btn" id="set_output_device">Set Output Device</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>
	<li class="list-group-item list_item centered">
		<button class="btn" id="set_homewifi_ssid">Set Home Wifi</button>
	</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>
</ul>

<ul class="list-group system-install-only">
    <li class="list-group-item list_item">
        <span class="description">Streaming Enabled:</span>
        <div id="streaming_enabled"></div>
    </li>
    <li class="list-group-item list_item">
        <button class="btn" id="disable_streaming">Disable Streaming</button>
        <button class="btn" id="enable_streaming">Enable Streaming</button>
    </li>
</ul>
<ul class="list-group system-install-only">
	<li class="list-group-item list_item">
		<span class="description">Events Enabled:</span>
		<div id="events_enabled"></div>
	</li>
	<li class="list-group-item list_item">
		<button class="btn" id="disable_events">Disable Events</button>
		<button class="btn" id="enable_events">Enable Events</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_protected"></div>
	</li>
	<li class="list-group-item list_item">
		<button class="btn" id="unprotect_wifi">Unprotect Wifi</button>
		<button class="btn" id="protect_wifi">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="reboot_server">Reboot Server</button>
		<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">
        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 system-install-only">
        <span class="description">Upgrade Raveberry</span>
        <button class="btn" id="open_upgrade_dialog">Upgrade</button>
    </li>
</ul>

<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 %}
