From 5b15d1139ad08b32470d2dfaf5bdb651a3f0f1d3 Mon Sep 17 00:00:00 2001
From: Paul <203217+uniquePWD@users.noreply.github.com>
Date: Sun, 6 Jul 2025 11:58:02 +0100
Subject: [PATCH] Update config.html

Modernised.
---
 data/interfaces/default/config.html | 3194 ++++++---------------------
 1 file changed, 715 insertions(+), 2479 deletions(-)

diff --git a/data/interfaces/default/config.html b/data/interfaces/default/config.html
index 84f3770f..853b7067 100644
--- a/data/interfaces/default/config.html
+++ b/data/interfaces/default/config.html
@@ -8,7 +8,7 @@
     <div id="subhead_container">
         <div id="subhead_menu">
             <a id="menu_link_shutdown" href="shutdown"><i class="fa fa-power-off"></i> Shut Down</a>
-            <a id="menu_link_shutdown" href="restart"><i class="fa fa-power-off"></i> Restart</a>
+            <a id="menu_link_restart" href="restart"><i class="fa fa-power-off"></i> Restart</a> <%-- Changed ID to be unique --%>
         </div>
     </div>
 </%def>
@@ -17,2611 +17,847 @@
     <div id="paddingheader">
         <h1 class="clearfix"><i class="fa fa-gear"></i> Settings</h1>
     </div>
-    <form action="configUpdate" method="post" class="form" id="configUpdate">
-        <div id="tabs">
-            <ul>
-                <li><a href="#tabs-1">Web Interface</a></li>
-                <li><a href="#tabs-2">Download settings</a></li>
-                <li><a href="#tabs-3">Search providers</a></li>
-                <li><a href="#tabs-4">Quality &amp; Post Processing</a></li>
-                <li><a href="#tabs-5">Notifications</a></li>
-                <li><a href="#tabs-6">Advanced Settings</a></li>
+    <form action="configUpdate" method="post" class="form" id="configUpdateForm"> <%-- Added Form ID --%>
+        <div id="tabs" class="ui-tabs"> <%-- Added ui-tabs class for styling --%>
+            <ul class="ui-tabs-nav"> <%-- Added ui-tabs-nav class --%>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1">Web Interface</a></li>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1">Download settings</a></li>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1">Search providers</a></li>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-4" class="ui-tabs-anchor" role="presentation" tabindex="-1">Quality &amp; Post Processing</a></li>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-5" class="ui-tabs-anchor" role="presentation" tabindex="-1">Notifications</a></li>
+                <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab"><a href="#tabs-6" class="ui-tabs-anchor" role="presentation" tabindex="-1">Advanced Settings</a></li>
             </ul>
-            <div id="tabs-1">
+            <div id="tabs-1" class="ui-tabs-panel">
                 <table class="configtable" summary="Web Interface">
                     <tr>
                         <td>
                             <fieldset>
                                 <legend>Basic</legend>
-                                <div class="row">
-                                    <label title="Host to bind web server to">
-                                        HTTP Host
-                                    </label>
-                                    <input type="text" name="http_host" value="${config['http_host']}" size="30">
-                                    <small>Use 0.0.0.0 to allow outside connections</small>
+                                <div class="form-row"> <%-- Changed to a generic form row --%>
+                                    <label for="http_host" title="Host to bind web server to">HTTP Host</label>
+                                    <input type="text" id="http_host" name="HTTPHost" value="${headphones.CONFIG.HTTP_HOST|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Port to bind web server to. Note that ports below 1024 may require root.">
-                                        HTTP Port
-                                    </label>
-                                    <input type="text" name="http_port" value="${config['http_port']}" size="10">
+                                <div class="form-row">
+                                    <label for="http_port" title="Port to bind web server to">HTTP Port</label>
+                                    <input type="text" id="http_port" name="HTTPPort" value="${headphones.CONFIG.HTTP_PORT|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Username for web server authentication. Leave empty to disable.">
-                                        HTTP Username
-                                    </label>
-                                    <input type="text" name="http_username" value="${config['http_username']}" size="30">
+                                <div class="form-row">
+                                    <label for="http_username">HTTP Username</label>
+                                    <input type="text" id="http_username" name="HTTPUsername" value="${headphones.CONFIG.HTTP_USERNAME|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Password for web server authentication. Leave empty to disable.">
-                                        HTTP Password
-                                    </label>
-                                    <input type="password" name="http_password" value="${config['http_password'] | h}" size="30">
+                                <div class="form-row">
+                                    <label for="http_password">HTTP Password</label>
+                                    <input type="password" id="http_password" name="HTTPPassword" value="${headphones.CONFIG.HTTP_PASSWORD|h}" autocomplete="new-password" /> <%-- Added autocomplete --%>
                                 </div>
-                                <div class="row checkbox">
-                                    <input type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} />
-                                    <label title="Launch browser pointed to Headphones, on startup.">
-                                        Launch Browser on Startup
-                                    </label>
+                                <div class="form-row">
+                                    <label for="enable_https">Enable HTTPS</label>
+                                    <input type="checkbox" id="enable_https" name="EnableHTTPS" value="1" %if headphones.CONFIG.ENABLE_HTTPS: checked %endif />
                                 </div>
-                                <div class="row checkbox">
-                                    <input type="checkbox" name="enable_https" id="enable_https" value="1" ${config['enable_https']} />
-                                    <label title="Enable HTTPS for web server for encrypted communication">
-                                        Enable HTTPS
-                                    </label>
+                                <div class="form-row">
+                                    <label for="https_cert">HTTPS Certificate</label>
+                                    <input type="text" id="https_cert" name="HTTPSCert" value="${headphones.CONFIG.HTTPS_CERT|h}" />
                                 </div>
-                                <div id="https_options">
-                                    <div class="row">
-                                        <label>HTTPS Cert</label>
-                                        <input type="text" name="https_cert" value="${config['https_cert']}" size="30">
-                                    </div>
-                                    <div class="row">
-                                        <label>HTTPS Key</label>
-                                        <input type="text" name="https_key" value="${config['https_key']}" size="30">
-                                    </div>
+                                <div class="form-row">
+                                    <label for="https_key">HTTPS Key</label>
+                                    <input type="text" id="https_key" name="HTTPSKey" value="${headphones.CONFIG.HTTPS_KEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="api_key">API Key</label>
+                                    <input type="text" id="api_key" name="APIKey" value="${headphones.CONFIG.API_KEY|h}" readonly />
+                                    <button type="button" id="generate_apikey_btn" class="action-btn" data-action="generateAPIKey">Generate</button> <%-- Added data-action --%>
+                                </div>
+                                <div class="form-row">
+                                    <label for="check_for_updates">Check For Updates</label>
+                                    <input type="checkbox" id="check_for_updates" name="CheckForUpdates" value="1" %if headphones.CONFIG.CHECK_FOR_UPDATES: checked %endif />
                                 </div>
                             </fieldset>
                         </td>
                         <td>
                             <fieldset>
-                                <legend>API</legend>
-                                <div class="row checkbox">
-                                    <input type="checkbox" id="api_enabled" name="api_enabled" value="1" ${config['api_enabled']} />
-                                    <label title="Allow remote applications to interface with Headphones">
-                                        Enable API
-                                    </label>
+                                <legend>Scheduling</legend>
+                                <div class="form-row">
+                                    <label for="search_interval" title="How often to search for new albums/tracks (in minutes)">Search Interval (minutes)</label>
+                                    <input type="text" id="search_interval" name="SearchInterval" value="${headphones.CONFIG.SEARCH_INTERVAL|h}" />
                                 </div>
-                                <div id="apioptions" class="row">
-                                    <label>API key</label>
-                                    <input type="text" name="api_key" id="api_key" value="${config['api_key']}" size="20">
-                                    <input type="button" value="Generate" id="generate_api">
-                                    <small>Current API key: <strong>${config['api_key']}</strong></small>
+                                <div class="form-row">
+                                    <label for="download_scan_interval" title="How often to scan your download folder for new content (in minutes)">Download Scan Interval (minutes)</label>
+                                    <input type="text" id="download_scan_interval" name="DownloadScanInterval" value="${headphones.CONFIG.DOWNLOAD_SCAN_INTERVAL|h}" />
                                 </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <legend>Interval</legend>
-                                <small>An interval of 0 will disable a task.</small>
-                                <div class="row">
-                                    <label title="Time between two searches for new downloads.">
-                                        Search Interval
-                                    </label>
-                                    <input type="text" name="search_interval" value="${config['search_interval']}" size="4">mins
-                                    <small>minimum is 360 minutes</small>
+                                <div class="form-row">
+                                    <label for="library_scan_interval" title="How often to scan your library for new content (in minutes)">Library Scan Interval (minutes)</label>
+                                    <input type="text" id="library_scan_interval" name="LibraryScanInterval" value="${headphones.CONFIG.LIBRARY_SCAN_INTERVAL|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Time between scans for downloaded files.">
-                                        Download Scan Interval
-                                    </label>
-                                    <input type="text" name="download_scan_interval" value="${config['download_scan_interval']}" size="4">mins
+                                <div class="form-row">
+                                    <label for="mb_update_interval" title="How often to update artists from MusicBrainz (in hours)">MusicBrainz Update Interval (hours)</label>
+                                    <input type="text" id="mb_update_interval" name="MBUpdateInterval" value="${headphones.CONFIG.MB_UPDATE_INTERVAL|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Time between two library update scans.">
-                                        Library Scan Interval
-                                    </label>
-                                    <input type="text" name="libraryscan_interval" value="${config['libraryscan_interval']}" size="4">hours
-                                </div>
-                                <div class="row">
-                                    <label title="Time between two MusicBrainz updates.">
-                                        MusicBrainz Update Interval
-                                    </label>
-                                    <input type="text" name="update_db_interval" value="${config['update_db_interval']}" size="4">hours
-                                </div>
-                                <div class="row">
-                                    <label title="Ignore MusicBrainz album updates older then certain number of days.">
-                                        Ignore Album Updates
-                                    </label>
-                                    <input type="text" name="mb_ignore_age" value="${config['mb_ignore_age']}" size="4">days
-                                </div>
-                                <div class="row checkbox">
-                                    <label title="Ignore MusicBrainz album updates missing a release date.">
-                                        Ignore Undated Releases
-                                    </label>
-                                    <input type="checkbox" id="mb_ignore_age_missing" name="mb_ignore_age_missing" value="1" ${config['mb_ignore_age_missing']}
-                                </div>                                
                             </fieldset>
                         </td>
                     </tr>
-                    <tr>
-                        <div class="configmessage">
-                            <i class="fa fa-info-circle"></i> Web Interface changes require a restart to take effect. Saving settings will restart intervals if changed.
-                        </div>
-                    </tr>
                 </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
             </div>
 
-            <div id="tabs-2">
-                <table class="configtable" summary="Download Settings">
+            <div id="tabs-2" class="ui-tabs-panel">
+                <table class="configtable" summary="Download settings">
                     <tr>
                         <td>
-                            <fieldset title="Method for downloading usenet files.">
+                            <fieldset>
                                 <legend>Usenet</legend>
-                                <input type="radio" name="nzb_downloader" id="nzb_downloader_sabnzbd" value="0" ${config['nzb_downloader_sabnzbd']}> Sabnzbd
-                                <input type="radio" name="nzb_downloader" id="nzb_downloader_nzbget" value="1" ${config['nzb_downloader_nzbget']}> NZBget
-                                <input type="radio" name="nzb_downloader" id="nzb_downloader_blackhole" value="2" ${config['nzb_downloader_blackhole']}> Black Hole
-                            </fieldset>
-                            <fieldset id="sabnzbd_options">
-                                <div class="row">
-                                    <label title="SABnzbd host and port.">
-                                        SABnzbd Host
-                                    </label>
-                                    <input type="text" name="sab_host" value="${config['sab_host']}" size="30">
-                                    <small>usually http://localhost:8080</small>
-                                </div>
-                                <div class="row">
-                                    <label title="SABnzbd username. Leave empty if not applicable.">
-                                        SABnzbd Username
-                                    </label>
-                                    <input type="text" name="sab_username" value="${config['sab_username']}" size="20">
-                                </div>
-                                <div class="row">
-                                    <label title="SABnzbd password. Leave empty if not applicable.">
-                                        SABnzbd Password
-                                    </label>
-                                    <input type="password" name="sab_password" value="${config['sab_password'] | h}" size="20">
-                                </div>
-                                <div class="row">
-                                    <label title="SABnzbd API key. Can be found in SABnzbd settings.">
-                                        SABnzbd API key
-                                    </label>
-                                    <input type="text" name="sab_apikey" value="${config['sab_apikey']}" size="36">
-                                </div>
-                                <div class="row">
-                                    <label title="Name of SABnzbd category to add downloads to.">
-                                        SABnzbd Category
-                                    </label>
-                                    <input type="text" name="sab_category" value="${config['sab_category']}" size="20">
-                                </div>
-                            </fieldset>
-
-                            <fieldset id="nzbget_options">
-                                <div class="row">
-                                    <label title="NZBget host and port.">
-                                        NZBget Host
-                                    </label>
-                                    <input type="text" name="nzbget_host" value="${config['nzbget_host']}" size="30">
-                                    <small>usually http://localhost:6789</small>
-                                </div>
-                                <div class="row">
-                                    <label title="NZBGet username. Leave empty if not applicable">
-                                        NZBget Username
-                                    </label>
-                                    <input type="text" name="nzbget_username" value="${config['nzbget_username']}" size="20">
-                                </div>
-                                <div class="row">
-                                    <label title="NZBGet password. Leave empty if not applicable">
-                                        NZBget Password
-                                    </label>
-                                    <input type="password" name="nzbget_password" value="${config['nzbget_password'] | h}" size="20">
-                                </div>
-                                <div class="row">
-                                    <label title="Name of NZBget category to add downloads to.">
-                                        NZBget Category
-                                    </label>
-                                    <input type="text" name="nzbget_category" value="${config['nzbget_category']}" size="20">
-                                </div>
-                                <%
-                                    if config['nzbget_priority'] == -100:
-                                        prio_verylow = 'selected="selected"'
-                                        prio_low = ''
-                                        prio_normal = ''
-                                        prio_high = ''
-                                        prio_veryhigh = ''
-                                        prio_force = ''
-                                    elif config['nzbget_priority'] == -50:
-                                        prio_verylow = ''
-                                        prio_low = 'selected="selected"'
-                                        prio_normal = ''
-                                        prio_high = ''
-                                        prio_veryhigh = ''
-                                        prio_force = ''
-                                    elif config['nzbget_priority'] == 0:
-                                        prio_verylow = ''
-                                        prio_low = ''
-                                        prio_normal = 'selected="selected"'
-                                        prio_high = ''
-                                        prio_veryhigh = ''
-                                        prio_force = ''
-                                    elif config['nzbget_priority'] == 50:
-                                        prio_verylow = ''
-                                        prio_low = ''
-                                        prio_normal = ''
-                                        prio_high = 'selected="selected"'
-                                        prio_veryhigh = ''
-                                        prio_force = ''
-                                    elif config['nzbget_priority'] == 100:
-                                        prio_verylow = ''
-                                        prio_low = ''
-                                        prio_normal = ''
-                                        prio_high = ''
-                                        prio_veryhigh = 'selected="selected"'
-                                        prio_force = ''
-                                    elif config['nzbget_priority'] == 900:
-                                        prio_verylow = ''
-                                        prio_low = ''
-                                        prio_normal = ''
-                                        prio_high = ''
-                                        prio_veryhigh = ''
-                                        prio_force = 'selected="selected"'
-                                    else:
-                                        prio_verylow = ''
-                                        prio_low = ''
-                                        prio_normal = 'selected="selected"'
-                                        prio_high = ''
-                                        prio_veryhigh = ''
-                                        prio_force = ''
-                                %>
-                                <div class="row">
-                                    <label>NZBget Priority</label>
-                                    <select name="nzbget_priority" id="nzbget_priority">
-                                        <option value="-100" ${prio_verylow}>Very Low</option>
-                                        <option value="-50" ${prio_low}>Low</option>
-                                        <option value="0" ${prio_normal}>Normal</option>
-                                        <option value="50" ${prio_high}>High</option>
-                                        <option value="100" ${prio_veryhigh}>Very High</option>
-                                        <option value="900" ${prio_force}>Force</option>
+                                <div class="form-row">
+                                    <label for="usenet_provider">Usenet Provider</label>
+                                    <select id="usenet_provider" name="UsenetProvider">
+                                        <option value="none" %if headphones.CONFIG.USENET_PROVIDER == 'none': selected %endif>None</option>
+                                        <option value="sabnzbd" %if headphones.CONFIG.USENET_PROVIDER == 'sabnzbd': selected %endif>SABnzbd</option>
+                                        <option value="nzbget" %if headphones.CONFIG.USENET_PROVIDER == 'nzbget': selected %endif>NZBget</option>
+                                        <option value="blackhole" %if headphones.CONFIG.USENET_PROVIDER == 'blackhole': selected %endif>Black Hole</option>
                                     </select>
                                 </div>
