<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OnTheSpot - Settings</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
        <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
        <script src="{{ url_for('static', filename='utils.js') }}" defer></script>
    </head>
    <body>
        <div class="header">
            <ul>
                <li class="hide-on-mobile"><a href="https://github.com/justin025/onthespot/" target="_blank">OnTheSpot</a></li>
                <li><a href="/search">Search</a></li>
                <li><a href="/download_queue">Downloads</a></li>
                <li><a class="active" href="/settings">Settings</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </div>

        <br>
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
            <div style="display: flex; align-items: center;">
                <h2>Account Pool</h2>
            </div>

            <div style="display: flex; align-items: center;">
                {% if config.use_webui_login%}
                <button class="download-action-button"  onclick="window.location.href='/api/logout';">
                    <img src="/icons/leave.png" loading="lazy" style="width: 20px; height: 20px;">
                </button>
                {% endif %}
                <button class="download-action-button"  onclick="updateSettings(returnSettingsData())">
                    <img src="/icons/save.png" loading="lazy" style="width: 20px; height: 20px;">
                </button>
            </div>
        </div>

        <form>
            <table>
                <thead>
                    <tr>
                        <th>Active</th>
                        <th style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Username</th>
                        <th>Service</th>
                        <th class="hide-on-mobile">Account Type</th>
                        <th>Max Resolution</th>
                        <th>Status</th>
                        <th class="hide-on-mobile">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for account in account_pool %}
                    <tr>
                        <td style="width: 10px">
                            <label>
                                <input type="radio" name="active_account_number" value="{{ loop.index - 1 }}" onclick="updateSettings(returnSettingsData())"
                                {% if loop.index - 1 == config.active_account_number %} checked {% endif %}>
                            </label>
                        </td>
                        <td style="max-width: 10px; overflow: hidden; text-overflow: ellipsis;">{{ account.username }}{% if account.username|length > 20 %}...{% endif %}</td>
                        <td>
                            <img src="/icons/{{ account.service }}.png" loading="lazy" style="width: 20px; height: 20px; margin-right: 5px;">
                            <span class="hide-on-mobile">{{ account.service.replace('_', ' ').title() }}</span>
                        </td>
                        <td class="hide-on-mobile">{{ account.account_type|capitalize }}</td>
                        <td>{{ account.bitrate }}</td>
                        <td>{{ account.status|capitalize }}</td>
                        <td class="hide-on-mobile">
                            <button value="{{ account.uuid }}" class="download-action-button" onclick="removeAccount(this.value)">
                                <img src="/icons/trash.png" loading="lazy">
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>

        <div style="display: flex; align-items: center; margin-top: 20px;">
            <select id="login_services" style="width: auto;" onchange="handleServiceChange()" class="hide-on-mobile">
                <option value="" disabled>Audio:</option>
                <option value="apple_music">Apple Music</option>
                <option value="bandcamp">Bandcamp</option>
                <option value="deezer">Deezer</option>
                <option value="qobuz" selected>Qobuz</option>
                <option value="soundcloud">Soundcloud</option>
                <option value="spotify">Spotify</option>
                <option value="tidal">Tidal</option>
                <option value="youtube_music">Youtube Music</option>
                <option value="" disabled></option>
                <option value="" disabled>Video:</option>
                <option value="crunchyroll">Crunchyroll</option>
                <option value="generic">Generic</option>
            </select>
            <input type="text" id="login_username" placeholder="Enter your email" class="hide-on-mobile">
            <input type="text" id="login_password" placeholder="Enter your password" class="hide-on-mobile">
            <button id="login_button" type="button" onclick="addAccount()" class="hide-on-mobile">Add Account</button>
            <p id="login_notice" class="hide-on-mobile"></p>
        </div>
        <br class="hide-on-mobile">

        <form id="settings-form">

            <h2>Web UIs</h2>
            <table>
                <tr>
                    <td style="width: 50%;">
                        <label for="use_webui_login">Enable Web UI Login Page:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="checkbox" class="sliding_button" id="use_webui_login" {% if config.use_webui_login %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="webui_username">Web UI Username:</label>
                    </td>
                    <td>
                        <input type="text" id="webui_username" value="{{ config.webui_username }}" placeholder="Enter your username">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="webui_password">Web UI Password:</label>
                    </td>
                    <td>
                        <input type="password" id="webui_password" value="{{ config.webui_password }}" placeholder="Enter your password">
                    </td>
                </tr>
            </table>

            <h2>General</h2>

            <table style="width: 100%;">
                <tr>
                    <td style="width: 50%;">
                        <label for="explicit_label">Explicit Label:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="text" id="explicit_label" value="{{ config.explicit_label }}" placeholder="Enter explicit label">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_copy_btn">Add Copy Button to Downloads:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_copy_btn" {% if config.download_copy_btn %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_open_btn">Add Open Button to Downloads:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_open_btn" {% if config.download_open_btn %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_locate_btn">Add Locate Button to Downloads:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_locate_btn" {% if config.download_locate_btn %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_delete_btn">Add Delete Button to Downloads:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_delete_btn" {% if config.download_delete_btn %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="show_search_thumbnails">Show Thumbnails in Search View:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="show_search_thumbnails" {% if config.show_search_thumbnails %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="show_download_thumbnails">Show Thumbnails in Download View:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="show_download_thumbnails" {% if config.show_download_thumbnails %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="thumbnail_size">Thumbnail Size (px):</label>
                    </td>
                    <td>
                        <input type="number" id="thumbnail_size" value="{{ config.thumbnail_size }}" placeholder="Enter thumbnail size">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="max_search_results">Max Search Results:</label>
                    </td>
                    <td>
                        <input type="number" id="max_search_results" value="{{ config.max_search_results }}" placeholder="Enter max search results">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="disable_download_popups">Hide Download Popups:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="disable_download_popups" {% if config.disable_download_popups %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="windows_10_explorer_thumbnails">Use Old ID3 Format for Windows 10 Explorer:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="windows_10_explorer_thumbnails" {% if config.windows_10_explorer_thumbnails %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="mirror_spotify_playback">Mirror Spotify Playback:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="mirror_spotify_playback" {% if config.mirror_spotify_playback %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="close_to_tray">Close Application to Tray:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="close_to_tray" {% if config.close_to_tray %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="check_for_updates">Check for Updates:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="check_for_updates" {% if config.check_for_updates %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="illegal_character_replacement">Illegal Character Replacement:</label>
                    </td>
                    <td>
                        <input type="text" id="illegal_character_replacement" value="{{ config.illegal_character_replacement }}" placeholder="Enter character for replacement">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="raw_media_download">Skip Media Conversion:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="raw_media_download" {% if config.raw_media_download %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="rotate_active_account_number">Rotate Active Account:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="rotate_active_account_number" {% if config.rotate_active_account_number %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_delay">Download Delay (seconds):</label>
                    </td>
                    <td>
                        <input type="number" id="download_delay" value="{{ config.download_delay }}" placeholder="Enter download delay">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_chunk_size">Download Chunk Size (bytes):</label>
                    </td>
                    <td>
                        <input type="number" id="download_chunk_size" value="{{ config.download_chunk_size }}" placeholder="Enter chunk size">
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <label for="maximum_queue_workers">Maximum Queue Workers:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="number" id="maximum_queue_workers" value="{{ config.maximum_queue_workers }}" placeholder="Enter max queue workers">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="maximum_download_workers">Maximum Download Workers:</label>
                    </td>
                    <td>
                        <input type="number" id="maximum_download_workers" value="{{ config.maximum_download_workers }}" placeholder="Enter max download workers">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="enable_retry_worker">Enable Retry Worker:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="enable_retry_worker" {% if config.enable_retry_worker %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="retry_worker_delay">Retry Worker Delay (minutes):</label>
                    </td>
                    <td>
                        <input type="number" id="retry_worker_delay" value="{{ config.retry_worker_delay }}" placeholder="Enter retry delay">
                    </td>
                </tr>
            </table>

            <h2>Audio Downloads</h2>

            <table>
                <tr>
                    <td style="width: 50%;">
                        <label for="audio_download_path">Audio Download Path:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="text" id="audio_download_path" value="{{ config.audio_download_path }}" placeholder="Enter audio download path">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="track_file_format">Track File Format:</label>
                    </td>
                    <td>
                        <input type="text" id="track_file_format" value="{{ config.track_file_format }}" placeholder="Enter track file format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="track_path_formatter">Track Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="track_path_formatter" value="{{ config.track_path_formatter }}" placeholder="Enter track path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="podcast_file_format">Podcast File Format:</label>
                    </td>
                    <td>
                        <input type="text" id="podcast_file_format" value="{{ config.podcast_file_format }}" placeholder="Enter podcast file format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="podcast_path_formatter">Podcast Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="podcast_path_formatter" value="{{ config.podcast_path_formatter }}" placeholder="Enter podcast path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="use_playlist_path">Use Playlist Path:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="use_playlist_path" {% if config.use_playlist_path %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="playlist_path_formatter">Playlist Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="playlist_path_formatter" value="{{ config.playlist_path_formatter }}" placeholder="Enter playlist path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="create_m3u_file">Create M3U File:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="create_m3u_file" {% if config.create_m3u_file %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="m3u_path_formatter">M3U Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="m3u_path_formatter" value="{{ config.m3u_path_formatter }}" placeholder="Enter M3U path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="extinf_separator">EXTINF Separator:</label>
                    </td>
                    <td>
                        <input type="text" id="extinf_separator" value="{{ config.extinf_separator }}" placeholder="Enter EXTINF metadata separator">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="extinf_label">EXTINF Label:</label>
                    </td>
                    <td>
                        <input type="text" id="extinf_label" value="{{ config.extinf_label }}" placeholder="Enter EXTINF label format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="save_album_cover">Save Album Cover:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="save_album_cover" {% if config.save_album_cover %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="album_cover_format">Album Cover Format:</label>
                    </td>
                    <td>
                        <input type="text" id="album_cover_format" value="{{ config.album_cover_format }}" placeholder="Enter album cover format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="file_bitrate">File Bitrate:</label>
                    </td>
                    <td>
                        <input type="text" id="file_bitrate" value="{{ config.file_bitrate }}" placeholder="Enter file bitrate">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="file_hertz">File Hertz:</label>
                    </td>
                    <td>
                        <input type="number" id="file_hertz" value="{{ config.file_hertz }}" placeholder="Enter file hertz">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="use_custom_file_bitrate">Use Custom File Bitrate:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="use_custom_file_bitrate" {% if config.use_custom_file_bitrate %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_lyrics">Enable Lyrics Download:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_lyrics" {% if config.download_lyrics %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="only_download_synced_lyrics">Only Download Synced Lyrics:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="only_download_synced_lyrics" {% if config.only_download_synced_lyrics %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="only_download_plain_lyrics">Only Download Plain Lyrics:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="only_download_plain_lyrics" {% if config.only_download_plain_lyrics %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="save_lrc_file">Save LRC File:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="save_lrc_file" {% if config.save_lrc_file %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <label for="translate_file_path">Translate File Path:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="checkbox" class="sliding_button" id="translate_file_path" {% if config.translate_file_path %}checked{% endif %}>
                    </td>
                </tr>
            </table>

            <h2>Audio Metadata</h2>

            <table>
                <tr>
                    <td style="width: 50%;">
                        <label for="metadata_separator">Metadata Separator:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="text" id="metadata_separator" value="{{ config.metadata_separator }}" placeholder="Enter metadata separator">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="overwrite_existing_metadata">Overwrite Existing Metadata:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="overwrite_existing_metadata" {% if config.overwrite_existing_metadata %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_branding">Embed Branding:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_branding" {% if config.embed_branding %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_cover">Embed Cover:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_cover" {% if config.embed_cover %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_artist">Embed Artist:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_artist" {% if config.embed_artist %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_album">Embed Album:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_album" {% if config.embed_album %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_albumartist">Embed Album Artist:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_albumartist" {% if config.embed_albumartist %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_name">Embed Name:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_name" {% if config.embed_name %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_year">Embed Year:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_year" {% if config.embed_year %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_discnumber">Embed Disc Number:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_discnumber" {% if config.embed_discnumber %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_tracknumber">Embed Track Number:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_tracknumber" {% if config.embed_tracknumber %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_genre">Embed Genre:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_genre" {% if config.embed_genre %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_performers">Embed Performers:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_performers" {% if config.embed_performers %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_producers">Embed Producers:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_producers" {% if config.embed_producers %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_writers">Embed Writers:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_writers" {% if config.embed_writers %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_label">Embed Label:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_label" {% if config.embed_label %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_copyright">Embed Copyright:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_copyright" {% if config.embed_copyright %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_description">Embed Description:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_description" {% if config.embed_description %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_language">Embed Language:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_language" {% if config.embed_language %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_isrc">Embed ISRC:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_isrc" {% if config.embed_isrc %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_length">Embed Length:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_length" {% if config.embed_length %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_url">Embed URL:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_url" {% if config.embed_url %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_key">Embed Key:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_key" {% if config.embed_key %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;">
                        <label for="embed_bpm">Embed BPM:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="checkbox" class="sliding_button" id="embed_bpm" {% if config.embed_bpm %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_compilation">Embed Compilation:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_compilation" {% if config.embed_compilation %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_lyrics">Embed Lyrics:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_lyrics" {% if config.embed_lyrics %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_explicit">Embed Explicit:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_explicit" {% if config.embed_explicit %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_upc">Embed UPC:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_upc" {% if config.embed_upc %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_service_id">Embed Service ID:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_service_id" {% if config.embed_service_id %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_timesignature">Embed Time Signature:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_timesignature" {% if config.embed_timesignature %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_acousticness">Embed Acousticness:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_acousticness" {% if config.embed_acousticness %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_danceability">Embed Danceability:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_danceability" {% if config.embed_danceability %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_energy">Embed Energy:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_energy" {% if config.embed_energy %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_instrumentalness">Embed Instrumentalness:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_instrumentalness" {% if config.embed_instrumentalness %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_liveness">Embed Liveness:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_liveness" {% if config.embed_liveness %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_loudness">Embed Loudness:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_loudness" {% if config.embed_loudness %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_speechiness">Embed Speechiness:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_speechiness" {% if config.embed_speechiness %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="embed_valence">Embed Valence:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="embed_valence" {% if config.embed_valence %}checked{% endif %}>
                    </td>
                </tr>
            </table>

            <h2>Video Downloads</h2>
            <table>
                <tr>
                    <td style="width: 50%;">
                        <label for="video_download_path">Video Download Path:</label>
                    </td>
                    <td style="width: 50%;">
                        <input type="text" id="video_download_path" value="{{ config.video_download_path }}" placeholder="Enter video download path">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="movie_file_format">Movie File Format:</label>
                    </td>
                    <td>
                        <input type="text" id="movie_file_format" value="{{ config.movie_file_format }}" placeholder="Enter movie file format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="movie_path_formatter">Movie Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="movie_path_formatter" value="{{ config.movie_path_formatter }}" placeholder="Enter movie path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="show_file_format">Show File Format:</label>
                    </td>
                    <td>
                        <input type="text" id="show_file_format" value="{{ config.show_file_format }}" placeholder="Enter show file format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="show_path_formatter">Show Path Formatter:</label>
                    </td>
                    <td>
                        <input type="text" id="show_path_formatter" value="{{ config.show_path_formatter }}" placeholder="Enter show path format">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="preferred_video_resolution">Preferred Video Resolution:</label>
                    </td>
                    <td>
                        <input type="number" id="preferred_video_resolution" value="{{ config.preferred_video_resolution }}" placeholder="Enter max video resolution">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_subtitles">Download Subtitles:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_subtitles" {% if config.download_subtitles %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="preferred_audio_language">Preferred Audio Language:</label>
                    </td>
                    <td>
                        <input type="text" id="preferred_audio_language" value="{{ config.preferred_audio_language }}" placeholder="Enter preferred audio language">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="preferred_subtitle_language">Preferred Subtitle Language:</label>
                    </td>
                    <td>
                        <input type="text" id="preferred_subtitle_language" value="{{ config.preferred_subtitle_language }}" placeholder="Enter preferred subtitle language">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_all_available_audio">Download All Available Audio:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_all_available_audio" {% if config.download_all_available_audio %}checked{% endif %}>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="download_all_available_subtitles">Download All Available Subtitles:</label>
                    </td>
                    <td>
                        <input type="checkbox" class="sliding_button" id="download_all_available_subtitles" {% if config.download_all_available_subtitles %}checked{% endif %}>
                    </td>
                </tr>
            </table>
        </form>

        <script>
            function returnSettingsData() {
                const activeAccountNumber = document.querySelector('input[name="active_account_number"]:checked')
                    ? document.querySelector('input[name="active_account_number"]:checked').value
                    : '';

                const settingsData = {
                    // Account Settings
                    active_account_number: activeAccountNumber,
                    // Web UI Settings
                    use_webui_login: document.getElementById('use_webui_login').checked,
                    webui_username: document.getElementById('webui_username').value,
                    webui_password: document.getElementById('webui_password').value,
                    // General Settings
                    explicit_label: document.getElementById('explicit_label').value,
                    download_copy_btn: document.getElementById('download_copy_btn').checked,
                    download_open_btn: document.getElementById('download_open_btn').checked,
                    download_locate_btn: document.getElementById('download_locate_btn').checked,
                    download_delete_btn: document.getElementById('download_delete_btn').checked,
                    show_search_thumbnails: document.getElementById('show_search_thumbnails').checked,
                    show_download_thumbnails: document.getElementById('show_download_thumbnails').checked,
                    thumbnail_size: document.getElementById('thumbnail_size').value,
                    max_search_results: document.getElementById('max_search_results').value,
                    disable_download_popups: document.getElementById('disable_download_popups').checked,
                    windows_10_explorer_thumbnails: document.getElementById('windows_10_explorer_thumbnails').checked,
                    mirror_spotify_playback: document.getElementById('mirror_spotify_playback').checked,
                    close_to_tray: document.getElementById('close_to_tray').checked,
                    check_for_updates: document.getElementById('check_for_updates').checked,
                    illegal_character_replacement: document.getElementById('illegal_character_replacement').value,
                    raw_media_download: document.getElementById('raw_media_download').checked,
                    rotate_active_account_number: document.getElementById('rotate_active_account_number').checked,
                    download_delay: document.getElementById('download_delay').value,
                    download_chunk_size: document.getElementById('download_chunk_size').value,
                    maximum_queue_workers: document.getElementById('maximum_queue_workers').value,
                    maximum_download_workers: document.getElementById('maximum_download_workers').value,
                    enable_retry_worker: document.getElementById('enable_retry_worker').checked,
                    retry_worker_delay: document.getElementById('retry_worker_delay').value,
                    // Audio Download Settings
                    audio_download_path: document.getElementById('audio_download_path').value,
                    track_file_format: document.getElementById('track_file_format').value,
                    track_path_formatter: document.getElementById('track_path_formatter').value,
                    podcast_file_format: document.getElementById('podcast_file_format').value,
                    podcast_path_formatter: document.getElementById('podcast_path_formatter').value,
                    use_playlist_path: document.getElementById('use_playlist_path').checked,
                    playlist_path_formatter: document.getElementById('playlist_path_formatter').value,
                    create_m3u_file: document.getElementById('create_m3u_file').checked,
                    m3u_path_formatter: document.getElementById('m3u_path_formatter').value,
                    extinf_separator: document.getElementById('extinf_separator').value,
                    extinf_label: document.getElementById('extinf_label').value,
                    save_album_cover: document.getElementById('save_album_cover').checked,
                    album_cover_format: document.getElementById('album_cover_format').value,
                    file_bitrate: document.getElementById('file_bitrate').value,
                    file_hertz: document.getElementById('file_hertz').value,
                    use_custom_file_bitrate: document.getElementById('use_custom_file_bitrate').checked,
                    download_lyrics: document.getElementById('download_lyrics').checked,
                    only_download_synced_lyrics: document.getElementById('only_download_synced_lyrics').checked,
                    only_download_plain_lyrics: document.getElementById('only_download_plain_lyrics').checked,
                    save_lrc_file: document.getElementById('save_lrc_file').checked,
                    translate_file_path: document.getElementById('translate_file_path').checked,
                    // Audio Metadata Settings
                    metadata_separator: document.getElementById('metadata_separator').value,
                    overwrite_existing_metadata: document.getElementById('overwrite_existing_metadata').checked,
                    embed_branding: document.getElementById('embed_branding').checked,
                    embed_cover: document.getElementById('embed_cover').checked,
                    embed_artist: document.getElementById('embed_artist').checked,
                    embed_album: document.getElementById('embed_album').checked,
                    embed_albumartist: document.getElementById('embed_albumartist').checked,
                    embed_name: document.getElementById('embed_name').checked,
                    embed_year: document.getElementById('embed_year').checked,
                    embed_discnumber: document.getElementById('embed_discnumber').checked,
                    embed_tracknumber: document.getElementById('embed_tracknumber').checked,
                    embed_genre: document.getElementById('embed_genre').checked,
                    embed_performers: document.getElementById('embed_performers').checked,
                    embed_producers: document.getElementById('embed_producers').checked,
                    embed_writers: document.getElementById('embed_writers').checked,
                    embed_label: document.getElementById('embed_label').checked,
                    embed_copyright: document.getElementById('embed_copyright').checked,
                    embed_description: document.getElementById('embed_description').checked,
                    embed_language: document.getElementById('embed_language').checked,
                    embed_isrc: document.getElementById('embed_isrc').checked,
                    embed_length: document.getElementById('embed_length').checked,
                    embed_url: document.getElementById('embed_url').checked,
                    embed_key: document.getElementById('embed_key').checked,
                    embed_bpm: document.getElementById('embed_bpm').checked,
                    embed_compilation: document.getElementById('embed_compilation').checked,
                    embed_lyrics: document.getElementById('embed_lyrics').checked,
                    embed_explicit: document.getElementById('embed_explicit').checked,
                    embed_upc: document.getElementById('embed_upc').checked,
                    embed_service_id: document.getElementById('embed_service_id').checked,
                    embed_timesignature: document.getElementById('embed_timesignature').checked,
                    embed_acousticness: document.getElementById('embed_acousticness').checked,
                    embed_danceability: document.getElementById('embed_danceability').checked,
                    embed_energy: document.getElementById('embed_energy').checked,
                    embed_instrumentalness: document.getElementById('embed_instrumentalness').checked,
                    embed_liveness: document.getElementById('embed_liveness').checked,
                    embed_loudness: document.getElementById('embed_loudness').checked,
                    embed_speechiness: document.getElementById('embed_speechiness').checked,
                    embed_valence: document.getElementById('embed_valence').checked,
                    // Video Download Settings
                    video_download_path: document.getElementById('video_download_path').value,
                    movie_file_format: document.getElementById('movie_file_format').value,
                    movie_path_formatter: document.getElementById('movie_path_formatter').value,
                    show_file_format: document.getElementById('show_file_format').value,
                    show_path_formatter: document.getElementById('show_path_formatter').value,
                    preferred_video_resolution: document.getElementById('preferred_video_resolution').value,
                    download_subtitles: document.getElementById('download_subtitles').checked,
                    preferred_audio_language: document.getElementById('preferred_audio_language').value,
                    preferred_subtitle_language: document.getElementById('preferred_subtitle_language').value,
                    download_all_available_audio: document.getElementById('download_all_available_audio').checked,
                    download_all_available_subtitles: document.getElementById('download_all_available_subtitles').checked,
                };
                return settingsData
            }

            function handleServiceChange() {

                const loginServices = document.getElementById('login_services');
                const loginUsername = document.getElementById('login_username');
                const loginPassword = document.getElementById('login_password');
                const loginButton = document.getElementById('login_button');
                const loginNotice = document.getElementById('login_notice');

                if (loginServices.value === 'apple_music') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'block';
                    loginPassword.placeholder = 'Enter your user-media-token';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'bandcamp') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Public Bandcamp Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'deezer') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'block';
                    loginPassword.placeholder = 'Enter your arl';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'qobuz') {
                    loginUsername.style.display = 'block';
                    loginUsername.placeholder = 'Enter your email';
                    loginPassword.style.display = 'block';
                    loginPassword.placeholder = 'Enter your password';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'soundcloud') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'block';
                    loginPassword.placeholder = 'Enter your oauth-token';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'spotify') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'none'
                    loginNotice.style.display = 'block';
                    loginNotice.textContent = 'Logins for this service are not currently supported, please login through the desktop app and modify your config accordingly.';
                }
                else if (loginServices.value === 'tidal') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'none'
                    loginNotice.style.display = 'block';
                    loginNotice.textContent = 'Logins for this service are not currently supported, please login through the desktop app and modify your config accordingly.';
                }
                else if (loginServices.value === 'youtube_music') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Public Youtube Music Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'crunchyroll') {
                    loginUsername.style.display = 'block';
                    loginUsername.placeholder = 'Enter your email';
                    loginPassword.style.display = 'block';
                    loginPassword.placeholder = 'Enter your password';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Account'
                    loginNotice.style.display = 'none';
                }
                else if (loginServices.value === 'generic') {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'block'
                    loginButton.textContent = 'Add Generic Account'
                    loginNotice.style.display = 'none';
                }
                else {
                    loginUsername.style.display = 'none';
                    loginPassword.style.display = 'none';
                    loginButton.style.display = 'none'
                    loginNotice.style.display = 'none'
                }
            }

            function addAccount() {
                const selectedService = document.getElementById('login_services').value;
                const loginUsername = document.getElementById('login_username').value;
                const loginPassword = document.getElementById('login_password').value;

                const data = {
                    username: loginUsername,
                    password: loginPassword,
                    service: selectedService
                };

                // Post the data to the endpoint
                fetch('/api/add_account', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                    alert('Account added successfully! Please restart the app.');
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            }
            function removeAccount(accountId) {
                fetch(`/api/remove_account/${accountId}`, {
                    method: 'DELETE'
                })
                .then(response => {
                    if (response.ok) {
                        alert('Account removed successfully! Please restart the app.');
                    }
                })
            }
        </script>
    </body>
</html>
