{% extends '_main.html' %}

{% block title %}Subtitles - Bazarr{% endblock %}

{% block page_head %}

{% endblock page_head %}

{% block bcleft %}
    <div class="">
        <button class="btn btn-outline" id="save_button">
            <div>
                <span class="fa-stack">
                    <i class="fas fa-save fa-stack-2x align-top text-themecolor text-center font-20"
                       aria-hidden="true"></i>
                    <i id="save_button_checkmark" class="fas fa-check fa-stack-2x" style="color:green;"></i>
                </span>
            </div>
            <div class="align-bottom text-themecolor small text-center">Save</div>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <div class="container-fluid" style="padding-top: 3em;">
        <form class="form" name="settings_form" id="settings_form">
            <h4>Subtitles Options</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Subtitle Folder</b>
                </div>
                <div class="form-group col-sm-4">
                    <select class="form-control selectpicker" id="settings-general-subfolder"
                            name="settings-general-subfolder">
                        <option value="current">Alongside Media File</option>
                        <option value="relative">Relative Path To Media File</option>
                        <option value="absolute">Absolute Path</option>
                    </select>
                    <label for="settings-general-subfolder">Choose the folder you wish to store/read the
                        Subtitles</label>
                </div>
            </div>
            <div id="subfolder_div">
                <div class="row">
                    <div class="col-sm-3 text-right">
                        <b>Custom Subtitle Folder</b>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="settings-general-subfolder_custom"
                               name="settings-general-subfolder_custom" value="{{ settings.general.subfolder_custom }}">
                        <label for="settings-general-subfolder_custom">Choose your own folder for Subtitles</label>
                    </div>
                </div>
                <br>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Upgrade Previously Downloaded Subtitles</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-upgrade_subs"
                               name="settings-general-upgrade_subs">
                        <span class="custom-control-label" for="settings-general-upgrade_subs"></span>
                    </label>
                    <label>Schedule a task to upgrade Subtitles previously downloaded by Bazarr.</label>
                </div>
            </div>
            <br>
            <div id="upgradesubs_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Number of days to go back in history to upgrade subtitles (up to 30)</b>
                    </div>
                    <div class="col-sm-4">
                        <input class="slider" id="settings-general-days_to_upgrade_subs" name="settings-general-days_to_upgrade_subs" data-slider-id='settings-general-days_to_upgrade_subs' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="{{settings.general.days_to_upgrade_subs}}"/>
                        <span class="slider_span"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Upgrade Manually Downloaded Subtitles</b>
                    </div>
                    <div class="form-group col-sm-8">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-upgrade_manual"
                                   name="settings-general-upgrade_manual">
                            <span class="custom-control-label" for="settings-general-upgrade_manual"></span>
                        </label>
                        <label>Enable or disable upgrade of manually searched and downloaded Subtitles.</label>
                    </div>
                </div>
                <br>
            </div>

            <h4>Anti-Captcha Options</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Provider</b>
                </div>
                <div class="form-group col-sm-4">
                    <select class="form-control selectpicker" id="settings-general-anti_captcha_provider"
                            name="settings-general-anti_captcha_provider">
                        <option value="None">None</option>
                        <option value="anti-captcha">Anti-Captcha</option>
                        <option value="death-by-captcha">Death by Captcha</option>
                    </select>
                    <label for="settings-general-anti_captcha_provider">Choose the Anti-Captcha provider you want to
                        use.</label>
                </div>
            </div>
            <div id="anticaptcha_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Provider Website</b>
                    </div>
                    <div class="col-sm-4">
                        <a href="http://getcaptchasolution.com/eixxo1rsnw" target="_blank">Anti-Captcha.com</a>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Account Key</b>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="settings-anticaptcha-anti_captcha_key"
                               name="settings-anticaptcha-anti_captcha_key"
                               value="{{ settings.anticaptcha.anti_captcha_key }}">
                    </div>
                </div>
                <br>
            </div>
            <div id="deathbycaptcha_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Provider Website</b>
                    </div>
                    <div class="col-sm-4">
                        <a href="https://www.deathbycaptcha.com" target="_blank">DeathByCaptcha.com</a>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Username</b>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="settings-deathbycaptcha-username"
                               name="settings-deathbycaptcha-username" value="{{ settings.deathbycaptcha.username }}">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Password</b>
                    </div>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="settings-deathbycaptcha-password"
                               name="settings-deathbycaptcha-password" value="{{ settings.deathbycaptcha.password }}">
                    </div>
                </div>
                <br>
            </div>

            <h4>Performance / Optimization</h4>
            <hr>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Adaptive Searching</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-adaptive_searching"
                               name="settings-general-adaptive_searching">
                        <span class="custom-control-label" for="settings-general-adaptive_searching"></span>
                    </label>
                    <label>When searching for Subtitles, Bazarr will search less frequently to limit call to
                        providers.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Search Enabled Providers Simultaneously</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-multithreading"
                               name="settings-general-multithreading">
                        <span class="custom-control-label" for="settings-general-multithreading"></span>
                    </label>
                    <label>Search multiple providers at once (Don't choose this on low powered devices)</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Use Embedded Subtitles</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-use_embedded_subs"
                               name="settings-general-use_embedded_subs">
                        <span class="custom-control-label" for="settings-general-use_embedded_subs"></span>
                    </label>
                    <label>Use embedded Subtitles in media files when determining missing ones.</label>
                </div>
            </div>
            <div id="embedded_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Ignore Embedded PGS Subtitles</b>
                    </div>
                    <div class="form-group col-sm-8">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-ignore_pgs_subs"
                                   name="settings-general-ignore_pgs_subs">
                            <span class="custom-control-label" for="settings-general-ignore_pgs_subs"></span>
                        </label>
                        <label>Ignores PGS Subtitles in Embedded Subtitles detection. Only relevant if 'Use embedded
                            Subtitles' is enabled.</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Ignore Embedded VobSub Subtitles</b>
                    </div>
                    <div class="form-group col-sm-8">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-ignore_vobsub_subs"
                                name="settings-general-ignore_vobsub_subs">
                            <span class="custom-control-label" for="settings-general-ignore_vobsub_subs"></span>
                        </label>
                        <label>Ignores VobSub Subtitles in Embedded Subtitles detection. Only relevant if 'Use embedded
                            Subtitles' is enabled.</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Show Only Desired Languages</b>
                    </div>
                    <div class="form-group col-sm-8">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input"
                                   id="settings-general-embedded_subs_show_desired"
                                   name="settings-general-embedded_subs_show_desired">
                            <span class="custom-control-label" for="settings-general-embedded_subs_show_desired"></span>
                        </label>
                        <label>Hide embedded subtitles for languages that are not currently desired.</label>
                    </div>
                </div>
            </div>

            <h4>Post-Processing</h4>
            <hr>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Encode Subtitles To UTF8</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-utf8_encode"
                               name="settings-general-utf8_encode">
                        <span class="custom-control-label" for="settings-general-utf8_encode"></span>
                    </label>
                    <label>Re-encode downloaded Subtitles to UTF8. Should be left enabled in most case.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Hearing Impaired</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="remove_HI">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Removes tags, text and characters from subtitles that are meant for hearing impaired people.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Remove Tags</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="remove_tags">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Removes all possible style tags from the subtitle, such as font, bold, color etc.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>OCR Fixes</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="OCR_fixes">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Fix issues that happen when a subtitle gets converted from bitmap to text through OCR.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Common Fixes</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="common">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Fix common and whitespace/punctuation issues in subtitles.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Fix Uppercase</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="fix_uppercase">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Tries to make subtitles that are completely uppercase readable.</label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Color</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="subzero_color">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Adds color to your subtitles (for playback devices/software that don't ship their own color modes; only works for players that support color tags).</label>
                </div>
            </div>
            <div id="subzero_color_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Color Name</b>
                    </div>
                    <div class="form-group col-sm-5">
                        <select class="form-control selectpicker" id="subzero_color_name">
                            <option value="white">White</option>
                            <option value="light-grey">Light Grey</option>
                            <option value="red">Red</option>
                            <option value="green">Green</option>
                            <option value="yellow">Yellow</option>
                            <option value="blue">Blue</option>
                            <option value="magenta">Magenta</option>
                            <option value="cyan">Cyan</option>
                            <option value="black">Black</option>
                            <option value="dark-red">Dark Red</option>
                            <option value="dark-green">Dark Green</option>
                            <option value="dark-yellow">Dark Yellow</option>
                            <option value="dark-blue">Dark Blue</option>
                            <option value="dark-magenta">Dark Magenta</option>
                            <option value="dark-cyan">Dark Cyan</option>
                            <option value="dark-grey">Dark Grey</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Reverse RTL</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input subzero_mods" id="reverse_rtl">
                        <span class="custom-control-label"></span>
                    </label>
                    <label>Reverses the punctuation in right-to-left subtitles for problematic playback devices.</label>
                </div>
            </div>
            {% if not os.startswith('win') %}
                <div class="row">
                    <div class="col-sm-3 text-right">
                        <b>Enable CHMOD</b>
                    </div>
                    <div class="form-group col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-general-chmod_enabled"
                                   name="settings-general-chmod_enabled">
                            <span class="custom-control-label" for="settings-general-chmod_enabled"></span>
                        </label>
                    </div>
                </div>
                <div id="chmod_div">
                    <div class="row">
                        <div class="col-sm-4 text-right">
                            <b>Set Subtitle file permissions to</b>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="settings-general-chmod"
                                   name="settings-general-chmod" value="{{ settings.general.chmod }}">
                            <label for="settings-general-chmod">Must be 4 digit octal, e.g.: 0775</label>
                        </div>
                    </div>
                    <br>
                </div>
            {% endif %}
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Subtitles synchronization</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-subsync-use_subsync" name="settings-subsync-use_subsync">
                        <span class="custom-control-label" for="settings-subsync-use_subsync"></span>
                    </label>
                    <label>Enable the subtitles synchronization after downloading a subtitles.</label>
                </div>
            </div>
            <div id="subsync_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Subtitles synchronization score threshold for series</b>
                    </div>
                    <div class="col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-subsync-use_subsync_threshold" name="settings-subsync-use_subsync_threshold">
                            <span class="custom-control-label" for="settings-subsync-use_subsync_threshold"></span>
                        </label>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-5 text-right">
                        <b>Only for score below</b>
                    </div>
                    <div class="col-sm-4">
                        <input class="slider" id="settings-subsync-subsync_threshold" name="settings-subsync-subsync_threshold" data-slider-id='settings-subsync-subsync_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.subsync.subsync_threshold}}"/>
                        <span class="slider_span"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Subtitles synchronization score threshold for movies</b>
                    </div>
                    <div class="col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="settings-subsync-use_subsync_movie_threshold" name="settings-subsync-use_subsync_movie_threshold">
                            <span class="custom-control-label" for="settings-subsync-use_subsync_movie_threshold"></span>
                        </label>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-5 text-right">
                        <b>Only for score below</b>
                    </div>
                    <div class="col-sm-4">
                        <input class="slider" id="settings-subsync-subsync_movie_threshold" name="settings-subsync-subsync_movie_threshold" data-slider-id='settings-subsync-subsync_movie_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.subsync.subsync_movie_threshold}}"/>
                        <span class="slider_span"></span>
                    </div>
                </div>
                <br>
            </div>
            <div class="row">
                <div class="col-sm-3 text-right">
                    <b>Use Custom Post-Processing</b>
                </div>
                <div class="form-group col-sm-8">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="settings-general-use_postprocessing"
                               name="settings-general-use_postprocessing">
                        <span class="custom-control-label" for="settings-general-use_postprocessing"></span>
                    </label>
                    <label>Enable the post-processing execution after downloading a subtitles.</label>
                </div>
            </div>
            <div id="custompp_div">
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Post-processing score threshold for series</b>
                    </div>
                    <div class="col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input"
                                   id="settings-general-use_postprocessing_threshold"
                                   name="settings-general-use_postprocessing_threshold">
                            <span class="custom-control-label"
                                  for="settings-general-use_postprocessing_threshold"></span>
                        </label>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-5 text-right">
                        <b>Only for score below</b>
                    </div>
                    <div class="col-sm-4">
                        <input class="slider" id="settings-general-postprocessing_threshold" name="settings-general-postprocessing_threshold" data-slider-id='settings-general-postprocessing_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.postprocessing_threshold}}"/>
                        <span class="slider_span"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Post-processing score threshold for movies</b>
                    </div>
                    <div class="col-sm-1">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input"
                                   id="settings-general-use_postprocessing_threshold_movie"
                                   name="settings-general-use_postprocessing_threshold_movie">
                            <span class="custom-control-label"
                                  for="settings-general-use_postprocessing_threshold_movie"></span>
                        </label>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-5 text-right">
                        <b>Only for score below</b>
                    </div>
                    <div class="col-sm-4">
                        <input class="slider" id="settings-general-postprocessing_threshold_movie" name="settings-general-postprocessing_threshold_movie" data-slider-id='settings-general-postprocessing_threshold_movie' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.postprocessing_threshold_movie}}"/>
                        <span class="slider_span"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Post-processing command</b>
                    </div>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="settings-general-postprocessing_cmd"
                               name="settings-general-postprocessing_cmd"
                               value="{{ settings.general.postprocessing_cmd }}">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-4 text-right">
                        <b>Variables you can use in your command (include the double curly brace):</b>
                    </div>
                    <div class="col-sm-8">
                        <b>&lbrace;&lbrace;directory&rbrace;&rbrace;</b>
                        <p>The full path of the episode file parent directory.</p>
                        <b>&lbrace;&lbrace;episode&rbrace;&rbrace;</b>
                        <p>The full path of the episode file.</p>
                        <b>&lbrace;&lbrace;episode_name&rbrace;&rbrace;</b>
                        <p>The filename of the episode without parent directory or extension.</p>
                        <b>&lbrace;&lbrace;subtitles&rbrace;&rbrace;</b>
                        <p>The full path of the subtitles file.</p>
                        <b>&lbrace;&lbrace;subtitles_language&rbrace;&rbrace;</b>
                        <p>The language of the subtitles file.</p>
                        <b>&lbrace;&lbrace;subtitles_language_code2&rbrace;&rbrace;</b>
                        <p>The 2-letter ISO-639 language code of the subtitles language.</p>
                        <b>&lbrace;&lbrace;subtitles_language_code3&rbrace;&rbrace;</b>
                        <p>The 3-letter ISO-639 language code of the subtitles language.</p>
                        <b>&lbrace;&lbrace;episode_language&rbrace;&rbrace;</b>
                        <p>The audio language of the episode file.</p>
                        <b>&lbrace;&lbrace;episode_language_code2&rbrace;&rbrace;</b>
                        <p>The 2-letter ISO-639 language code of the episode audio language.</p>
                        <b>&lbrace;&lbrace;episode_language_code3&rbrace;&rbrace;</b>
                        <p>The 3-letter ISO-639 language code of the episode audio language.</p>
                        <b>&lbrace;&lbrace;score&rbrace;&rbrace;</b>
                        <p>The score of the subtitles file.</p>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            // Show warning if there's unsaved changes in the settings_form
            var form_changed = false;
            $(window).on('beforeunload', function () {
                if (form_changed) {
                    return "";
                }
            });

            // Hide checkmark over save button
            $('#save_button_checkmark').hide();
            $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');

            // Hide *_div on Select input changed to None
            $('#settings-general-subfolder').on('change', function () {
                if ($(this).val() === 'current') {
                    $('#subfolder_div').hide();
                } else {
                    $('#subfolder_div').show();
                }
            });

            $('#settings-general-upgrade_subs').on('change', function () {
                if ($(this).prop('checked')) {
                    $('#upgradesubs_div').show();
                } else {
                    $('#upgradesubs_div').hide();
                }
            });

            $('#settings-general-anti_captcha_provider').on('change', function () {
                if ($(this).val() === 'anti-captcha') {
                    $('#anticaptcha_div').show();
                    $('#deathbycaptcha_div').hide();
                } else if ($(this).val() === 'death-by-captcha') {
                    $('#anticaptcha_div').hide();
                    $('#deathbycaptcha_div').show();
                } else {
                    $('#anticaptcha_div').hide();
                    $('#deathbycaptcha_div').hide();
                }
            });

            $('#settings-general-use_embedded_subs').on('change', function () {
                if ($(this).prop('checked')) {
                    $('#embedded_div').show();
                } else {
                    $('#embedded_div').hide();
                }
            });

            $('#subzero_color').on('change', function () {
                if ($(this).prop('checked')) {
                    $('#subzero_color_div').show();
                } else {
                    $('#subzero_color_div').hide();
                }
            });

            $('#settings-general-chmod_enabled').on('change', function () {
                if ($(this).prop('checked')) {
                    $('#chmod_div').show();
                } else {
                    $('#chmod_div').hide();
                }
            });

            $('#settings-general-use_postprocessing').on('change', function () {
                if ($(this).prop('checked')) {
                    $('#custompp_div').show();
                } else {
                    $('#custompp_div').hide();
                }
            });

            $('#settings-subsync-use_subsync').on('change', function() {
                if ($(this).prop('checked')) {
                    $('#subsync_div').show();
                } else {
                    $('#subsync_div').hide();
                }
            });

            // Set Select input values
            $('#settings-general-subfolder').val('{{settings.general.subfolder}}').trigger('change');
            $('#settings-general-anti_captcha_provider').val('{{settings.general.anti_captcha_provider}}').trigger('change');
            $('.selectpicker').selectpicker('refresh')

            // Set Checkbox input values
            $('#settings-general-upgrade_subs').prop('checked', {{'true' if settings.general.getboolean('upgrade_subs') else 'false'}}).trigger('change');
            $('#settings-general-upgrade_manual').prop('checked', {{'true' if settings.general.getboolean('upgrade_manual') else 'false'}}).trigger('change');
            $('#settings-general-adaptive_searching').prop('checked', {{'true' if settings.general.getboolean('adaptive_searching') else 'false'}}).trigger('change');
            $('#settings-general-multithreading').prop('checked', {{'true' if settings.general.getboolean('multithreading') else 'false'}}).trigger('change');
            $('#settings-general-use_embedded_subs').prop('checked', {{'true' if settings.general.getboolean('use_embedded_subs') else 'false'}}).trigger('change');
            $('#settings-general-ignore_pgs_subs').prop('checked', {{'true' if settings.general.getboolean('ignore_pgs_subs') else 'false'}}).trigger('change');
            $('#settings-general-ignore_vobsub_subs').prop('checked', {{ 'true' if settings.general.getboolean('ignore_vobsub_subs') else 'false' }}).trigger('change');
            $('#settings-general-embedded_subs_show_desired').prop('checked', {{'true' if settings.general.getboolean('embedded_subs_show_desired') else 'false'}}).trigger('change');
            $('#settings-general-utf8_encode').prop('checked', {{'true' if settings.general.getboolean('utf8_encode') else 'false'}}).trigger('change');
            $('#settings-general-chmod_enabled').prop('checked', {{'true' if settings.general.getboolean('chmod_enabled') else 'false'}}).trigger('change');
            $('#settings-subsync-use_subsync').prop('checked', {{'true' if settings.subsync.getboolean('use_subsync') else 'false'}}).trigger('change');
            $('#settings-subsync-use_subsync_threshold').prop('checked', {{'true' if settings.subsync.getboolean('use_subsync_threshold') else 'false'}}).trigger('change');
            $('#settings-subsync-use_subsync_movie_threshold').prop('checked', {{'true' if settings.subsync.getboolean('use_subsync_movie_threshold') else 'false'}}).trigger('change');
            $('#settings-general-use_postprocessing').prop('checked', {{'true' if settings.general.getboolean('use_postprocessing') else 'false'}}).trigger('change');
            $('#settings-general-use_postprocessing_threshold').prop('checked', {{'true' if settings.general.getboolean('use_postprocessing_threshold') else 'false'}}).trigger('change');
            $('#settings-general-use_postprocessing_threshold_movie').prop('checked', {{'true' if settings.general.getboolean('use_postprocessing_threshold_movie') else 'false'}}).trigger('change');

            $('.subzero_mods').prop('checked', false).trigger('change');
            {% if settings.general.subzero_mods %}
            $('{{settings.general.subzero_mods}}'.split(',')).each( function(i, item) {
                if (item.startsWith('color'))
                {
                    var color_name = 'white';
                    var m = item.match(/color\(name=(.*)\)/);
                    if (m != null && m.length > 1) color_name = m[1];
                    $('#subzero_color_name').val(color_name).trigger('change');
                    item = 'subzero_color';
                }
                $("[id=" + item + "]").prop('checked', true).trigger('change');
            })
            {% endif %}

            $('#save_button').on('click', function () {
                var formdata = new FormData(document.getElementById("settings_form"));

                var enabled_subzero_mods = $(".subzero_mods").map(function () {
                    if ($(this).prop('checked')) {
                        if ($(this).attr('id') == 'subzero_color')
                        {
                            return 'color(name=' + $('#subzero_color_name').val() + ')';
                        }
                        else return $(this).attr('id');
                    }
                }).get().join(',');
                formdata.append('settings-general-subzero_mods', enabled_subzero_mods)

                // Make sure all checkbox input are sent with true/false value
                $('input[type=checkbox]').each(function () {
                    formdata.set($(this).prop('id'), $(this).prop('checked'));
                });

                $.ajax({
                    url: "{{ url_for('api.savesettings') }}",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    complete: function () {
                        $('#save_button_checkmark').show();
                        form_changed = false;
                        $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
                        setTimeout(
                            function () {
                                $('#save_button_checkmark').hide();
                            }, 2000);
                    }
                });
            });

            // monitor changes to the settings_form
            $('#settings_form').on('change', function () {
                form_changed = true;
                $('#save_button').prop('disabled', false).css('cursor', 'auto');
            })
        });
    </script>
{% endblock tail %}