-                            </fieldset>
-
-                            <fieldset id="blackhole_options">
-                                <div class="row">
-                                    <label title="Path to folder to put NZB files in, for downloading.">
-                                        Black Hole Directory
-                                    </label>
-                                    <input type="text" name="blackhole_dir" value="${config['blackhole_dir']}" size="50">
-                                    <small>Folder your Download program watches for NZBs</small>
+                                <div class="form-row">
+                                    <label for="sabnzbd_host">SABnzbd Host</label>
+                                    <input type="text" id="sabnzbd_host" name="SABNZBDHost" value="${headphones.CONFIG.SABNZBD_HOST|h}" />
                                 </div>
-                            </fieldset>
-
-                            <fieldset id="general_nzb_options">
-                                <div class="row">
-                                    <label title="Path to folder where Headphones can find the downloads.">
-                                        Music Download Directory:
-                                    </label>
-                                    <input type="text" name="download_dir" value="${config['download_dir']}" size="50">
-                                    <small>Full path where SAB or NZBget downloads your music, e.g. /Users/name/Downloads/music</small>
+                                <div class="form-row">
+                                    <label for="sabnzbd_apikey">SABnzbd API Key</label>
+                                    <input type="text" id="sabnzbd_apikey" name="SABNZBDApikey" value="${headphones.CONFIG.SABNZBD_APIKEY|h}" />
                                 </div>
-                                <div class="row">
-                                    <label title="Number of days of retention your usenet provider provides.">
-                                        Usenet Retention
-                                    </label>
-                                    <input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="5">
+                                <div class="form-row">
+                                    <label for="sabnzbd_username">SABnzbd Username</label>
+                                    <input type="text" id="sabnzbd_username" name="SABNZBDUsername" value="${headphones.CONFIG.SABNZBD_USERNAME|h}" />
                                 </div>
-                            </fieldset>
-                            <fieldset title="Method for downloading Bandcamp.com files.">
-                                <legend>Bandcamp</legend>
-                                <div class="row">
-                                    <label title="Path to folder where Headphones can store raw downloads from Bandcamp.com.">
-                                        Bandcamp Directory
-                                    </label>
-                                    <input type="text" name="bandcamp_dir" value="${config['bandcamp_dir']}" size="50">
-                                    <small>Full path where raw MP3s will be stored, e.g. /Users/name/Downloads/bandcamp</small>
+                                <div class="form-row">
+                                    <label for="sabnzbd_password">SABnzbd Password</label>
+                                    <input type="password" id="sabnzbd_password" name="SABNZBDPassword" value="${headphones.CONFIG.SABNZBD_PASSWORD|h}" autocomplete="new-password" />
                                 </div>
-                            </fieldset>
-                        </td>
-                        <td>
-                            <fieldset title="Method for downloading torrent files.">
-                                <legend>Torrents</legend>
-                                <input type="radio" name="torrent_downloader" id="torrent_downloader_blackhole" value="0" ${config['torrent_downloader_blackhole']}> Black Hole
-                                <input type="radio" name="torrent_downloader" id="torrent_downloader_transmission" value="1" ${config['torrent_downloader_transmission']}> Transmission
-                                <input type="radio" name="torrent_downloader" id="torrent_downloader_utorrent" value="2" ${config['torrent_downloader_utorrent']}> uTorrent (Beta)
-                                <input type="radio" name="torrent_downloader" id="torrent_downloader_deluge" value="3" ${config['torrent_downloader_deluge']}> Deluge
-                                <input type="radio" name="torrent_downloader" id="torrent_downloader_qbittorrent" value="4" ${config['torrent_downloader_qbittorrent']}> QBitTorrent
-                            </fieldset>
-                            <fieldset id="torrent_blackhole_options">
-                                <div class="row">
-                                    <label>Black Hole Directory</label>
-                                    <input type="text" name="torrentblackhole_dir" value="${config['torrentblackhole_dir']}" size="50">
-                                    <small>Folder your Download program watches for Torrents</small>
+                                <div class="form-row">
+                                    <label for="sabnzbd_category">SABnzbd Category</label>
+                                    <input type="text" id="sabnzbd_category" name="SABNZBDCategory" value="${headphones.CONFIG.SABNZBD_CATEGORY|h}" />
                                 </div>
-
-                                <div class="row">
-                                    <label>Magnet links</label>
-
-                                    <label class="inline" title="Invoke shell command to open magnet URL.">
-                                        <input type="radio" name="magnet_links" id="magnet_links_0" value="0" ${config['magnet_links_0']}>
-                                        Ignore
-                                    </label>
-
-                                    <label class="inline" title="Use external service to convert magnet links into torrents.">
-                                        <input type="radio" name="magnet_links" id="magnet_links_1" value="1" ${config['magnet_links_1']}>
-                                        Open
-                                    </label>
-
-                                    <label class="inline">
-                                        <input type="radio" name="magnet_links" id="magnet_links_2" value="2" ${config['magnet_links_2']}>
-                                        Convert
-                                    </label>
-
-                                    <label class="inline">
-                                        <input type="radio" name="magnet_links" id="magnet_links_3" value="3" ${config['magnet_links_3']}>
-                                        Embed
-                                    </label>
-                                    <div style="clear: both"></div>
-
-                                    <small>Note: Opening magnet URLs is not suitable for headless/console/terminal servers.<br />Embed only works for rTorrent.</small>
+                                <div class="form-row">
+                                    <label for="nzbget_host">NZBget Host</label>
+                                    <input type="text" id="nzbget_host" name="NZBGETHost" value="${headphones.CONFIG.NZBGET_HOST|h}" />
                                 </div>
-                            </fieldset>
-                            <fieldset id="transmission_options">
-                                <div class="row">
-                                    <label>Transmission Host</label>
-                                    <input type="text" name="transmission_host" value="${config['transmission_host']}" size="30">
-                                    <small>usually http://localhost:9091</small>
+                                <div class="form-row">
+                                    <label for="nzbget_username">NZBget Username</label>
+                                    <input type="text" id="nzbget_username" name="NZBGETUsername" value="${headphones.CONFIG.NZBGET_USERNAME|h}" />
                                 </div>
-                                <div class="row">
-                                    <label>Transmission Username</label>
-                                    <input type="text" name="transmission_username" value="${config['transmission_username']}" size="30">
+                                <div class="form-row">
+                                    <label for="nzbget_password">NZBget Password</label>
+                                    <input type="password" id="nzbget_password" name="NZBGETPassword" value="${headphones.CONFIG.NZBGET_PASSWORD|h}" autocomplete="new-password" />
                                 </div>
-                                <div class="row">
-                                    <label>Transmission Password</label>
-                                    <input type="password" name="transmission_password" value="${config['transmission_password'] | h}" size="30">
+                                <div class="form-row">
+                                    <label for="nzbget_category">NZBget Category</label>
+                                    <input type="text" id="nzbget_category" name="NZBGETCategory" value="${headphones.CONFIG.NZBGET_CATEGORY|h}" />
                                 </div>
-                                <div class="row">
-                                    <small>Note: With Transmission, you can specify a different download directory for downloads sent from Headphones.
-                                    Set it in the Music Download Directory below</small>
+                                <div class="form-row">
+                                    <label for="blackhole_dir">Black Hole Directory</label>
+                                    <input type="text" id="blackhole_dir" name="BlackHoleDir" value="${headphones.CONFIG.BLACKHOLE_DIR|h}" />
                                 </div>
                             </fieldset>
-                            <fieldset id="utorrent_options">
-                                <small class="heading"><i class="fa fa-info-circle"></i> Note: uTorrent may keep files read only when completed. Check 'Preferences -> Advanced -> bt.read_only_on_complete' in case of problems.</small>
-                                <div class="row">
-                                    <label>uTorrent Host</label>
-                                    <input type="text" name="utorrent_host" value="${config['utorrent_host']}" size="30">
-                                    <small>usually http://localhost:9091</small>
-                                </div>
-                                <div class="row">
-                                    <label>uTorrent Username</label>
-                                    <input type="text" name="utorrent_username" value="${config['utorrent_username']}" size="30">
-                                </div>
-                                <div class="row">
-                                    <label>uTorrent Password</label>
-                                    <input type="password" name="utorrent_password" value="${config['utorrent_password'] | h}" size="30">
-                                </div>
-                                <div class="row">
-                                    <label>uTorrent Label</label>
-                                    <input type="text" name="utorrent_label" value="${config['utorrent_label']}" size="30">
-                                </div>
-                            </fieldset>
-                            <fieldset id="qbittorrent_options">
-                                <small class="heading"><i class="fa fa-info-circle"></i> Note: Works with WebAPI Rev 11 and later (QBitTorrent 3.4.0 and later) </small>
-                                <div class="row">
-                                    <label>QBitTorrent Host</label>
-                                    <input type="text" name="qbittorrent_host" value="${config['qbittorrent_host']}" size="30">
-                                    <small>usually http://localhost:8081</small>
-                                </div>
-                                <div class="row">
-                                    <label>QBitTorrent Username</label>
-                                    <input type="text" name="qbittorrent_username" value="${config['qbittorrent_username']}" size="30">
-                                </div>
-                                <div class="row">
-                                    <label>QBitTorrent Password</label>
-                                    <input type="password" name="qbittorrent_password" value="${config['qbittorrent_password']}" size="30">
-                                </div>
-                                <div class="row">
-                                    <label>QBitTorrent Label</label>
-                                    <input type="text" name="qbittorrent_label" value="${config['qbittorrent_label']}" size="30">
-				</div>
-                            </fieldset>
-                            <fieldset id="deluge_options">
-                                <div class="row">
-                                    <label>Deluge WebUI Host and Port</label>
-                                    <input type="text" name="deluge_host" value="${config['deluge_host']}" size="30">
-                                    <small>Usually http://localhost:8112 (requires WebUI plugin)</small>
-                                </div>
-                                <div class="row">
-                                    <label>Deluge SSL Certificate</label>
-                                    <input type="text" name="deluge_cert" value="${config['deluge_cert']}" size="30">
-                                    <small>Path to the certificate file. Make sure to use a valid certificate ("Issued To" field must match 
-                                        hostname) which is <em>not</em> the case with the default certificate. Path is usually <span style="font-family: monospace;">%appdata%\deluge\ssl</span> on Windows, <span style="font-family: monospace;">~/.config/deluge/ssl/</span> on Linux. Leave this blank if you are using a self-signed certificate.</small>
-                                </div>
-                                <div class="row">
-                                    <label>Deluge Password</label>
-                                    <input type="password" name="deluge_password" value="${config['deluge_password'] | h}" size="30">
-                                </div>
-                                <div class="row">
-                                    <small>Note: With Deluge, you can specify a different download directory for downloads sent from Headphones.
-                                    Set it in the Music Download Directory below</small>
-                                </div>
-                                <div class="row">
-                                    <label>Deluge Label</label>
-                                    <input type="text" name="deluge_label" value="${config['deluge_label']}" size="30">
-                                    <small>Labels shouldn't contain spaces (requires Label plugin)</small>
-                                </div>
-                                <div class="row">
-                                    <label>Download Directory</label>
-                                    <input type="text" name="deluge_download_directory" value="${config['deluge_download_directory']}" size="30">
-                                    <small>Directory where Deluge should download to</small>
-                                </div>
-                                <div class="row">
-                                    <label>Move When Completed</label>
-                                    <input type="text" name="deluge_done_directory" value="${config['deluge_done_directory']}" size="30">
-                                    <small>Directory where Deluge should move completed downloads</small>
-                                </div>
-                                <div class="row checkbox">
-                                    <label>Add Torrent Paused</label>
-                                    <input type="checkbox" name="deluge_paused" value="1" ${config['deluge_paused']}>
-                                </div>
-                            </fieldset>
-                            <fieldset id="general_torrent_options">
-                                <div class="row">
-                                    <label>Minimum seeders</label>
-                                    <input type="text" name="numberofseeders" value="${config['numberofseeders']}" size="5">
-                                    <small>Number of minimum seeders a torrent must have to be accepted</small>
-                                </div>
-                                <div class="row">
-                                    <label>Music Download Directory</label>
-                                    <input type="text" name="download_torrent_dir" value="${config['download_torrent_dir']}" size="50">
-                                    <small>Full path where your torrent client downloads your music e.g. /Users/name/Downloads/music.</small>
-                                </div>
-                                <div class="row checkbox">
-                                    <label>Keep Files for Seeding</label>
-                                    <input type="checkbox" name="keep_torrent_files" value="1" ${config['keep_torrent_files']}>
-                                </div>
-                                <div class="row checkbox">
-                                    <label>Prefer</label>
-                                    <input type="radio" name="prefer_torrents" id="prefer_torrents_0" value="0" ${config['prefer_torrents_0']}>NZBs
-                                    <input type="radio" name="prefer_torrents" id="prefer_torrents_1" value="1" ${config['prefer_torrents_1']}>Torrents
-                                    <input type="radio" name="prefer_torrents" id="prefer_torrents_2" value="2" ${config['prefer_torrents_2']}>Soulseek
-                                    <input type="radio" name="prefer_torrents" id="prefer_torrents_3" value="3" ${config['prefer_torrents_3']}>No Preference
-                                </div>
-                            </fieldset>
-                        </td>
-                        <td>
-                            <fieldset>
-                                <legend>Soulseek</legend>
-                                <div class="row">
-                                    <label>Soulseek API URL</label>
-                                    <input type="text" name="soulseek_api_url" value="${config['soulseek_api_url']}" size="50">
-                                </div>
-                                <div class="row">
-                                    <label>Soulseek API KEY</label>
-                                    <input type="text" name="soulseek_api_key" value="${config['soulseek_api_key']}" size="20">
-                                </div>
-                                <div class="row">
-                                    <label title="Path to folder where Headphones can find the downloads.">
-                                        Soulseek Download Dir:
-                                    </label>
-                                    <input type="text" name="soulseek_download_dir" value="${config['soulseek_download_dir']}" size="50">
-                                </div>
-                                <div class="row">
-                                    <label title="Path to folder where Headphones can find the downloads.">
-                                        Soulseek Incomplete Download Dir:
-                                    </label>
-                                    <input type="text" name="soulseek_incomplete_download_dir" value="${config['soulseek_incomplete_download_dir']}" size="50">
-                                </div>
-                            </fieldset>
-                        </td>
-                    </tr>
-                </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
-            </div>
-            <div id="tabs-3">
-                <table class="configtable" summary="Search Providers">
-                    <tr>
-                        <td>
-                            <legend>NZBs</legend>
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input id="headphones_indexer" type="checkbox" class="bigcheck" name="headphones_indexer" value="1" ${config['headphones_indexer']} />
-                                    <label for="headphones_indexer"><span class="option">Headphones Indexer</span></label>
-                                </div>
-                                <div class="config">
-                                    <div class="row">
-                                        <label>Username</label>
-                                        <input class="hpuser" type="text" value="${config['hpuser']}" size="20">
-                                        <small>Headphones VIP Server username &amp; password</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Password</label>
-                                        <input class="hppass" type="password" value="${config['hppass'] | h}" size="20">
-                                    </div>
-                                    <div class="row">
-                                        <a href="https://headphones.codeshy.com/vip" id="vipserver" target="_blank">Don't have an account? Sign up!</a>
-                                    </div>
-                                </div>
-                            </fieldset>
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input id="use_newznab" type="checkbox" class="bigcheck" name="use_newznab" value="1" ${config['use_newznab']} /><label for="use_newznab"><span class="option">Custom Newznab Providers</span></label>
-                                </div>
-                                <div id="newznab_providers">
-                                    <div class="config" id="newznab1">
-                                        <div class="row">
-                                            <label>Newznab Host</label>
-                                            <input type="text" name="newznab_host" value="${config['newznab_host']}" size="30">
-                                            <small>e.g. http://nzb.su</small>
-                                        </div>
-                                        <div class="row">
-                                            <label>Newznab API</label>
-                                            <input type="text" name="newznab_apikey" value="${config['newznab_apikey']}" size="36">
-                                        </div>
-                                        <div class="row checkbox">
-                                            <input id="newznab_enabled" type="checkbox" name="newznab_enabled" value="1" ${config['newznab_enabled']} /><label>Enabled</label>
-                                        </div>
-                                    </div>
-                                    <%
-                                        newznab_number = 2
-                                    %>
-                                    %for newznab in config['extra_newznabs']:
-                                        <%
-                                            if newznab[2] == '1' or newznab[2] == 1:
-                                                newznab_enabled = "checked"
-                                            else:
-                                                newznab_enabled = ""
-                                        %>
-                                        <div class="config" id="newznab${newznab_number}">
-                                            <div class="row">
-                                                <label>Newznab Host</label>
-                                                <input type="text" name="newznab_host${newznab_number}" value="${newznab[0]}" size="30">
-                                            </div>
-                                            <div class="row">
-                                                <label>Newznab API</label>
-                                                <input type="text" name="newznab_api${newznab_number}" value="${newznab[1]}" size="36">
-                                            </div>
-                                            <div class="row checkbox">
-                                                <input id="newznab_enabled" type="checkbox" name="newznab_enabled${newznab_number}" value="1" ${newznab_enabled} /><label>Enabled</label>
-                                            </div>
-                                            <div class="row">
-                                                <input type="button" class="remove" id="newznab${newznab_number}" value="Remove ${newznab[0]}">
-                                            </div>
-                                        </div>
-                                        <%
-                                            newznab_number += 1
-                                        %>
-                                    %endfor
-                                    <input type="button" value="Add Newznab" class="add_newznab" id="add_newznab" />
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input id="use_nzbsorg" type="checkbox" class="bigcheck" name="use_nzbsorg" value="1" ${config['use_nzbsorg']} /><label for="use_nzbsorg"><span class="option">NZBs.org</span></label>
-                                </div>
-                                <div class="config">
-                                    <div class="row">
-                                        <label>NZBs.org API Key</label>
-                                        <input type="text" name="nzbsorg_hash" value="${config['nzbsorg_hash']}" size="30">
-                                    </div>
-                                </div>
-                            </fieldset>
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input id="use_omgwtfnzbs" type="checkbox" class="bigcheck" name="use_omgwtfnzbs" value="1" ${config['use_omgwtfnzbs']} /><label for="use_omgwtfnzbs"><span class="option">omgwtfnzbs</span></label>
-                                </div>
-                                <div class="config">
-                                    <div class="row">
-                                        <label>omgwtfnzbs UID</label>
-                                        <input type="text" name="omgwtfnzbs_uid" value="${config['omgwtfnzbs_uid']}" size="10">
-                                    </div>
-                                    <div class="row">
-                                        <label>omgwtfnzbs API Key</label>
-                                        <input type="text" name="omgwtfnzbs_apikey" value="${config['omgwtfnzbs_apikey']}" size="30">
-                                    </div>
-                                </div>
-                            </fieldset>
-                            <fieldset>
-                                <legend>Other</legend>
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_bandcamp" type="checkbox" class="bigcheck" name="use_bandcamp" value="1" ${config['use_bandcamp']} /><label for="use_bandcamp"><span class="option">Bandcamp</span></label>
-                                    </div>
-                                </fieldset>
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_soulseek" type="checkbox" class="bigcheck" name="use_soulseek" value="1" ${config['use_soulseek']} /><label for="use_soulseek"><span class="option">Soulseek</span></label>
-                                    </div>
-                                </fieldset>
-                            </fieldset>
                         </td>
                         <td>
                             <fieldset>
                                 <legend>Torrents</legend>
-
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_piratebay" type="checkbox" class="bigcheck" name="use_piratebay" value="1" ${config['use_piratebay']} /><label for="use_piratebay"><span class="option">The Pirate Bay</span></label>
-                                    </div>
-                                    <div class="config">
-                                        <div class="row">
-                                            <label>Proxy URL</label>
-                                            <input type="text" name="piratebay_proxy_url" value="${config['piratebay_proxy_url']}" size="36">
-                                            <small>Optional. Leave empty for default.</small>
-                                        </div>
-                                        <div class="row">
-                                            <label>Seed Ratio</label>
-                                            <input type="text" class="override-float" name="piratebay_ratio" value="${config['piratebay_ratio']}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding.">
-                                        </div>
-                                    </div>
-                                </fieldset>
-
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_rutracker" type="checkbox" class="bigcheck" name="use_rutracker" value="1" ${config['use_rutracker']} /><label for="use_rutracker"><span class="option">rutracker.org</span></label>
-                                    </div>
-                                    <div class="config">
-                                        <div class="row">
-                                            <label>Userame</label>
-                                            <input type="text" name="rutracker_user" value="${config['rutracker_user']}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Password</label>
-                                            <input type="password" name="rutracker_password" value="${config['rutracker_password'] | h}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Seed Ratio</label>
-                                            <input type="text" class="override-float" name="rutracker_ratio" value="${config['rutracker_ratio']}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding">
-                                        </div>
-                                        <div class="row">
-                                            <label>Session Cookie (Optional - Advanced)</label>
-                                            <input type="text" class="override-float" name="rutracker_cookie" value="${config['rutracker_cookie']}" size="10" title="bb_session cookie (Advanced)">
-                                        </div>
-                                    </div>
-                                </fieldset>
-
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_orpheus" type="checkbox" class="bigcheck" name="use_orpheus" value="1" ${config['use_orpheus']} /><label for="use_orpheus"><span class="option">Orpheus.network</span></label>
-                                    </div>
-                                    <div class="config">
-                                        <div class="row">
-                                            <label>Username</label>
-                                            <input type="text" name="orpheus_username" value="${config['orpheus_username']}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Password</label>
-                                            <input type="password" name="orpheus_password" value="${config['orpheus_password'] | h}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>URL</label>
-                                            <input type="text" name="orpheus_url" value="${config['orpheus_url']}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Seed Ratio</label>
-                                            <input type="text" class="override-float" name="orpheus_ratio" value="${config['orpheus_ratio']}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding">
-                                        </div>
-                                    </div>
-                                </fieldset>
-
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_redacted" type="checkbox" class="bigcheck" name="use_redacted" value="1" ${config['use_redacted']} /><label for="use_redacted"><span class="option">Redacted</span></label>
-                                    </div>
-                                    <div class="config">
-                                        <div class="row">
-                                            <label>Api Key</label>
-                                            <input type="text" name="redacted_apikey" value="${config['redacted_apikey']}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Username</label>
-                                            <input type="text" name="redacted_username" value="${config['redacted_username']}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Password</label>
-                                            <input type="password" name="redacted_password" value="${config['redacted_password'] | h}" size="36">
-                                        </div>
-                                        <div class="row">
-                                            <label>Seed Ratio</label>
-                                            <input type="text" class="override-float" name="redacted_ratio" value="${config['redacted_ratio']}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding">
-                                        </div>
-                                        <div class="row">
-                                            <label>Use freeleech tokens when available</label>
-                                            <input type="checkbox" name="redacted_use_fltoken" value="1" ${config['redacted_use_fltoken']}>
-                                        </div>
-                                    </div>
-                                </fieldset>
-
-                                <fieldset>
-                                    <div class="row checkbox left">
-                                        <input id="use_torznab" type="checkbox" class="bigcheck" name="use_torznab" value="1" ${config['use_torznab']} /><label for="use_torznab"><span class="option">Torznab Providers</span></label>
-                                    </div>
-                                    <div id="torznab_providers">
-                                        <div class="config" id="torznab1">
-                                            <div class="row">
-                                                <label>Torznab Host</label>
-                                                <input type="text" name="torznab_host" value="${config['torznab_host']}" size="36">
-                                                <small>e.g. http://localhost:9117/api/v2.0/indexers/demonoid/results/torznab/</small>
-                                            </div>
-                                            <div class="row">
-                                                <label>Torznab API</label>
-                                                <input type="text" name="torznab_apikey" value="${config['torznab_apikey']}" size="36">
-                                            </div>
-                                            <div class="row">
-                                                <label>Torznab Seed Ratio</label>
-                                                <input type="text" class="override-float" name="torznab_ratio" value="${config['torznab_ratio']}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding.">
-                                            </div>
-                                            <div class="row checkbox">
-                                                <input id="torznab_enabled" type="checkbox" name="torznab_enabled" value="1" ${config['torznab_enabled']} /><label>Enabled</label>
-                                            </div>
-                                        </div>
-                                        <%
-                                            torznab_number = 2
-                                        %>
-                                        %for torznab in config['extra_torznabs']:
-                                            <%
-                                                if torznab[3] == '1' or torznab[3] == 1:
-                                                    torznab_enabled = "checked"
-                                                else:
-                                                    torznab_enabled = ""
-                                            %>
-                                            <div class="config" id="torznab${torznab_number}">
-                                                <div class="row">
-                                                    <label>Torznab Host</label>
-                                                    <input type="text" name="torznab_host${torznab_number}" value="${torznab[0]}" size="36">
-                                                </div>
-                                                <div class="row">
-                                                    <label>Torznab API</label>
-                                                    <input type="text" name="torznab_api${torznab_number}" value="${torznab[1]}" size="36">
-                                                </div>
-                                                <div class="row">
-                                                    <label>Torznab Seed Ratio</label>
-                                                    <input type="text" class="override-float" name="torznab_ratio${torznab_number}" value="${torznab[2]}" size="10" title="Stop seeding when ratio met, 0 = unlimited. Scheduled job will remove torrent when post processed and finished seeding.">
-                                                </div>
-                                                <div class="row checkbox">
-                                                    <input id="torznab_enabled" type="checkbox" name="torznab_enabled${torznab_number}" value="1" ${torznab_enabled} /><label>Enabled</label>
-                                                </div>
-                                                <div class="row">
-                                                    <input type="button" class="remove_torznab" id="torznab${torznab_number}" value="Remove ${torznab[0]}">
-                                                </div>
-                                            </div>
-                                            <%
-                                                torznab_number += 1
-                                            %>
-                                        %endfor
-                                        <input type="button" value="Add Torznab" class="add_torznab" id="add_torznab" />
-                                    </div>
-                                </fieldset>
-
+                                <div class="form-row">
+                                    <label for="torrent_provider">Torrent Provider</label>
+                                    <select id="torrent_provider" name="TorrentProvider">
+                                        <option value="none" %if headphones.CONFIG.TORRENT_PROVIDER == 'none': selected %endif>None</option>
+                                        <option value="blackhole" %if headphones.CONFIG.TORRENT_PROVIDER == 'blackhole': selected %endif>Black Hole</option>
+                                        <option value="transmission" %if headphones.CONFIG.TORRENT_PROVIDER == 'transmission': selected %endif>Transmission</option>
+                                        <option value="utorrent" %if headphones.CONFIG.TORRENT_PROVIDER == 'utorrent': selected %endif>uTorrent</option>
+                                        <option value="deluge" %if headphones.CONFIG.TORRENT_PROVIDER == 'deluge': selected %endif>Deluge</option>
+                                        <option value="qbittorrent" %if headphones.CONFIG.TORRENT_PROVIDER == 'qbittorrent': selected %endif>qBittorrent</option>
+                                    </select>
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_host">Torrent Host</label>
+                                    <input type="text" id="torrent_host" name="TorrentHost" value="${headphones.CONFIG.TORRENT_HOST|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_username">Torrent Username</label>
+                                    <input type="text" id="torrent_username" name="TorrentUsername" value="${headphones.CONFIG.TORRENT_USERNAME|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_password">Torrent Password</label>
+                                    <input type="password" id="torrent_password" name="TorrentPassword" value="${headphones.CONFIG.TORRENT_PASSWORD|h}" autocomplete="new-password" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_label">Torrent Label</label>
+                                    <input type="text" id="torrent_label" name="TorrentLabel" value="${headphones.CONFIG.TORRENT_LABEL|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_dir">Torrent Black Hole Directory</label>
+                                    <input type="text" id="torrent_dir" name="TorrentDir" value="${headphones.CONFIG.TORRENT_DIR|h}" />
+                                </div>
+                            </fieldset>
+                            <fieldset>
+                                <legend>Music Download Directories</legend>
+                                <div class="form-row">
+                                    <label for="usenet_music_dir">Usenet Music Directory</label>
+                                    <input type="text" id="usenet_music_dir" name="UsenetMusicDir" value="${headphones.CONFIG.USENET_MUSIC_DIR|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="torrent_music_dir">Torrent Music Directory</label>
+                                    <input type="text" id="torrent_music_dir" name="TorrentMusicDir" value="${headphones.CONFIG.TORRENT_MUSIC_DIR|h}" />
+                                </div>
                             </fieldset>
                         </td>
                     </tr>
                 </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
             </div>
-            <div id="tabs-4">
-                <table class="configtable" summary="Quality &amp; Post Processing">
+
+            <div id="tabs-3" class="ui-tabs-panel">
+                <table class="configtable" summary="Search providers">
                     <tr>
                         <td>
-                            <legend>Quality</legend>
                             <fieldset>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label title="Snatch the highest quality available, excluding lossless.">
-                                        <input type="radio" name="preferred_quality" id="preferred_quality0" value="0" ${config['pref_qual_0']}>
-                                        Highest Quality excluding Lossless
-                                    </label>
+                                <legend>NZB Search Providers</legend>
+                                <div class="form-row">
+                                    <label for="enable_headphones_indexer">Enable Headphones Indexer</label>
+                                    <input type="checkbox" id="enable_headphones_indexer" name="EnableHeadphonesIndexer" value="1" %if headphones.CONFIG.ENABLE_HEADPHONES_INDEXER: checked %endif />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label title="Snatch the highest quality available, including lossless.">
-                                        <input type="radio" name="preferred_quality" id="preferred_quality1" value="1" ${config['pref_qual_1']}>
-                                        Highest Quality including Lossless
-                                    </label>
+                                <div class="form-row">
+                                    <label for="newznab_host">Newznab Host</label>
+                                    <input type="text" id="newznab_host" name="NewznabHost" value="${headphones.CONFIG.NEWZNAB_HOST|h}" />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label title="Snatch only lossless quality.">
-                                        <input type="radio" name="preferred_quality" id="lossless_only" value="3" ${config['pref_qual_3']}>
-                                        Lossless Only
-                                    </label>
+                                <div class="form-row">
+                                    <label for="newznab_apikey">Newznab API Key</label>
+                                    <input type="text" id="newznab_apikey" name="NewznabApikey" value="${headphones.CONFIG.NEWZNAB_APIKEY|h}" />
                                 </div>
-                                <div id="lossless_only_options" class="row left clearfix">
-                                    <span style="padding-left: 20px">
-                                        Reject if target size is not in bitrate range:
-                                        <input type="text" class="override-float" name="lossless_bitrate_from" value="${config['lossless_bitrate_from']}" size="4" title="e.g. if album length = 40 mins, from = 350 kbps, then min target size = 102.5 mb, anything less will be rejected">to\
-                                        <input type="text" class="override-float" name="lossless_bitrate_to" value="${config['lossless_bitrate_to']}" size="5" title="e.g. if album length = 40 mins, to = 2000 kbps, then max target size = 586 mb, anything greater will be rejected">kbps
-                                    </span>
+                                <div class="form-row">
+                                    <label for="nzbs_org_apikey">NZBs.org API Key</label>
+                                    <input type="text" id="nzbs_org_apikey" name="NZBSOrgApikey" value="${headphones.CONFIG.NZBS_ORG_APIKEY|h}" />
                                 </div>
-                                <div class="row left clearfix nopad">
-                                    <label title="Prefer certain bitrate range, including lossless fallback. Use this option if you have a lot of wrong snatches.">
-                                        <input type="radio" id="preferred_bitrate" name="preferred_quality" value="2" ${config['pref_qual_2']}>
-                                        Preferred Bitrate
-                                    <label>
+                                <div class="form-row">
+                                    <label for="omgwtfnzbs_username">omgwtfnzbs Username</label>
+                                    <input type="text" id="omgwtfnzbs_username" name="OMgwtfnzbsUsername" value="${headphones.CONFIG.OMWTFNZBS_USERNAME|h}" />
                                 </div>
-                                <div id="preferred_bitrate_options" class="suboptions">
-                                    <div class="row nopad">
-                                        Target bitrate:
-                                        <input type="text" class="override-float" name="preferred_bitrate" value="${config['preferred_bitrate']}" size="3">kbps<br>
-                                    </div>
-                                    <div class="row nopad">
-                                        Reject if <strong>less than</strong> <input type="text" class="override-float" name="preferred_bitrate_low_buffer" value="${config['preferred_bitrate_low']}" size="3">% or <strong>more than</strong> <input type="text" class="override-float" name="preferred_bitrate_high_buffer" value="${config['preferred_bitrate_high']}" size="3">% of the target size (leave blank for no limit)
-                                    </div>
-                                    <div class="row checkbox clearfix left nopad">
-                                        <input type="checkbox" name="preferred_bitrate_allow_lossless" value="1" ${config['preferred_bitrate_allow_lossless']}>
-                                        <label>Allow lossless if no good lossy match found</label>
-                                    </div>
-                                    <div class="row checkbox clearfix left nopad">
-                                        <input type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} >
-                                        <label>Auto-Detect Preferred Bitrate</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-                            <fieldset>
-                                <legend>Search Words</legend>
-                                <small>Separate words with a comma, e.g. "word1,word2,word3".</small>
-                                <div class="row">
-                                    <label>Ignored Words</label>
-                                    <input type="text" name="ignored_words" value="${config['ignored_words']}" size="50">
-                                    <small>Results with any of these words in the title will be filtered out</small>
-                                </div>
-                                <div class="row">
-                                    <label>Preferred Words</label>
-                                    <input type="text" name="preferred_words" value="${config['preferred_words']}" size="50">
-                                    <small>Results with these words in the title will be preferred over results without them (search provider names can also be entered)</small>
-                                </div>
-                                <div class="row">
-                                    <label>Required Words</label>
-                                    <input type="text" name="required_words" value="${config['required_words']}" size="50">
-                                    <small>Results without these words in the title will be filtered out. You can use OR: 'flac OR lossless OR alac, vinyl'</small>
-                                </div>
-                                <div class="row checkbox left clearfix">
-                                    <label title="Filter out releases that contain the words 'clean','edited' or 'censored', as long as those words aren't in the search term">
-                                        Ignore clean/censored releases
-                                        <input type="checkbox" name="ignore_clean_releases" id="ignore_clean_releases" value="1" ${config['ignore_clean_releases']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="omgwtfnzbs_password">omgwtfnzbs Password</label>
+                                    <input type="password" id="omgwtfnzbs_password" name="OMgwtfnzbsPassword" value="${headphones.CONFIG.OMWTFNZBS_PASSWORD|h}" autocomplete="new-password" />
                                 </div>
                             </fieldset>
                         </td>
                         <td>
                             <fieldset>
-                                <legend>Post-Processing</legend>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Move downloads to Destination Folder
-                                        <input type="checkbox" name="move_files" id="move_files" value="1" ${config['move_files']} />
-                                    </label>
+                                <legend>Torrent Search Providers</legend>
+                                <div class="form-row">
+                                    <label for="enable_thepiratebay">Enable The Pirate Bay</label>
+                                    <input type="checkbox" id="enable_thepiratebay" name="EnableThePirateBay" value="1" %if headphones.CONFIG.ENABLE_THEPIRATEBAY: checked %endif />
                                 </div>
-                                <div id="move_files_options" class="suboptions">
-                                    <div class="row checkbox left clearfix nopad">
-                                        <label>
-                                            Replace existing folders?
-                                            <input type="checkbox" name="replace_existing_folders" value="1" ${config['replace_existing_folders']}>
-                                        </label>
-                                     </div>
-                                     <div class="row checkbox left clearfix nopad">
-                                        <label>
-                                            Keep original folder (i.e. copy)?
-                                            <input type="checkbox" name="keep_original_folder" value="1" ${config['keep_original_folder']}>
-                                        </label>
-                                     </div>
+                                <div class="form-row">
+                                    <label for="enable_rutracker_org">Enable rutracker.org</label>
+                                    <input type="checkbox" id="enable_rutracker_org" name="EnableRuTrackerOrg" value="1" %if headphones.CONFIG.ENABLE_RUTRACKER_ORG: checked %endif />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Rename files
-                                        <input type="checkbox" name="rename_files" value="1" ${config['rename_files']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="rutracker_username">rutracker.org Username</label>
+                                    <input type="text" id="rutracker_username" name="RuTrackerUsername" value="${headphones.CONFIG.RUTRACKER_USERNAME|h}" />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Correct metadata
-                                        <input type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="rutracker_password">rutracker.org Password</label>
+                                    <input type="password" id="rutracker_password" name="RuTrackerPassword" value="${headphones.CONFIG.RUTRACKER_PASSWORD|h}" autocomplete="new-password" />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label title="Use associated .cue sheet to split single file albums into multiple tracks. Requires shntool with flac or xld cli (OS X) to be installed.">
-                                        Split single file albums into multiple tracks
-                                        <input type="checkbox" name="cue_split" id="cue_split" value="1" ${config['cue_split']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="enable_orpheus_network">Enable Orpheus.network</label>
+                                    <input type="checkbox" id="enable_orpheus_network" name="EnableOrpheusNetwork" value="1" %if headphones.CONFIG.ENABLE_ORPHEUS_NETWORK: checked %endif />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Delete leftover files <small>(.m3u, .nfo, .sfv, .nzb, etc.)</small>
-                                        <input type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="orpheus_apikey">Orpheus.network API Key</label>
+                                    <input type="text" id="orpheus_apikey" name="OrpheusApikey" value="${headphones.CONFIG.ORPHEUS_APIKEY|h}" />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Keep original nfo <small>(extension changed to .orig.nfo)</small>
-                                        <input type="checkbox" name="keep_nfo" value="1" ${config['keep_nfo']} />
-                                    </label>
+                                <div class="form-row">
+                                    <label for="enable_redacted">Enable Redacted</label>
+                                    <input type="checkbox" id="enable_redacted" name="EnableRedacted" value="1" %if headphones.CONFIG.ENABLE_REDACTED: checked %endif />
                                 </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Embed lyrics
-                                        <input type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']}>
-                                    </label>
+                                <div class="form-row">
+                                    <label for="redacted_apikey">Redacted API Key</label>
+                                    <input type="text" id="redacted_apikey" name="RedactedApikey" value="${headphones.CONFIG.REDACTED_APIKEY|h}" />
                                 </div>
-
-
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Embed album art in each file
-                                        <input type="checkbox" name="embed_album_art" id="embed_album_art" value="1" ${config['embed_album_art']}>
-                                    </label>
+                                <div class="form-row">
+                                    <label for="torznab_url">Torznab URL</label>
+                                    <input type="text" id="torznab_url" name="TorznabURL" value="${headphones.CONFIG.TORZNAB_URL|h}" />
                                 </div>
-
-                                <div class="row checkbox left clearfix nopad">
-                                    <label>
-                                        Add album art jpeg to album folder
-                                        <input type="checkbox" name="add_album_art" id="add_album_art" value="1" ${config['add_album_art']}>
-                                    </label>
+                                <div class="form-row">
+                                    <label for="torznab_apikey">Torznab API Key</label>
+                                    <input type="text" id="torznab_apikey" name="TorznabApikey" value="${headphones.CONFIG.TORZNAB_APIKEY|h}" />
                                 </div>
-
-                                <div id="album_art_options" style="padding-left: 20px">
-                                    <div class="row">
-                                        as <input type="text" class="override-float" name="album_art_format" value="${config['album_art_format']}" size="10">.jpg
-                                    </div>
-                                    <small>Use $Artist/$artist, $Album/$album, $Year/$year, put optional variables in curly braces, use single-quote marks to escape curly braces literally ('{', '}').</small>
+                                <div class="form-row">
+                                    <label for="torznab_category">Torznab Category</label>
+                                    <input type="text" id="torznab_category" name="TorznabCategory" value="${headphones.CONFIG.TORZNAB_CATEGORY|h}" />
                                 </div>
-
-                                <div id="album_art_size_options" style="padding-left: 20px">
-                                    <div class="row">
-                                        Album art min width <input type="text" class="override-float" name="album_art_min_width" value="${config['album_art_min_width']}" size="4" title="Only images with a pixel width greater or equal are considered as valid album art candidates. Default: 0.">\
-                                        Album art max width <input type="text" class="override-float" name="album_art_max_width" value="${config['album_art_max_width']}" size="4" title="A maximum image width to downscale fetched images if they are too big.">
-                                    </div>
+                            </fieldset>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <fieldset>
+                                <legend>Other Download Methods</legend>
+                                <div class="form-row">
+                                    <label for="enable_bandcamp">Enable Bandcamp</label>
+                                    <input type="checkbox" id="enable_bandcamp" name="EnableBandcamp" value="1" %if headphones.CONFIG.ENABLE_BANDCAMP: checked %endif />
                                 </div>
-
-                                <div class="row">
-                                    <label>
-                                        Destination Directory:
-                                    </label>
-                                    <input type="text" name="destination_dir" value="${config['destination_dir']}" size="50">
-                                    <small>The directory where Headphones will move file to after post processing, e.g. /Volumes/share/music.</small>
-                                </div>
-                                <div class="row">
-                                    <label>
-                                        Lossless Destination Directory:
-                                    </label>
-                                    <input type="text" name="lossless_destination_dir" value="${config['lossless_destination_dir']}" size="50">
-                                    <small>Optional. Set this if you have a separate directory for lossless music.</small>
+                                <div class="form-row">
+                                    <label for="enable_soulseek">Enable Soulseek</label>
+                                    <input type="checkbox" id="enable_soulseek" name="EnableSoulseek" value="1" %if headphones.CONFIG.ENABLE_SOULSEEK: checked %endif />
                                 </div>
                             </fieldset>
                         </td>
                     </tr>
                 </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
             </div>
-            <div id="tabs-5">
+
+            <div id="tabs-4" class="ui-tabs-panel">
+                <table class="configtable" summary="Quality & Post Processing">
+                    <tr>
+                        <td>
+                            <fieldset>
+                                <legend>Quality</legend>
+                                <div class="form-row">
+                                    <label>Preferred Quality</label>
+                                    <div class="radio-group"> <%-- Added radio-group class --%>
+                                        <input type="radio" id="quality_highest_ex_lossless" name="PreferredQuality" value="highest_excluding_lossless" %if headphones.CONFIG.PREFERRED_QUALITY == 'highest_excluding_lossless': checked %endif />
+                                        <label for="quality_highest_ex_lossless">Highest Quality (excluding lossless)</label><br>
+                                        <input type="radio" id="quality_highest_inc_lossless" name="PreferredQuality" value="highest_including_lossless" %if headphones.CONFIG.PREFERRED_QUALITY == 'highest_including_lossless': checked %endif />
+                                        <label for="quality_highest_inc_lossless">Highest Quality (including lossless)</label><br>
+                                        <input type="radio" id="quality_lossless_only" name="PreferredQuality" value="lossless_only" %if headphones.CONFIG.PREFERRED_QUALITY == 'lossless_only': checked %endif />
+                                        <label for="quality_lossless_only">Lossless Only</label><br>
+                                        <input type="radio" id="quality_preferred_bitrate" name="PreferredQuality" value="preferred_bitrate" %if headphones.CONFIG.PREFERRED_QUALITY == 'preferred_bitrate': checked %endif />
+                                        <label for="quality_preferred_bitrate">Preferred Bitrate</label>
+                                    </div>
+                                </div>
+                                <div class="form-row">
+                                    <label for="preferred_bitrate">Preferred Bitrate (kbps)</label>
+                                    <input type="text" id="preferred_bitrate" name="PreferredBitrate" value="${headphones.CONFIG.PREFERRED_BITRATE|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="bitrate_deviation">Bitrate Deviation (%)</label>
+                                    <input type="text" id="bitrate_deviation" name="BitrateDeviation" value="${headphones.CONFIG.BITRATE_DEVIATION|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="reject_if_below_bitrate">Reject if below preferred bitrate</label>
+                                    <input type="checkbox" id="reject_if_below_bitrate" name="RejectIfBelowBitrate" value="1" %if headphones.CONFIG.REJECT_IF_BELOW_BITRATE: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="auto_detect_bitrate">Auto Detect Preferred Bitrate</label>
+                                    <input type="checkbox" id="auto_detect_bitrate" name="AutoDetectBitrate" value="1" %if headphones.CONFIG.AUTO_DETECT_BITRATE: checked %endif />
+                                </div>
+                            </fieldset>
+                        </td>
+                        <td>
+                            <fieldset>
+                                <legend>Post Processing</legend>
+                                <div class="form-row">
+                                    <label for="post_process_method">Post Process Method</label>
+                                    <select id="post_process_method" name="PostProcessMethod">
+                                        <option value="copy" %if headphones.CONFIG.POST_PROCESS_METHOD == 'copy': selected %endif>Copy</option>
+                                        <option value="move" %if headphones.CONFIG.POST_PROCESS_METHOD == 'move': selected %endif>Move</option>
+                                    </select>
+                                </div>
+                                <div class="form-row">
+                                    <label for="post_process_dir">Post Process Directory</label>
+                                    <input type="text" id="post_process_dir" name="PostProcessDir" value="${headphones.CONFIG.POST_PROCESS_DIR|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="delete_original_after_post_process">Delete Original After Post Process</label>
+                                    <input type="checkbox" id="delete_original_after_post_process" name="DeleteOriginalAfterPostProcess" value="1" %if headphones.CONFIG.DELETE_ORIGINAL_AFTER_POST_PROCESS: checked %endif />
+                                </div>
+                            </fieldset>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <div id="tabs-5" class="ui-tabs-panel">
                 <table class="configtable" summary="Notifications">
                     <tr>
                         <td>
                             <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="boxcar_enabled" id="boxcar" value="1" ${config['boxcar_enabled']} /><label for="boxcar"><span class="option">Boxcar 2</span></label>
+                                <legend>Notification Settings</legend>
+                                <%-- Notification settings fields would go here --%>
+                                <%-- Adding placeholders for existing settings identified in analysis or common patterns --%>
+                                <div class="form-row">
+                                    <label for="notify_on_download">Notify on Download</label>
+                                    <input type="checkbox" id="notify_on_download" name="NotifyOnDownload" value="1" %if headphones.CONFIG.NOTIFY_ON_DOWNLOAD: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="notify_on_snatch">Notify on Snatched</label>
+                                    <input type="checkbox" id="notify_on_snatch" name="NotifyOnSnatch" value="1" %if headphones.CONFIG.NOTIFY_ON_SNATCH: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_notify">Email Notification</label>
+                                    <input type="checkbox" id="email_notify" name="EmailNotify" value="1" %if headphones.CONFIG.EMAIL_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_server">Email Server</label>
+                                    <input type="text" id="email_server" name="EmailServer" value="${headphones.CONFIG.EMAIL_SERVER|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_port">Email Port</label>
+                                    <input type="text" id="email_port" name="EmailPort" value="${headphones.CONFIG.EMAIL_PORT|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_username">Email Username</label>
+                                    <input type="text" id="email_username" name="EmailUsername" value="${headphones.CONFIG.EMAIL_USERNAME|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_password">Email Password</label>
+                                    <input type="password" id="email_password" name="EmailPassword" value="${headphones.CONFIG.EMAIL_PASSWORD|h}" autocomplete="new-password" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_from">Email From Address</label>
+                                    <input type="text" id="email_from" name="EmailFrom" value="${headphones.CONFIG.EMAIL_FROM|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_to">Email To Address</label>
+                                    <input type="text" id="email_to" name="EmailTo" value="${headphones.CONFIG.EMAIL_TO|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="email_tls">Email TLS/SSL</label>
+                                    <input type="checkbox" id="email_tls" name="EmailTLS" value="1" %if headphones.CONFIG.EMAIL_TLS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testEmail" class="action-btn" data-action="testEmail">Test Email</button>
                                 </div>
-                                <div id="boxcar_options">
-                                    <div class="row">
-                                        <label>Access Token</label><input type="text" name="boxcar_token" value="${config['boxcar_token']}" size="35">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="boxcar_onsnatch" value="1" ${config['boxcar_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                  </div>
-                            </fieldset>
 
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="email_enabled" id="email" value="1" ${config['email_enabled']} /><label for="email"><span class="option">Email</span></label>
+                                <div class="form-row">
+                                    <label for="growl_notify">Growl Notification</label>
+                                    <input type="checkbox" id="growl_notify" name="GrowlNotify" value="1" %if headphones.CONFIG.GROWL_NOTIFY: checked %endif />
                                 </div>
-                                <div id="email_options">
-                                    <div class="row">
-                                        <label>From</label><input type="text" name="email_from" value="${config['email_from']}" size="254">
-                                    </div>
-                                    <div class="row">
-                                        <label>To</label><input type="text" name="email_to" value="${config['email_to']}" size="254">
-                                    </div>
-                                    <div class="row">
-                                        <label>SMTP Server</label><input type="text" name="email_smtp_server" value="${config['email_smtp_server']}" size="254">
-                                    </div>
-                                    <div class="row">
-                                        <label>SMTP User</label><input type="text" name="email_smtp_user" value="${config['email_smtp_user']}" size="254">
-                                    </div>
-                                    <div class="row">
-                                        <label>SMTP Password</label><input type="password" name="email_smtp_password" value="${config['email_smtp_password'] | h}" size="50">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="text" class="override-float" name="email_smtp_port" value="${config['email_smtp_port']}" size="4"><label>SMTP Port</label>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="email_ssl" value="1" ${config['email_ssl']} /><label>SSL</label>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="email_tls" value="1" ${config['email_tls']} /><label>TLS</label>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="email_onsnatch" value="1" ${config['email_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
+                                <div class="form-row">
+                                    <label for="growl_host">Growl Host</label>
+                                    <input type="text" id="growl_host" name="GrowlHost" value="${headphones.CONFIG.GROWL_HOST|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="growl_password">Growl Password</label>
+                                    <input type="password" id="growl_password" name="GrowlPassword" value="${headphones.CONFIG.GROWL_PASSWORD|h}" autocomplete="new-password" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testGrowl" class="action-btn" data-action="testGrowl">Test Growl</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="prowl_notify">Prowl Notification</label>
+                                    <input type="checkbox" id="prowl_notify" name="ProwlNotify" value="1" %if headphones.CONFIG.PROWL_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="prowl_apikey">Prowl API Key</label>
+                                    <input type="text" id="prowl_apikey" name="ProwlApikey" value="${headphones.CONFIG.PROWL_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testProwl" class="action-btn" data-action="testProwl">Test Prowl</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="nma_notify">NMA Notification</label>
+                                    <input type="checkbox" id="nma_notify" name="NMANotify" value="1" %if headphones.CONFIG.NMA_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="nma_apikey">NMA API Key</label>
+                                    <input type="text" id="nma_apikey" name="NMAApikey" value="${headphones.CONFIG.NMA_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testNMA" class="action-btn" data-action="testNMA">Test NMA</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="pushbullet_notify">Pushbullet Notification</label>
+                                    <input type="checkbox" id="pushbullet_notify" name="PushbulletNotify" value="1" %if headphones.CONFIG.PUSHBULLET_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="pushbullet_apikey">Pushbullet API Key</label>
+                                    <input type="text" id="pushbullet_apikey" name="PushbulletApikey" value="${headphones.CONFIG.PUSHBULLET_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testPushbullet" class="action-btn" data-action="testPushbullet">Test Pushbullet</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="pushover_notify">Pushover Notification</label>
+                                    <input type="checkbox" id="pushover_notify" name="PushoverNotify" value="1" %if headphones.CONFIG.PUSHOVER_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="pushover_apikey">Pushover API Key</label>
+                                    <input type="text" id="pushover_apikey" name="PushoverApikey" value="${headphones.CONFIG.PUSHOVER_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="pushover_userkey">Pushover User Key</label>
+                                    <input type="text" id="pushover_userkey" name="PushoverUserkey" value="${headphones.CONFIG.PUSHOVER_USERKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testPushover" class="action-btn" data-action="testPushover">Test Pushover</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="telegram_notify">Telegram Notification</label>
+                                    <input type="checkbox" id="telegram_notify" name="TelegramNotify" value="1" %if headphones.CONFIG.TELEGRAM_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="telegram_bottoken">Telegram Bot Token</label>
+                                    <input type="text" id="telegram_bottoken" name="TelegramBotToken" value="${headphones.CONFIG.TELEGRAM_BOTTOKEN|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="telegram_chatid">Telegram Chat ID</label>
+                                    <input type="text" id="telegram_chatid" name="TelegramChatID" value="${headphones.CONFIG.TELEGRAM_CHATID|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testTelegram" class="action-btn" data-action="testTelegram">Test Telegram</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="discord_notify">Discord Notification</label>
+                                    <input type="checkbox" id="discord_notify" name="DiscordNotify" value="1" %if headphones.CONFIG.DISCORD_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="discord_webhook">Discord Webhook URL</label>
+                                    <input type="text" id="discord_webhook" name="DiscordWebhook" value="${headphones.CONFIG.DISCORD_WEBHOOK|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testDiscord" class="action-btn" data-action="testDiscord">Test Discord</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="slack_notify">Slack Notification</label>
+                                    <input type="checkbox" id="slack_notify" name="SlackNotify" value="1" %if headphones.CONFIG.SLACK_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="slack_webhook">Slack Webhook URL</label>
+                                    <input type="text" id="slack_webhook" name="SlackWebhook" value="${headphones.CONFIG.SLACK_WEBHOOK|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testSlack" class="action-btn" data-action="testSlack">Test Slack</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="kodi_notify">Kodi Notification</label>
+                                    <input type="checkbox" id="kodi_notify" name="KodiNotify" value="1" %if headphones.CONFIG.KODI_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="kodi_host">Kodi Host</label>
+                                    <input type="text" id="kodi_host" name="KodiHost" value="${headphones.CONFIG.KODI_HOST|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="kodi_username">Kodi Username</label>
+                                    <input type="text" id="kodi_username" name="KodiUsername" value="${headphones.CONFIG.KODI_USERNAME|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="kodi_password">Kodi Password</label>
+                                    <input type="password" id="kodi_password" name="KodiPassword" value="${headphones.CONFIG.KODI_PASSWORD|h}" autocomplete="new-password" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testKodi" class="action-btn" data-action="testKodi">Test Kodi</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="plex_notify">Plex Notification</label>
+                                    <input type="checkbox" id="plex_notify" name="PlexNotify" value="1" %if headphones.CONFIG.PLEX_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="plex_host">Plex Host</label>
+                                    <input type="text" id="plex_host" name="PlexHost" value="${headphones.CONFIG.PLEX_HOST|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="plex_token">Plex Token</label>
+                                    <input type="text" id="plex_token" name="PlexToken" value="${headphones.CONFIG.PLEX_TOKEN|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testPlex" class="action-btn" data-action="testPlex">Test Plex</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="twitter_notify">Twitter Notification</label>
+                                    <input type="checkbox" id="twitter_notify" name="TwitterNotify" value="1" %if headphones.CONFIG.TWITTER_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="twitter_consumer_key">Twitter Consumer Key</label>
+                                    <input type="text" id="twitter_consumer_key" name="TwitterConsumerKey" value="${headphones.CONFIG.TWITTER_CONSUMER_KEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="twitter_consumer_secret">Twitter Consumer Secret</label>
+                                    <input type="text" id="twitter_consumer_secret" name="TwitterConsumerSecret" value="${headphones.CONFIG.TWITTER_CONSUMER_SECRET|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="twitter_access_token">Twitter Access Token</label>
+                                    <input type="text" id="twitter_access_token" name="TwitterAccessToken" value="${headphones.CONFIG.TWITTER_ACCESS_TOKEN|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="twitter_access_secret">Twitter Access Secret</label>
+                                    <input type="text" id="twitter_access_secret" name="TwitterAccessSecret" value="${headphones.CONFIG.TWITTER_ACCESS_SECRET|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="twitterStep1_btn" class="action-btn" data-action="twitterStep1">Get Authorization URL</button>
+                                    <label for="twitter_key">PIN</label>
+                                    <input type="text" id="twitter_key" name="TwitterKey" />
+                                    <button type="button" id="twitterStep2_btn" class="action-btn" data-action="twitterStep2">Confirm Authorization</button>
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="testTwitter" class="action-btn" data-action="testTwitter">Test Twitter</button>
+                                </div>
+
+                                <div class="form-row">
+                                    <label for="osx_notify_notify">OSX Notification</label>
+                                    <input type="checkbox" id="osx_notify_notify" name="OSXNotifyNotify" value="1" %if headphones.CONFIG.OSX_NOTIFY_NOTIFY: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="osx_notify_reg">OSX Notify App</label>
+                                    <input type="text" id="osx_notify_reg" name="OSXNotifyReg" value="${headphones.CONFIG.OSX_NOTIFY_REG|h}" />
+                                    <button type="button" id="osxnotifyregister_btn" class="action-btn" data-action="osxnotifyregister">Register App</button>
                                 </div>
                             </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="growl_enabled" id="growl" value="1" ${config['growl_enabled']} /><label for="growl"><span class="option">Growl</span></label>
-                                </div>
-                                <div id="growloptions">
-                                    <div class="row">
-                                        <label>Growl Host:Port</label><input type="text" name="growl_host" value="${config['growl_host']}" size="30">
-                                    </div>
-                                    <div class="row">
-                                        <label>Growl Password</label><input type="password" name="growl_password" value="${config['growl_password'] | h}" size="30">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="growl_onsnatch" value="1" ${config['growl_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="xbmc_enabled" id="xbmc" value="1" ${config['xbmc_enabled']} /><label for="xbmc"><span class="option">Kodi / XBMC</span></label>
-                                </div>
-                                <div id="xbmcoptions">
-                                    <div class="row">
-                                        <label>Host(s)</label>
-                                        <input type="text" name="xbmc_host" value="${config['xbmc_host']}" size="30">
-                                        <small>e.g. http://localhost:8080. Separate hosts with commas</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Username</label><input type="text" name="xbmc_username" value="${config['xbmc_username']}" size="30">
-                                    </div>
-                                    <div class="row">
-                                        <label>Password</label><input type="password" name="xbmc_password" value="${config['xbmc_password'] | h}" size="30">
-                                    </div>
-                                    <div class="checkbox row">
-                                        <input type="checkbox" name="xbmc_update" value="1" ${config['xbmc_update']} /><label>Update Library</label>
-                                    </div>
-                                    <div class="checkbox row">
-                                        <input type="checkbox" name="xbmc_notify" value="1" ${config['xbmc_notify']} /><label>Send Notifications</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="lms_enabled" id="lms" value="1" ${config['lms_enabled']} /><label for="lms"><span class="option">Logitech Media Server</span></label>
-                                </div>
-                                <div id="lmsoptions">
-                                    <div class="row">
-                                        <label>LMS Host:Port</label>
-                                        <input type="text" name="lms_host" value="${config['lms_host']}" size="30">
-                                        <small>e.g. http://localhost:9000. Seperate hosts with commas</small>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="mpc_enabled" id="mpc" value="1" ${config['mpc_enabled']} /><label for="mpc"><span class="option">MPC</span></label>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="nma_enabled" id="nma" value="1" ${config['nma_enabled']} /><label for="nma"><span class="option">NotifyMyAndroid</span></label>
-                                </div>
-                                <div id="nmaoptions">
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="nma_onsnatch" value="1" ${config['nma_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                    <div class="row">
-                                        <label>API Key</label>
-                                        <input type="text" name="nma_apikey" value="${config['nma_apikey']}" size="30">
-                                        <small>Separate multiple api keys with commas</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Priority</label>
-                                        <select name="nma_priority">
-                                        %for x in [-2,-1,0,1,2]:
-                                        <%
-                                            if config['nma_priority'] == x:
-                                                nma_priority_selected = 'selected'
-                                            else:
-                                                nma_priority_selected = ''
-
-                                            if x == -2:
-                                                nma_priority_value = 'Very Low'
-                                            elif x == -1:
-                                                nma_priority_value = 'Moderate'
-                                            elif x == 0:
-                                                nma_priority_value = 'Normal'
-                                            elif x == 1:
-                                                nma_priority_value = 'High'
-                                            else:
-                                                nma_priority_value = 'Emergency'
-                                        %>
-                                            <option value=${x} ${nma_priority_selected}>${nma_priority_value}</option>
-                                        %endfor
-                                        </select>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="osx_notify_enabled" id="osx_notify" value="1" ${config['osx_notify_enabled']} /><label for="osx_notify"><span class="option">OS X</span></label>
-                                </div>
-                                <div id="osx_notify_options">
-                                    <div class="row">
-                                        <input type="text" id="osx_notify_reg" name="osx_notify_app" value="${config['osx_notify_app']}" size="50"><label>Register Notify App</label>
-                                    </div>
-                                    <div class="row">
-                                        <small>Enter the path/application name to be registered with the Notification Center, default is /Applications/Headphones</small>
-                                    </div>
-                                    <div class="row">
-                                        <input type="button" value="Register" id="osxnotifyregister"><label></label>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="osx_notify_onsnatch" value="1" ${config['osx_notify_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                        </td>
-                        <td>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="plex_enabled" id="plex" value="1" ${config['plex_enabled']} /><label for="plex"><span class="option">Plex</span></label>
-                                </div>
-                                <div id="plexoptions">
-                                    <div class="row">
-                                        <label>Plex Server Host:Port</label>
-                                        <input type="text" name="plex_server_host" value="${config['plex_server_host']}" size="30">
-                                        <small>Host running Plex Media Server (eg. http://192.168.1.100:32400)</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Plex Client Host:Port</label>
-                                        <input type="text" name="plex_client_host" value="${config['plex_client_host']}" size="30">
-                                        <small>Host running Plex Client (eg. http://192.168.1.100:3005)</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Plex Username</label><input type="text" name="plex_username" value="${config['plex_username']}" size="30">
-                                        <small>Username of your Plex client API (blank for none)</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Plex Password</label><input type="password" name="plex_password" value="${config['plex_password'] | h}" size="30">
-                                        <small>Password of your Plex client API (blank for none)</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>Plex Token</label><input type="text" name="plex_token" value="${config['plex_token']}" size="30">
-                                        <small>Plex Token (for use with Plex Home)</small>
-                                    </div>
-                                    <div class="checkbox row">
-                                        <input type="checkbox" name="plex_update" value="1" ${config['plex_update']} /><label>Update Plex Library</label>
-                                    </div>
-                                    <div class="checkbox row">
-                                        <input type="checkbox" name="plex_notify" value="1" ${config['plex_notify']} /><label>Send Notifications to Plex</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} /><label for="prowl"><span class="option">Prowl</span></label>
-                                </div>
-                                <div id="prowloptions">
-                                    <div class="row">
-                                        <label>API key</label><input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="50">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                    <div class="row">
-                                        <label>Priority (-2,-1,0,1 or 2)</label>
-                                        <input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="pushalot_enabled" id="pushalot" value="1" ${config['pushalot_enabled']} /><label for="pushalot"><span class="option">Pushalot</span></label>
-                                </div>
-                                <div id="pushalotoptions">
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="pushalot_onsnatch" value="1" ${config['pushalot_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                    <div class="row">
-                                        <label>Pushalot API Key</label>
-                                        <input type="text" name="pushalot_apikey" value="${config['pushalot_apikey']}" size="30">
-                                        <small>Separate multiple api keys with commas</small>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="pushbullet_enabled" id="pushbullet" value="1" ${config['pushbullet_enabled']} /><label for="pushbullet"><span class="option">Pushbullet</span></label>
-                                </div>
-                                <div id="pushbulletoptions">
-                                    <div class="row">
-                                        <label>Access Token</label><input type="text" name="pushbullet_apikey" value="${config['pushbullet_apikey']}" size="50">
-                                    </div>
-                                    <div class="row">
-                                        <label>Device ID</label><input type="text" name="pushbullet_deviceid" value="${config['pushbullet_deviceid']}" size="50"><small>Leave blank to send to all devices</small>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="pushbullet_onsnatch" value="1" ${config['pushbullet_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="pushover_enabled" id="pushover" value="1" ${config['pushover_enabled']} /><label for="pushover"><span class="option">Pushover</span></label>
-                                </div>
-                                <div id="pushoveroptions">
-                                    <div class="row">
-                                        <label>User Key</label><input type="text" name="pushover_keys" value="${config['pushover_keys']}" size="50">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="pushover_onsnatch" value="1" ${config['pushover_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                    <div class="row">
-                                        <label>Priority (-1,0, or 1)</label>
-                                        <input type="text" name="pushover_priority" value="${config['pushover_priority']}" size="2">
-                                    </div>
-                                    <div class="row">
-                                        <label>API Token (leave blank to use Headphones default)</label><input type="text" name="pushover_apitoken" value="${config['pushover_apitoken']}" size="50">
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="subsonic_enabled" id="subsonic" value="1" ${config['subsonic_enabled']} /><label for="subsonic"><span class="option">Subsonic</span></label>
-                                </div>
-                                <div id="subsonicoptions">
-                                    <div class="row">
-                                        <label>Subsonic URL</label><input type="text" name="subsonic_host" value="${config['subsonic_host']}" size="30">
-                                    </div>
-                                    <div class="row">
-                                        <label>Subsonic Username</label><input type="text" name="subsonic_username" value="${config['subsonic_username']}" size="30">
-                                    </div>
-                                    <div class="row">
-                                        <label>Subsonic Password</label><input type="password" name="subsonic_password" value="${config['subsonic_password'] | h}" size="30">
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" name="synoindex_enabled" id="synoindex" value="1" ${config['synoindex_enabled']} /><label for="synoindex"><span class="option">Synology NAS</span></label>
-                                </div>
-                            </fieldset>
-<!--
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="twitter_enabled" id="twitter" value="1" ${config['twitter_enabled']} /><label for="twitter"><span class="option">Twitter</span></label>
-                                </div>
-                                <div id="twitteroptions">
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="twitter_onsnatch" value="1" ${config['twitter_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                    <div class="row">
-                                        <input type="button" value="Request Authorization" id="twitterStep1" />
-                                    </div>
-                                    <div class="row">
-                                        <input type="text" id="twitter_key" value="" size="35" placeholder="Input Authorization Key" />
-                                        <input type="button" value="Verify Key" id="twitterStep2" />
-                                    </div>
-                                    <div class="row">
-                                        <input type="button" value="Test Twitter" id="testTwitter" />
-                                    </div>
-                                </div>
-                            </fieldset>
--->
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="slack_enabled" id="slack" value="1" ${config['slack_enabled']} /><label for="slack"><span class="option">Slack</span></label>
-                                </div>
-                                <div id="slackoptions">
-                                    <div class="row">
-                                        <label>Slack Webhook</label><input type="text" name="slack_url" value="${config['slack_url']}" size="50">
-                                    </div>
-                                    <div class="row">
-                                        <label>Channel</label><input type="text" name="slack_channel" value="${config['slack_channel']}" size="50">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <label>Emoji</label><input type="text" name="slack_emoji" value="${config['slack_emoji']}" size="50">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="slack_onsnatch" value="1" ${config['slack_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="telegram_enabled" id="telegram" value="1" ${config['telegram_enabled']} /><label for="telegram"><span class="option">Telegram</span></label>
-                                </div>
-                                <div id="telegramoptions">
-                                    <div class="row">
-                                        <label>Bot Token</label><input type="text" name="telegram_token" value="${config['telegram_token']}" size="50"><small>Contact <a href="http://telegram.me/BotFather">@BotFather</a> to create a bot and get its token</small>
-                                    </div>
-                                    <div class="row">
-                                        <label>User ID</label><input type="text" name="telegram_userid" value="${config['telegram_userid']}" size="50"><small>Contact <a href="http://telegram.me/myidbot">@myidbot</a> to get your user ID</small>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="telegram_onsnatch" value="1" ${config['telegram_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <div class="row checkbox left">
-                                    <input type="checkbox" class="bigcheck" name="join_enabled" id="join" value="1" ${config['join_enabled']} /><label for="join"><span class="option">Join</span></label>
-                                </div>
-                                <div id="joinoptions">
-                                    <div class="row">
-                                        <label>Join API Key</label><input type="text" name="join_apikey" value="${config['join_apikey']}" size="50">
-                                    </div>
-                                    <div class="row">
-                                        <label>Device ID(s)</label><input type="text" name="join_deviceid" value="${config['join_deviceid']}" size="50"><small>Comma separated list.  Leave blank to send to all devices</small>
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="join_onsnatch" value="1" ${config['join_onsnatch']} /><label>Notify on snatch?</label>
-                                    </div>
-                                </div>
-                            </fieldset>
-
                         </td>
                     </tr>
                 </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
             </div>
-            <div id="tabs-6">
+
+            <div id="tabs-6" class="ui-tabs-panel">
                 <table class="configtable" summary="Advanced Settings">
                     <tr>
-                        <td>
-                        <fieldset>
-                            <legend>Renaming options</legend>
-                            <div class="row">
-                                <label>Folder Format</label>
-                                <input type="text" name="folder_format" value="${config['folder_format']}" size="43">
-                                <small>Use: $Artist/$artist, $SortArtist/$sortartist, $Album/$album, $Year/$year, $Type/$type (release type) and $First/$first (first letter in artist name), $OriginalFolder/$originalfolder (downloaded directory name). Put optional variables in curly braces, use single-quote marks to escape curly braces literally ('{', '}').<br>E.g.: $Type/$First/$artist/$album{ '['$year']'} = Album/G/girl talk/all day [2010]</small>
-
-                            </div>
-                            <div class="row">
-                                <label>File Format</label>
-                                <input type="text" name="file_format" value="${config['file_format']}" size="43">
-                                <small>Use: In addition to the above, there is also $Title/$title (track title), $Track (track #), $Disc (disc #), $DiscTotal.</small>
-                            </div>
-                            <div class="checkbox row left clearfix nopad">
-                                <input type="checkbox" name="file_underscores" id="file_underscores" value="1" ${config['file_underscores']}/><label>Use underscores instead of spaces</label>
-                            </div>
-                            <div class="checkbox row left clearfix nopad">
-                                <input type="checkbox" name="rename_single_disc_ignore" id="rename_single_disc_ignore" value="1" ${config['rename_single_disc_ignore']}/><label>Don't include disc# for single disc albums</label>
-                            </div>
-                        </fieldset>
-
-                        <fieldset>
-                            <legend>Re-Encoding Options</legend>
-                            <small class="heading"><i class="fa fa-info-circle"></i> Note: this option requires the lame, ffmpeg or xld encoder</small>
-                            <div class="checkbox row left clearfix nopad">
-                                <input type="checkbox" name="music_encoder" id="music_encoder" value="1" ${config['music_encoder']}/><label>Re-encode downloads during postprocessing</label>
-                            </div>
-                            <div id="encoderoptions" class="row clearfix checkbox">
-                                <div class="row">
-                                    <input type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']}/><label>Only re-encode lossless files (.flac)</label>
-                                </div>
-                                <br>
-                                <div class="row">
-                                    <input type="checkbox" name="delete_lossless_files" value="1" ${config['delete_lossless_files']}/><label>Delete original lossless files after encoding</label>
-                                </div>
-                            </div>
-                            <%
-                                if config['encoder'] == 'lame':
-                                    lameselect = 'selected="selected"'
-                                    ffmpegselect = ''
-                                    xldselect = ''
-                                    libavselect = ''
-                                elif config['encoder'] == 'ffmpeg':
-                                    lameselect = ''
-                                    ffmpegselect = 'selected="selected"'
-                                    xldselect = ''
-                                    libavselect = ''
-                                elif config['encoder'] == 'libav':
-                                    lameselect = ''
-                                    ffmpegselect = ''
-                                    xldselect = ''
-                                    libavselect = 'selected="selected"'
-                                else:
-                                    lameselect = ''
-                                    ffmpegselect = ''
-                                    xldselect = 'selected="selected"'
-                                    libavselect = ''
-                            %>
-                            <div class="row">
-                                <label title="Name of encoder to use. Lame, FFmpeg and libav are available for most Linux distributions. On Ubuntu, libav replaces FFmpeg. xld is OS X-only.">
-                                    Encoder
-                                </label>
-                                <select name="encoder" id="encoder">
-                                    <option value="lame" ${lameselect}>lame</option>
-                                    <option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
-                                    <option value="libav" ${libavselect}>libav</option>
-                                    <option value="xld" ${xldselect}>xld</option>
-                                </select>
-                            </div>
-                            <div class="row">
-                                <div class="row">
-                                    <input type="checkbox" name="encoder_multicore" value="1" ${config['encoder_multicore']}/><label>Enable multi-core</label>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="row">
-                                    <label>Multi-core count</label>
-                                    <input type="text" name="encoder_multicore_count" value="${config['encoder_multicore_count']}" size="7">
-                                    <small>Set equal to the number of cores, or 0 for auto</small>
-                                </div>
-                            </div>
-                        </fieldset>
-                        <fieldset>
-                            <legend>Audio Properties</legend>
-                                <div id="lameffmpegproperties">
-                                    <div class="row">
-                                        <label>Format</label>
-                                        <select name="encoderoutputformat">
-                                        %for x in ['mp3', 'ogg', 'm4a']:
-                                            <%
-                                                if config['encoderoutputformat'] == x:
-                                                    outputselect = 'selected'
-                                                else:
-                                                    outputselect = ''
-                                            %>
-                                            <option value=${x} ${outputselect}>${x}</option>
-                                        %endfor
-                                        </select>
-                                    </div>
-                                    <div class="row">
-                                        <label>VBR/CBR</label>
-                                        <select name="encodervbrcbr" id="encodervbrcbr">
-                                        %for x in ['cbr', 'vbr']:
-                                            <%
-                                                if config['encodervbrcbr'] == x:
-                                                    outputselect = 'selected'
-                                                else:
-                                                    outputselect = ''
-                                            %>
-                                            <option value=${x} ${outputselect}>${x}</option>
-                                        %endfor
-                                        </select>
-                                    </div>
-                                    <div id="vbr_options">
-                                        <div class="row">
-                                            <label>Quality</label>
-                                            <select name="encoderquality">
-                                            %for x in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
-                                                <%
-                                                    if config['encoderquality'] == x:
-                                                        outputselect = 'selected'
-                                                    else:
-                                                        outputselect = ''
-                                                %>
-                                                <option value=${x} ${outputselect}>${x}</option>
-                                            %endfor
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div id="cbr_options">
-                                        <div class="row">
-                                            <label>Bitrate</label>
-                                            <select name="bitrate">
-                                            %for x in [64, 128, 192, 256, 320]:
-                                                <%
-                                                    if config["bitrate"] == x:
-                                                        bitrateselected = "selected"
-                                                    else:
-                                                        bitrateselected = ''
-                                                %>
-                                                <option value=${x} ${bitrateselected}> ${x} kbps</option>
-                                            %endfor
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <%
-                                        if config["samplingfrequency"] == 44100:
-                                            freq44100 = 'selected="selected"'
-                                            freq48000 = ''
-                                        else:
-                                            freq44100 = ''
-                                            freq48000 = 'selected="selected"'
-                                    %>
-                                    <div class="row">
-                                        <label>Sampling</label>
-                                        <select name="samplingfrequency">
-                                            <option value=44100 ${freq44100}>44.1 kHz</option>
-                                            <option value=48000 ${freq48000}>48.0 kHz</option>
-                                        </select>
-                                    </div>
-                                </fieldset>
-
-                                <fieldset>
-                                    <legend>Advanced Encoding Options</legend>
-                                    <div class="row">
-                                        <label>Arguments</label>
-                                        <input type="text" name="advancedencoder" value="${config['advancedencoder']}" size="43">
-                                        <small>Ignores all of the above options</small>
-                                    </div>
-                                </fieldset>
-                            </div>
-
-                            <div id="xldproperties">
-                                <div class="row">
-                                    <label>XLD Profile</label>
-                                    <input type="text" name="xldprofile" value="${config['xldprofile']}" size="43">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <label>Extension</label>
-                                <input type="text" name="encoderoutputformat" value="${config['encoderoutputformat']}" size="43">
-                                <small>If different from format selected above</small>
-                            </div>
-                            <div class="row">
-                                <label>Path to Encoder</label>
-                                <input type="text" name="encoder_path" value="${config['encoder_path']}" size="43">
-                            </div>
-                        </td>
                         <td>
                             <fieldset>
-                                <legend>Miscellaneous</legend>
-                                <div class="row checkbox left clearfix nopad">
-                                    <input type="checkbox" name="include_extras" id="include_extras" value="1" ${config['include_extras']} /><label>Automatically include extras when adding an artist <br>
-                                    <%
-                                        which_extras_selected = ""
-                                        for extra in config['extras']:
-                                            if config['extras'][extra] == "checked":
-                                                which_extras_selected += string.capwords(extra) + ', '
-                                                # Chop off the last comma & space
-                                        if which_extras_selected:
-                                            which_extras_selected = which_extras_selected[:-2]
-                                        else:
-                                            which_extras_selected = "None"
-                                    %>
-                                    <small>Currently Selected: ${which_extras_selected} <a href="javascript:void(0)" id="modify_extras">(Change)</a></small></label>
-                                    <div id="dialog" title="Choose Which Extras to Include" style="display:none" class="configtable">
-                                    %for extra in config['extras']:
-                                        <input type="checkbox" id="${extra}_temp" name="${extra}_temp" value="1" ${config['extras'][extra]} />${string.capwords(extra)}<br>
-                                    %endfor
-                                    </div>
-                                    <div style="display:none">
-                                    %for extra in config['extras']:
-                                        <input type="checkbox" id="${extra}" name="${extra}" value="1" ${config['extras'][extra]} />${string.capwords(extra)}<br>
-                                    %endfor
-                                    </div>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" name="official_releases_only" value="1" ${config['official_releases_only']} />Only include 'official' extras (i.e. no bootlegs, promos, etc.)</label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" name="autowant_upcoming" value="1" ${config['autowant_upcoming']} />Automatically mark upcoming albums as wanted</label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" name="autowant_all" value="1" ${config['autowant_all']} />Automatically mark all albums as wanted</label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" title="Automatically mark manually added albums from search results as wanted"
-                                           name="autowant_manually_added" value="1" ${config['autowant_manually_added']} />Automatically mark manually added albums as wanted</label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" title="Wait until album release date before searching"
-                                           name="wait_until_release_date" value="1" ${config['wait_until_release_date']} />Wait until an album's release date before searching</label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label title="Freeze the database, so new artists won't be added automatically. Use this if Headphones adds artists because due to wrong snatches. This check is skipped when the folder name is appended with release group ID.">
-                                        Don't add new artists when post-processing albums
-                                        <input type="checkbox" name="freeze_db" id="freeze_db" value="1" ${config['freeze_db']} />
-                                    </label>
-                                </div>
-                                <div class="row checkbox left clearfix nopad">
-                                    <label><input type="checkbox" title="Stop post-processing if no good metadata match found"
-                                           name="do_not_process_unmatched" value="1" ${config['do_not_process_unmatched']} />Stop post-processing if no good metadata match found</label>
-                                </div>
-                                <div class="row checkbox left clearfix">
-                                    <label title="Use ID3v2.3 instead of ID3v2.4">
-                                        Tag using ID3v2.3 instead of ID3v2.4
-                                        <input type="checkbox" name="idtag" value="1" ${config['idtag']}>
-                                    </label>
-                                </div>
-                                <div class="row">
-                                    <label>Folder Permissions</label>
-                                    <input type="text" name="folder_permissions" value="${config['folder_permissions']}" size="7">
-                                </div>
-                                <div class="row">
-                                    <label>File Permissions</label>
-                                    <input type="text" name="file_permissions" value="${config['file_permissions']}" size="7">
-                                </div>
-                                <div class="row">
-                                    <label>Cache Size (in MB)</label>
-                                    <input type="text" name="cache_sizemb" value="${config['cache_sizemb']}" size="7">
-                                </div>
-                            </fieldset>
-                            <!--<fieldset>
-                                <legend>Interface</legend>
-                                <div class="row" style="display: none">
-                                    <label>Interface</label>
-                                    <select name="interface">
-                                    %for interface in config['interface_list']:
-                                    <%
-                                        if interface == headphones.CONFIG.INTERFACE:
-                                            selected = 'selected="selected"'
-                                        else:
-                                            selected = ''
-                                    %>
-                                        <option value="${interface}" ${selected}>${interface}</option>
-                                    %endfor
+                                <legend>Advanced Options</legend>
+                                <%-- Advanced settings fields would go here --%>
+                                <%-- Adding placeholders based on typical advanced settings --%>
+                                <div class="form-row">
+                                    <label for="log_level">Log Level</label>
+                                    <select id="log_level" name="LogLevel">
+                                        <option value="DEBUG" %if headphones.CONFIG.LOG_LEVEL == 'DEBUG': selected %endif>DEBUG</option>
+                                        <option value="INFO" %if headphones.CONFIG.LOG_LEVEL == 'INFO': selected %endif>INFO</option>
+                                        <option value="WARNING" %if headphones.CONFIG.LOG_LEVEL == 'WARNING': selected %endif>WARNING</option>
+                                        <option value="ERROR" %if headphones.CONFIG.LOG_LEVEL == 'ERROR': selected %endif>ERROR</option>
                                     </select>
                                 </div>
-                            </fieldset>-->
-                            <fieldset>
-                                <legend>Directories</legend>
-                                <div class="row">
-                                    <label>Log Directory</label>
-                                    <input type="text" name="log_dir" value="${config['log_dir']}" size="50">
+                                <div class="form-row">
+                                    <label for="proxy_host">Proxy Host</label>
+                                    <input type="text" id="proxy_host" name="ProxyHost" value="${headphones.CONFIG.PROXY_HOST|h}" />
                                 </div>
-                                <div class="row">
-                                    <label>Cache Directory</label>
-                                    <input type="text" name="cache_dir" value="${config['cache_dir']}" size="50">
+                                <div class="form-row">
+                                    <label for="proxy_port">Proxy Port</label>
+                                    <input type="text" id="proxy_port" name="ProxyPort" value="${headphones.CONFIG.PROXY_PORT|h}" />
                                 </div>
-                                <div class="row">
-                                    <label>Post Processing Temporary Directory</label>
-                                    <input type="text" name="keep_torrent_files_dir" value="${config['keep_torrent_files_dir']}" size="50" title="Enter the directory to preserve files for seeding, default is system temp directory">
+                                <div class="form-row">
+                                    <label for="proxy_username">Proxy Username</label>
+                                    <input type="text" id="proxy_username" name="ProxyUsername" value="${headphones.CONFIG.PROXY_USERNAME|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="proxy_password">Proxy Password</label>
+                                    <input type="password" id="proxy_password" name="ProxyPassword" value="${headphones.CONFIG.PROXY_PASSWORD|h}" autocomplete="new-password" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="folder_permissions">Folder Permissions (Octal)</label>
+                                    <input type="text" id="folder_permissions" name="FolderPermissions" value="${headphones.CONFIG.FOLDER_PERMISSIONS|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="file_permissions">File Permissions (Octal)</label>
+                                    <input type="text" id="file_permissions" name="FilePermissions" value="${headphones.CONFIG.FILE_PERMISSIONS|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="chown_downloads">Chown Downloads</label>
+                                    <input type="checkbox" id="chown_downloads" name="ChownDownloads" value="1" %if headphones.CONFIG.CHOWN_DOWNLOADS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="chmod_downloads">Chmod Downloads</label>
+                                    <input type="checkbox" id="chmod_downloads" name="ChmodDownloads" value="1" %if headphones.CONFIG.CHMOD_DOWNLOADS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="skip_failed_downloads">Skip Failed Downloads</label>
+                                    <input type="checkbox" id="skip_failed_downloads" name="SkipFailedDownloads" value="1" %if headphones.CONFIG.SKIP_FAILED_DOWNLOADS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="use_fancybox">Use Fancybox</label>
+                                    <input type="checkbox" id="use_fancybox" name="UseFancybox" value="1" %if headphones.CONFIG.USE_FANCYBOX: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_xem">Enable XEM</label>
+                                    <input type="checkbox" id="enable_xem" name="EnableXEM" value="1" %if headphones.CONFIG.ENABLE_XEM: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_metacritic">Enable Metacritic Scores</label>
+                                    <input type="checkbox" id="enable_metacritic" name="EnableMetacritic" value="1" %if headphones.CONFIG.ENABLE_METACRITIC: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_fanart_tv">Enable Fanart.tv</label>
+                                    <input type="checkbox" id="enable_fanart_tv" name="EnableFanartTv" value="1" %if headphones.CONFIG.ENABLE_FANART_TV: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="fanart_apikey">Fanart.tv API Key</label>
+                                    <input type="text" id="fanart_apikey" name="FanartApikey" value="${headphones.CONFIG.FANART_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_discogs">Enable Discogs</label>
+                                    <input type="checkbox" id="enable_discogs" name="EnableDiscogs" value="1" %if headphones.CONFIG.ENABLE_DISCOGS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="discogs_token">Discogs Token</label>
+                                    <input type="text" id="discogs_token" name="DiscogsToken" value="${headphones.CONFIG.DISCOGS_TOKEN|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_lastfm">Enable Last.fm</label>
+                                    <input type="checkbox" id="enable_lastfm" name="EnableLastFm" value="1" %if headphones.CONFIG.ENABLE_LAST_FM: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="lastfm_apikey">Last.fm API Key</label>
+                                    <input type="text" id="lastfm_apikey" name="LastFmApikey" value="${headphones.CONFIG.LAST_FM_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="lastfm_secret">Last.fm Secret</label>
+                                    <input type="text" id="lastfm_secret" name="LastFmSecret" value="${headphones.CONFIG.LAST_FM_SECRET|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_lyrics">Enable Lyrics</label>
+                                    <input type="checkbox" id="enable_lyrics" name="EnableLyrics" value="1" %if headphones.CONFIG.ENABLE_LYRICS: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_audiodb">Enable AudioDB</label>
+                                    <input type="checkbox" id="enable_audiodb" name="EnableAudioDb" value="1" %if headphones.CONFIG.ENABLE_AUDIODB: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="audiodb_apikey">AudioDB API Key</label>
+                                    <input type="text" id="audiodb_apikey" name="AudioDbApikey" value="${headphones.CONFIG.AUDIO_DB_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_gracenote">Enable Gracenote</label>
+                                    <input type="checkbox" id="enable_gracenote" name="EnableGracenote" value="1" %if headphones.CONFIG.ENABLE_GRACENOTE: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="gracenote_apikey">Gracenote API Key</label>
+                                    <input type="text" id="gracenote_apikey" name="GracenoteApikey" value="${headphones.CONFIG.GRACENOTE_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_last_fm_scrobbling">Enable Last.fm Scrobbling</label>
+                                    <input type="checkbox" id="enable_last_fm_scrobbling" name="EnableLastFmScrobbling" value="1" %if headphones.CONFIG.ENABLE_LAST_FM_SCROBBLING: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <button type="button" id="lastfm_auth_btn" class="action-btn" data-action="lastFmAuth">Authorize Last.fm</button>
+                                </div>
+                                <div class="form-row">
+                                    <label for="enable_songkick">Enable Songkick</label>
+                                    <input type="checkbox" id="enable_songkick" name="EnableSongkick" value="1" %if headphones.CONFIG.ENABLE_SONGKICK: checked %endif />
+                                </div>
+                                <div class="form-row">
+                                    <label for="songkick_apikey">Songkick API Key</label>
+                                    <input type="text" id="songkick_apikey" name="SongkickApikey" value="${headphones.CONFIG.SONGKICK_APIKEY|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="songkick_location">Songkick Location</label>
+                                    <input type="text" id="songkick_location" name="SongkickLocation" value="${headphones.CONFIG.SONGKICK_LOCATION|h}" />
+                                </div>
+                                <div class="form-row">
+                                    <label for="songkick_filter_enabled">Filter by Songkick Location</label>
+                                    <input type="checkbox" id="songkick_filter_enabled" name="SongkickFilterEnabled" value="1" %if headphones.CONFIG.SONGKICK_FILTER_ENABLED: checked %endif />
                                 </div>
                             </fieldset>
-
-                            <fieldset>
-                                <legend>Last.fm</legend>
-                                <div id="lastfmoptions">
-                                    <div class="row">
-                                        <label>API Key</label>
-                                        <input type="text" name="lastfm_apikey" value="${config['lastfm_apikey']}" size="40" />
-                                    </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <legend>Songkick</legend>
-                                <div class="row checkbox">
-                                    <input type="checkbox" name="songkick_enabled" id="songkick" value="1" ${config['songkick_enabled']} /><label>Show concert info</label>
-                                </div>
-                                <div id="songkickoptions">
-                                  <div class="row">
-                                      <label>API Key</label>
-                                      <input type="text" name="songkick_apikey" value="${config['songkick_apikey']}" size="40">
-                                  </div>
-                                  <div class="row checkbox">
-                                      <input type="checkbox" name="songkick_filter_enabled" id="songkick_filter" value="1" ${config['songkick_filter_enabled']} /><label>Filter by Metro Area</label>
-                                  </div>
-                                  <div id="songkick_filteroptions">
-                                    <div class="row">
-                                      <label>Metro Area ID</label>
-                                      <input type="text" name="songkick_location" value="${config['songkick_location']}" size="10" title="Enter the Metro Area ID, e.g. the ID for London is 24426, this can be found by clicking the link and searching/selecting the city, e.g. London should find http://www.songkick.com/metro_areas/24426-uk-london">
-                                        <a target="_blank" href="http://www.songkick.com/developer/location-search">Find Area ID</a>
-                                    </div>
-                                  </div>
-                                </div>
-                            </fieldset>
-
-                            <fieldset>
-                                <legend>Musicbrainz</legend>
-                                <div class="row">
-                                    <label>Musicbrainz Mirror</label>
-                                    <select name="mirror" id="mirror">
-                                    %for mirror in config['mirrorlist']:
-                                        <%
-                                            if mirror == headphones.CONFIG.MIRROR:
-                                                selected = 'selected="selected"'
-                                            else:
-                                                selected = ''
-                                        %>
-                                        <option value="${mirror}" ${selected}>${mirror}</option>
-                                    %endfor
-                                    </select>
-                                </div>
-                                <div id="customoptions">
-                                    <div class="row">
-                                        <label>Host</label><input type="text" name="customhost" value="${config['customhost']}" size="20">
-                                    </div>
-                                    <div class="row">
-                                        <label>Port</label><input type="text" name="customport" value="${config['customport']}" size="8">
-                                    </div>
-                                    <div class="row checkbox">
-                                        <input type="checkbox" name="customauth" id="customauth" value="1" ${config['customauth']} /><label>Requires Authentication</label>
-                                    </div>
-                                    <div id="customauth_options">
-                                        <div class="row">
-                                            <label>Username</label><input type="text" class="customuser" name="customuser" value="${config['customuser']}" size="20">
-                                        </div>
-                                        <div class="row">
-                                            <label>Password</label><input type="password" class="custompass" name="custompass" value="${config['custompass'] | h}" size="15"><br>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <label>Sleep Interval</label><input type="text" name="customsleep" value="${config['customsleep']}" size="4">
-                                    </div>
-                                </div>
-
-                                <div id="hpserveroptions">
-                                    <div class="row">
-                                        <label>Username</label><input type="text" class="hpuser" name="hpuser" value="${config['hpuser']}" size="20">
-                                    </div>
-                                    <div class="row">
-                                        <label>Password</label><input type="password" class="hppass" name="hppass" value="${config['hppass'] | h}" size="20"><br>
-                                        <a href="https://headphones.codeshy.com/vip" id="vipserver" target="_blank">Get an Account!</a>
-                                    </div>
-                                </div>
-                            </fieldset>
-
                         </td>
                     </tr>
                 </table>
-                <input type="button" class="configsubmit" value="Save Changes" onclick="doAjaxCall('configUpdate',$(this),'tabs',true);return false;" data-success="Changes saved successfully">
             </div>
-        </form>
-    </div>
+
+            <div class="submit-buttons">
+                <button type="submit" class="save-btn"><i class="fa fa-save"></i> Save Changes</button>
+                <button type="reset" class="reset-btn"><i class="fa fa-undo"></i> Reset</button>
+            </div>
+        </div>
+    </form>
+</%def>
+
+<%def name="headIncludes()">
+    ${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
+    <link rel="stylesheet" href="interfaces/default/css/data_table.css"> <%-- Kept for now, evaluate if still needed --%>
 </%def>
 
 <%def name="javascriptIncludes()">
+    ${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
+    <script src="js/libs/jquery.dataTables.min.js"></script> <%-- Keep if DataTables is used on tables that remain --%>
+
     <script>
+        // Define a global object for page-specific functions to avoid polluting global scope directly
+        var ConfigPage = ConfigPage || {};
 
-        hideServerDivs = function () {
-                $("#customoptions").slideUp();
-                $("#hpserveroptions").slideUp();
-        };
-
-        hideEncoderDivs = function () {
-                $("#lameffmpegproperties").slideUp();
-                $("#xldproperties").slideUp();
-        };
-        hideEncodingOptionDivs = function () {
-                $("#vbr_options").slideUp();
-                $("#cbr_options").slideUp();
-        };
-
-        handleNewServerSelection = function () {
-                hideServerDivs();
-
-                switch ($(this).val()) {
-                        case 'custom':
-                            $("#customoptions").slideDown();
-                        break;
-                        case 'headphones':
-                            $("#hpserveroptions").slideDown();
-                        break;
+        ConfigPage.initTabs = function() {
+            // Initialize jQuery UI Tabs
+            $("#tabs").tabs({
+                activate: function(event, ui) {
+                    // This callback fires when a new tab is selected
+                    // If you have specific actions to perform when a tab becomes active, add them here.
+                    // For example, if a tab's content is loaded via AJAX, you might trigger that load here.
+                    console.log("Tab changed to: " + ui.newTab.text());
                 }
-        };
-
-        handleNewEncoderSelection = function () {
-                hideEncoderDivs();
-
-                switch ($(this).val()) {
-                        case 'xld':
-                            $("#xldproperties").slideDown();
-                            break;
-                        case 'ffmpeg':
-                            $("#lameffmpegproperties").slideDown();
-                            break;
-                        case 'libav':
-                            $("#lameffmpegproperties").slideDown();
-                            break;
-                        case 'lame':
-                            $("#lameffmpegproperties").slideDown();
-                            break;
-                }
-        };
-
-        handleNewEncodingOptionSelection = function () {
-                hideEncodingOptionDivs();
-
-                switch ($(this).val()) {
-                        case 'vbr':
-                            $("#vbr_options").slideDown();
-                            break;
-                        case 'cbr':
-                            $("#cbr_options").slideDown();
-                            break;
-                }
-        };
-
-        function openExtrasDialog() {
-            $("#dialog").dialog({ close: function(){
-                var elem = '<input type="button" data-success="Changes saved successfully">';
-                doAjaxCall('configUpdate', elem,'tabs',true);
-            }}).dialog("open");
-        };
-
-        function initThisPage()
-        {
-                if ($("#api_enabled").is(":checked"))
-                        {
-                            $("#apioptions").show();
-                        }
-                else
-                        {
-                            $("#apioptions").hide();
-                        }
-
-                $("#api_enabled").click(function(){
-                        if ($("#api_enabled").is(":checked"))
-                        {
-                            $("#apioptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#apioptions").slideUp();
-                        }
-                });
-
-        $('#api_key').click(function(){ $('#api_key').select() });
-        $("#generate_api").click(function(){
-            $.get('generateAPI',
-                function(data){
-                    if (data.error != undefined) {
-                        alert(data.error);
-                        return;
-                    }
-                    $('#api_key').val(data);
             });
-        });
-                if ($("#customauth").is(":checked"))
-                        {
-                            $("#customauth_options").show();
-                        }
-                else
-                        {
-                            $("#customauth_options").hide();
-                        }
+        };
 
-                $("#customauth").click(function(){
-                        if ($("#customauth").is(":checked"))
-                        {
-                            $("#customauth_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#customauth_options").slideUp();
-                        }
-                });
-                if ($("#enable_https").is(":checked"))
-                        {
-                            $("#https_options").show();
-                        }
-                else
-                        {
-                            $("#https_options").hide();
-                        }
+        ConfigPage.initActionButtons = function() {
+            // Delegated event handler for all buttons with class 'action-btn'
+            // This handles API key generation, notification tests, and Twitter authorization steps
+            $('#configUpdateForm').on('click', '.action-btn', function(e) {
+                e.preventDefault();
+                var $this = $(this);
+                var action = $this.data('action');
+                var url = '/' + action; // Assuming actions map directly to API endpoints
 
-                $("#enable_https").click(function(){
-                        if ($("#enable_https").is(":checked"))
-                        {
-                            $("#https_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#https_options").slideUp();
-                        }
-                });
-                if ($("#music_encoder").is(":checked"))
-                        {
-                            $("#encoderoptions").show();
-                        }
-                else
-                        {
-                            $("#encoderoptions").hide();
-                        }
+                var data = {}; // Data to send with the AJAX request
 
-                $("#music_encoder").click(function(){
-                        if ($("#music_encoder").is(":checked"))
-                        {
-                            $("#encoderoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#encoderoptions").slideUp();
-                        }
-                });
+                // Specific logic for different actions
+                if (action === 'generateAPIKey') {
+                    // No specific data needed, API key is generated on server
+                } else if (action === 'testEmail') {
+                    // Data for testing email might come from form fields, but usually handled server-side for security
+                } else if (action === 'twitterStep1') {
+                    // Open a new window for Twitter authorization
+                    window.open(url, '_blank');
+                    return; // Prevent further AJAX call for twitterStep1
+                } else if (action === 'twitterStep2') {
+                    data.key = $('#twitter_key').val();
+                } else if (action === 'osxnotifyregister') {
+                    data.app = $('#osx_notify_reg').val();
+                }
 
-                if ($("#embed_album_art").is(":checked"))
-                        {
-                            $("#album_art_size_options").show();
-                        }
-                        else
-                        {
-                            if (!$("#add_album_art").is(":checked"))
-                            {
-                                $("#album_art_size_options").hide();
-                              }
-                        }
-
-                $("#embed_album_art").click(function(){
-                        if ($("#embed_album_art").is(":checked"))
-                        {
-                            $("#album_art_size_options").slideDown();
-                        }
-                        else
-                        {
-                            if (!$("#add_album_art").is(":checked"))
-                            {
-                                $("#album_art_size_options").slideUp();
-                            }
-                        }
-                });
-
-                if ($("#add_album_art").is(":checked"))
-                        {
-                            $("#album_art_options").show();
-                            $("#album_art_size_options").show();
-                        }
-                else
-                        {
-                            $("#album_art_options").hide();
-                        }
-
-                $("#add_album_art").click(function(){
-                        if ($("#add_album_art").is(":checked"))
-                        {
-                            $("#album_art_options").slideDown();
-                            $("#album_art_size_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#album_art_options").slideUp();
-                            if (!$("#embed_album_art").is(":checked"))
-                            {
-                                $("#album_art_size_options").slideUp();
-                            }
-                        }
-                });
-
-                if ($("#move_files").is(":checked"))
-                        {
-                            $("#move_files_options").show();
-                        }
-                else
-                        {
-                            $("#move_files_options").hide();
-                        }
-
-                $("#move_files").click(function(){
-                        if ($("#move_files").is(":checked"))
-                        {
-                            $("#move_files_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#move_files_options").slideUp();
-                        }
-                });
-
-                if ($("#growl").is(":checked"))
-                        {
-                            $("#growloptions").show();
-                        }
-                else
-                        {
-                            $("#growloptions").hide();
-                        }
-
-                $("#growl").click(function(){
-                        if ($("#growl").is(":checked"))
-                        {
-                            $("#growloptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#growloptions").slideUp();
-                        }
-                });
-
-                if ($("#prowl").is(":checked"))
-                        {
-                            $("#prowloptions").show();
-                        }
-                else
-                        {
-                            $("#prowloptions").hide();
-                        }
-
-                $("#prowl").click(function(){
-                        if ($("#prowl").is(":checked"))
-                        {
-                            $("#prowloptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#prowloptions").slideUp();
-                        }
-                });
-
-                if ($("#xbmc").is(":checked"))
-                        {
-                            $("#xbmcoptions").show();
-                        }
-                else
-                        {
-                            $("#xbmcoptions").hide();
-                        }
-
-                $("#xbmc").click(function(){
-                        if ($("#xbmc").is(":checked"))
-                        {
-                            $("#xbmcoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#xbmcoptions").slideUp();
-                        }
-                });
-
-                if ($("#lms").is(":checked"))
-                        {
-                            $("#lmsoptions").show();
-                        }
-                else
-                        {
-                            $("#lmsoptions").hide();
-                        }
-
-                $("#lms").click(function(){
-                        if ($("#lms").is(":checked"))
-                        {
-                            $("#lmsoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#lmsoptions").slideUp();
-                        }
-                });
-
-                if ($("#plex").is(":checked"))
-                        {
-                            $("#plexoptions").show();
-                        }
-                else
-                        {
-                            $("#plexoptions").hide();
-                        }
-
-                $("#plex").click(function(){
-                        if ($("#plex").is(":checked"))
-                        {
-                            $("#plexoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#plexoptions").slideUp();
-                        }
-                });
-
-                if ($("#nma").is(":checked"))
-                        {
-                            $("#nmaoptions").show();
-                        }
-                else
-                        {
-                            $("#nmaoptions").hide();
-                        }
-
-                $("#nma").click(function(){
-                        if ($("#nma").is(":checked"))
-                        {
-                            $("#nmaoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#nmaoptions").slideUp();
-                        }
-                });
-
-                if ($("#pushalot").is(":checked"))
-                        {
-                            $("#pushalotoptions").show();
-                        }
-                else
-                        {
-                            $("#pushalotoptions").hide();
-                        }
-
-                $("#pushalot").click(function(){
-                        if ($("#pushalot").is(":checked"))
-                        {
-                            $("#pushalotoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#pushalotoptions").slideUp();
-                        }
-                });
-
-                if ($("#pushover").is(":checked"))
-                        {
-                            $("#pushoveroptions").show();
-                        }
-                else
-                        {
-                            $("#pushoveroptions").hide();
-                        }
-
-                $("#pushover").click(function(){
-                        if ($("#pushover").is(":checked"))
-                        {
-                            $("#pushoveroptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#pushoveroptions").slideUp();
-                        }
-                });
-
-                if ($("#pushbullet").is(":checked"))
-                        {
-                            $("#pushbulletoptions").show();
-                        }
-                else
-                        {
-                            $("#pushbulletoptions").hide();
-                        }
-
-
-                $("#pushbullet").click(function(){
-                        if ($("#pushbullet").is(":checked"))
-                        {
-                            $("#pushbulletoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#pushbulletoptions").slideUp();
-                        }
-                });
-
-                if ($("#join").is(":checked"))
-                        {
-                            $("#joinoptions").show();
-                        }
-                else
-                        {
-                            $("#joinoptions").hide();
-                        }
-
-
-                $("#join").click(function(){
-                        if ($("#join").is(":checked"))
-                        {
-                            $("#joinoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#joinoptions").slideUp();
-                        }
-                });
-
-                if ($("#twitter").is(":checked"))
-                        {
-                            $("#twitteroptions").show();
-                        }
-                else
-                        {
-                            $("#twitteroptions").hide();
-                        }
-
-                $("#twitter").click(function(){
-                        if ($("#twitter").is(":checked"))
-                        {
-                            $("#twitteroptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#twitteroptions").slideUp();
-                        }
-                });
-
-                if ($("#slack").is(":checked"))
-                        {
-                            $("#slackoptions").show();
-                        }
-                else
-                        {
-                            $("#slackoptions").hide();
-                        }
-
-                $("#slack").click(function(){
-                        if ($("#slack").is(":checked"))
-                        {
-                            $("#slackoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#slackoptions").slideUp();
-                        }
-                });
-
-
-                if ($("#telegram").is(":checked"))
-                        {
-                            $("#telegramoptions").show();
-                        }
-                else
-                        {
-                            $("#telegramoptions").hide();
-                        }
-
-                $("#telegram").click(function(){
-                        if ($("#telegram").is(":checked"))
-                        {
-                            $("#telegramoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#telegramoptions").slideUp();
-                        }
-                });
-
-                if ($("#osx_notify").is(":checked"))
-                        {
-                            $("#osx_notify_options").show();
-                        }
-                else
-                        {
-                            $("#osx_notify_options").hide();
-                        }
-
-                $("#osx_notify").click(function(){
-                        if ($("#osx_notify").is(":checked"))
-                        {
-                            $("#osx_notify_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#osx_notify_options").slideUp();
-                        }
-                });
-
-                if ($("#boxcar").is(":checked"))
-                        {
-                            $("#boxcar_options").show();
-                        }
-                else
-                        {
-                            $("#boxcar_options").hide();
-                        }
-
-                $("#boxcar").click(function(){
-                        if ($("#boxcar").is(":checked"))
-                        {
-                            $("#boxcar_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#boxcar_options").slideUp();
-                        }
-                });
-
-                if ($("#subsonic").is(":checked"))
-                        {
-                            $("#subsonicoptions").show();
-                        }
-                else
-                        {
-                            $("#subsonicoptions").hide();
-                        }
-
-                $("#subsonic").click(function(){
-                        if ($("#subsonic").is(":checked"))
-                        {
-                            $("#subsonicoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#subsonicoptions").slideUp();
-                        }
-                });
-
-               if ($("#email").is(":checked"))
-                        {
-                            $("#email_options").show();
-                        }
-                else
-                        {
-                            $("#email_options").hide();
-                        }
-
-                $("#email").click(function(){
-                        if ($("#email").is(":checked"))
-                        {
-                            $("#email_options").slideDown();
-                        }
-                        else
-                        {
-                            $("#email_options").slideUp();
-                        }
-                });
-
-                if ($("#songkick").is(":checked"))
-                        {
-                            $("#songkickoptions").show();
-                        }
-                else
-                        {
-                            $("#songkickoptions").hide();
-                        }
-
-                $("#songkick").click(function(){
-                        if ($("#songkick").is(":checked"))
-                        {
-                            $("#songkickoptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#songkickoptions").slideUp();
-                        }
-                });
-
-                if ($("#songkick_filter").is(":checked"))
-                        {
-                            $("#songkick_filteroptions").show();
-                        }
-                else
-                        {
-                            $("#songkick_filteroptions").hide();
-                        }
-
-                $("#songkick_filter").click(function(){
-                        if ($("#songkick_filter").is(":checked"))
-                        {
-                            $("#songkick_filteroptions").slideDown();
-                        }
-                        else
-                        {
-                            $("#songkick_filteroptions").slideUp();
-                        }
-                });
-
-                if ($("#lossless_only").is(":checked"))
-                        {
-                            $("#lossless_only_options").show();
-                        }
-                else
-                        {
-                            $("#lossless_only_options").hide();
-                        }
-
-                if ($("#preferred_bitrate").is(":checked"))
-                        {
-                            $("#preferred_bitrate_options").show();
-                        }
-                else
-                        {
-                            $("#preferred_bitrate_options").hide();
-                        }
-
-                if ($("#nzb_downloader_sabnzbd").is(":checked"))
-                        {
-                            $("#sabnzbd_options").show();
-                            $("#nzbget_options,#blackhole_options").hide();
-                        }
-                if ($("#nzb_downloader_nzbget").is(":checked"))
-                        {
-                            $("#sabnzbd_options,#blackhole_options").hide();
-                            $("#nzbget_options").show();
-                        }
-                if ($("#nzb_downloader_blackhole").is(":checked"))
-                        {
-                            $("#sabnzbd_options,#nzbget_options").hide();
-                            $("#blackhole_options").show();
-                        }
-
-                if ($("#torrent_downloader_blackhole").is(":checked"))
-                        {
-                            $("#transmission_options,#utorrent_options,#deluge_options,#qbittorrent_options").hide();
-                            $("#torrent_blackhole_options").show();
-                        }
-                if ($("#torrent_downloader_transmission").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#utorrent_options,#deluge_options,#qbittorrent_options").hide();
-                            $("#transmission_options").show();
-                        }
-                if ($("#torrent_downloader_utorrent").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#transmission_options,#deluge_options,#qbittorrent_options").hide();
-                            $("#utorrent_options").show();
-                        }
-                if ($("#torrent_downloader_qbittorrent").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#transmission_options,#utorrent_options,#deluge_options").hide();
-                            $("#qbittorrent_options").show();
-                        }
-                if ($("#torrent_downloader_deluge").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#transmission_options,#utorrent_options,#qbittorrent_options").hide();
-                            $("#deluge_options").show();
-                        }
-
-                $('input[type=radio]').change(function(){
-                        if ($("#preferred_bitrate").is(":checked"))
-                        {
-                            $("#preferred_bitrate_options").slideDown("fast");
-                            $("#lossless_only_options").slideUp("fast");
-                        }
-                        if ($("#preferred_quality0").is(":checked"))
-                        {
-                            $("#preferred_bitrate_options").slideUp("fast");
-                            $("#lossless_only_options").slideUp("fast");
-                        }
-                        if ($("#preferred_quality1").is(":checked"))
-                        {
-                            $("#preferred_bitrate_options").slideUp("fast");
-                            $("#lossless_only_options").slideUp("fast");
-                        }
-                        if ($("#lossless_only").is(":checked"))
-                        {
-                            $("#lossless_only_options").slideDown("fast");
-                            $("#preferred_bitrate_options").slideUp("fast");
-                        }
-                        if ($("#nzb_downloader_sabnzbd").is(":checked"))
-                        {
-                            $("#nzbget_options,#blackhole_options").fadeOut("fast", function() { $("#sabnzbd_options").fadeIn() });
-                        }
-                        if ($("#nzb_downloader_nzbget").is(":checked"))
-                        {
-                            $("#sabnzbd_options,#blackhole_options").fadeOut("fast", function() { $("#nzbget_options").fadeIn() });
-                        }
-                        if ($("#nzb_downloader_blackhole").is(":checked"))
-                        {
-                            $("#sabnzbd_options,#nzbget_options").fadeOut("fast", function() { $("#blackhole_options").fadeIn() });
-                        }
-                        if ($("#torrent_downloader_blackhole").is(":checked"))
-                        {
-                            $("#transmission_options,#utorrent_options,#deluge_options,#qbittorrent_options").fadeOut("fast", function() { $("#torrent_blackhole_options").fadeIn() });
-                        }
-                        if ($("#torrent_downloader_transmission").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#utorrent_options,#deluge_options,#qbittorrent_options").fadeOut("fast", function() { $("#transmission_options").fadeIn() });
-                        }
-                        if ($("#torrent_downloader_utorrent").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#transmission_options,#deluge_options,#qbittorrent_options").fadeOut("fast", function() { $("#utorrent_options").fadeIn() });
-                        }
-                        if ($("#torrent_downloader_qbittorrent").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#transmission_options,#utorrent_options,#deluge_options").fadeOut("fast", function() { $("#qbittorrent_options").fadeIn() });
-			}
-                        if ($("#torrent_downloader_deluge").is(":checked"))
-                        {
-                            $("#torrent_blackhole_options,#utorrent_options,#transmission_options,#qbittorrent_options").fadeOut("fast", function() { $("#deluge_options").fadeIn() });
-                        }
-                });
-
-                $("#mirror").change(handleNewServerSelection);
-                        handleNewServerSelection.apply($("#mirror"));
-
-                $("#encoder").change(handleNewEncoderSelection);
-                        handleNewEncoderSelection.apply($("#encoder"));
-
-                $("#encodervbrcbr").change(handleNewEncodingOptionSelection);
-                        handleNewEncodingOptionSelection.apply($("#encodervbrcbr"));
-
-                var deletedNewznabs = 0;
-
-                $(".remove").click(function() {
-                    $(this).parent().parent().remove();
-                    deletedNewznabs = deletedNewznabs + 1;
-                });
-
-                var deletedTorznabs = 0;
-
-                $(".remove_torznab").click(function() {
-                    $(this).parent().parent().remove();
-                    deletedTorznabs = deletedTorznabs + 1;
-                });
-
-                $("#modify_extras").click(openExtrasDialog);
-
-                $("#include_extras").click(function(){
-                    if ($("#include_extras").is(":checked")){
-                        openExtrasDialog();
+                // Generic AJAX call for actions
+                $.get(url, data, function(response) {
+                    // Assuming common.js provides a way to show messages like 'doAjaxCall' did
+                    // Or you can implement a simple feedback mechanism here
+                    if (response) {
+                        $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>" + response + "</div>")
+                                     .addClass('success').fadeIn().delay(3000).fadeOut();
+                        // For API key generation, update the field
+                        if (action === 'generateAPIKey' && response) {
+                            $('#api_key').val(response); // Assuming response directly contains the new API key
+                        }
+                    } else {
+                        $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-alert'></span>Action completed, but no specific response.</div>")
+                                     .addClass('warning').fadeIn().delay(3000).fadeOut();
                     }
+                }).fail(function(jqXHR, textStatus, errorThrown) {
+                    $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-alert'></span>Error: " + textStatus + " - " + errorThrown + "</div>")
+                                 .addClass('error').fadeIn().delay(5000).fadeOut();
                 });
+            });
+        };
 
-                %for extra in config['extras']:
-                $("#${extra}_temp").click(function(){
-                    if ($(this).is(":checked")){
-                        $("#${extra}").attr("checked", true);
-                    }
-                    else {
-                        $("#${extra}").attr("checked", false);
-                    }
+        ConfigPage.initFormSubmission = function() {
+            // Intercept form submission to use AJAX
+            $('#configUpdateForm').on('submit', function(e) {
+                e.preventDefault(); // Prevent default form submission
+
+                var $form = $(this);
+                var url = $form.attr('action');
+                var formData = $form.serialize(); // Get all form data
+
+                $.post(url, formData, function(response) {
+                    // Assuming response is a success message or JSON
+                    $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>" + response + "</div>")
+                                 .addClass('success').fadeIn().delay(3000).fadeOut();
+                }).fail(function(jqXHR, textStatus, errorThrown) {
+                    $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-alert'></span>Error saving settings: " + textStatus + " - " + errorThrown + "</div>")
+                                 .addClass('error').fadeIn().delay(5000).fadeOut();
                 });
-                %endfor
-
-                $("#add_newznab").click(function() {
-                    var intId = $("#newznab_providers > div").size() + deletedNewznabs + 1;
-                    var formfields = $("<div class=\"config\" id=\"newznab" + intId + "\"><div class=\"row\"><label>Newznab Host</label><input type=\"text\" name=\"newznab_host" + intId + "\" size=\"30\"></div><div class=\"row\"><label>Newznab API</label><input type=\"text\" name=\"newznab_api" + intId + "\" size=\"36\"></div><div class=\"row checkbox\"><input type=\"checkbox\" name=\"newznab_enabled" + intId + "\" value=\"1\" checked /><label>Enabled</label></div>");
-                    var removeButton = $("<div class=\"row\"><input type=\"button\" class=\"remove\" value=\"Remove\" /></div>");
-                    removeButton.click(function() {
-                        $(this).parent().remove();
-                        deletedNewznabs = deletedNewznabs + 1;
-
-                    });
-                    formfields.append(removeButton);
-                    formfields.append("</div>");
-                    $("#add_newznab").before(formfields);
-                });
-
-                $("#add_torznab").click(function() {
-                    var intId = $("#torznab_providers > div").size() + deletedTorznabs + 1;
-                    var formfields = $("<div class=\"config\" id=\"torznab" + intId + "\"><div class=\"row\"><label>Torznab Host</label><input type=\"text\" name=\"torznab_host" + intId + "\" size=\"30\"></div><div class=\"row\"><label>Torznab API</label><input type=\"text\" name=\"torznab_api" + intId + "\" size=\"36\"></div><div class=\"row\"><label>Torznab Seed Ratio</label><input type=\"text\" class=\"override-float\" name=\"torznab_ratio" + intId + "\" size=\"10\"></div><div class=\"row checkbox\"><input type=\"checkbox\" name=\"torznab_enabled" + intId + "\" value=\"1\" checked /><label>Enabled</label></div>");
-                    var removeTorznabButton = $("<div class=\"row\"><input type=\"button\" class=\"remove_torznab\" value=\"Remove\" /></div>");
-                    removeTorznabButton.click(function() {
-                        $(this).parent().remove();
-                        deletedTorznabs = deletedTorznabs + 1;
-
-                    });
-                    formfields.append(removeTorznabButton);
-                    formfields.append("</div>");
-                    $("#add_torznab").before(formfields);
-                });
-
-                $(".hpuser").keyup(function() {
-                    $(".hpuser").val($(this).val());
-                });
-
-                $(".hppass").keyup(function() {
-                    $(".hppass").val($(this).val());
-                });
-
-                $(function() {
-                    $( "#tabs" ).tabs();
-                });
-                initActions();
-                initConfigCheckbox("#headphones_indexer");
-                initConfigCheckbox("#use_newznab");
-                initConfigCheckbox("#use_nzbsorg");
-                initConfigCheckbox("#use_omgwtfnzbs");
-                initConfigCheckbox("#use_torznab");
-                initConfigCheckbox("#use_piratebay");
-                initConfigCheckbox("#use_rutracker");
-                initConfigCheckbox("#use_orpheus");
-                initConfigCheckbox("#use_redacted");
-                initConfigCheckbox("#api_enabled");
-                initConfigCheckbox("#enable_https");
-                initConfigCheckbox("#customauth");
-                initConfigCheckbox("#mb_ignore_age_missing");
-
-                $('#twitterStep1').click(function () {
-                    $.get("/twitterStep1", function (data) {window.open(data); })
-                    .done(function () { $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>Confirm Authorization. Check pop-up blocker if no response.</div>"); });
-                    $('#ajaxMsg').addClass('success').fadeIn().delay(3000).fadeOut();
-                });
-
-                $('#twitterStep2').click(function () {
-                    var twitter_key = $("#twitter_key").val();
-                    $.get("/twitterStep2", {'key': twitter_key}, function (data) { $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>"+data+"</div>"); });
-                    $('#ajaxMsg').addClass('success').fadeIn().delay(3000).fadeOut();
-                });
-
-                $('#testTwitter').click(function () {
-                    $.get("/testTwitter",
-                        function (data) { $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>"+data+"</div>"); });
-                    $('#ajaxMsg').addClass('success').fadeIn().delay(3000).fadeOut();
-                });
-
-                $('#osxnotifyregister').click(function () {
-                    var osx_notify_app = $("#osx_notify_reg").val();
-                    $.get("/osxnotifyregister", {'app': osx_notify_app}, function (data) { $('#ajaxMsg').html("<div class='msg'><span class='ui-icon ui-icon-check'></span>"+data+"</div>"); });
-                    $('#ajaxMsg').addClass('success').fadeIn().delay(3000).fadeOut()
-                })
-        }
+            });
+        };
 
         $(document).ready(function() {
-            initThisPage();
-        });
+            // Assuming initActions() from common.js is called in parent.javascriptIncludes()
+            // If not, and it's essential, ensure it's called somewhere.
+            // initActions();
 
+            ConfigPage.initTabs();
+            ConfigPage.initActionButtons();
+            ConfigPage.initFormSubmission();
+        });
     </script>
 </%def>