<!--#set global $pane="General"#-->
<!--#set global $help_uri = $confighelpuri + "general"#-->
<!--#include $webdir + "/_inc_header_uc.tmpl"#-->

<div class="colmask">
    <div class="padding alt section">
        <label for="advanced-settings-button" class="form-control advanced-button ">
            <input type="checkbox" id="advanced-settings-button" name="advanced-settings-button"> $T('button-advanced')
        </label>
    </div>
    <form action="saveGeneral" method="post" name="fullform" class="fullform" autocomplete="off">
        <input type="hidden" id="apikey" name="apikey" value="$apikey" />
        <input type="hidden" id="ajax" name="ajax" value="1" />
        <input type="hidden" name="output" value="json" />
        <div class="section">
            <div class="col2">
                <h3>$T('webServer') <a href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
                <p><b>$T('restartRequired')</b></p>
            </div><!-- /col2 -->
            <div class="col1">
                <fieldset>
                    <div class="field-pair">
                        <label class="config" for="host">$T('opt-host')</label>
                        <input type="text" name="host" id="host" value="$host" />
                        <span class="desc">$T('explain-host')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="port">$T('opt-port')</label>
                        <input type="number" name="port" id="port" value="$port" size="8" data-original="$port" min="0" max="65535" />
                        <span class="desc">$T('explain-port')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="enable_https">$T('opt-enable_https')</label>
                        <input type="checkbox" name="enable_https" id="enable_https" value="1" <!--#if int($enable_https) > 0 then 'checked="checked" data-original="1"' else ""#-->/>
                        <span class="desc">$T('explain-enable_https')</span>
                        <span class="desc"><span class="label label-warning">$T('warning').upper()</span> $T('explain-enable_https_warning')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="web_dir">$T('opt-web_dir')</label>
                        <select name="web_dir" id="web_dir">
                        <!--#for $webline in $web_list#-->
                            <!--#if $webline.lower() == $web_dir.lower()#-->
                                <option value="$webline" selected="selected">$webline</option>
                            <!--#else#-->
                                <option value="$webline">$webline</option>
                            <!--#end if#-->
                        <!--#end for#-->
                        </select>
                        <span class="desc">$T('explain-web_dir')&nbsp;&nbsp;<a href="$caller_url">$caller_url</a></span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="language">$T('opt-language')</label>
                        <select name="language" id="language" class="select">
                        <!--#for $webline in $lang_list#-->
                            <!--#if $webline[0].lower() == $language.lower()#-->
                                <option value="$webline[0]" selected="selected">$webline[1]</option>
                            <!--#else#-->
                                <option value="$webline[0]">$webline[1]</option>
                            <!--#end if#-->
                        <!--#end for#-->
                        </select>
                        <span class="desc">$T('explain-language')</span>
                        <div class="alert alert-info alert-translate">
                           $T('explain-ask-language') <a href="https://sabnzbd.org/wiki/translate" target="_blank" class="alert-link">https://sabnzbd.org/wiki/translate</a>
                        </div>
                    </div>
                    <div class="field-pair advanced-settings">
                        <h5 class="darkred nomargin">$T('base-folder'): <span class="path">$my_lcldata</span></h5>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="https_port">$T('opt-https_port')</label>
                        <input type="number" name="https_port" id="https_port" value="$https_port" size="8" data-original="$https_port" min="0" max="65535" />
                        <span class="desc">$T('explain-https_port')</span>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="https_cert">$T('opt-https_cert')</label>
                        <input type="text" name="https_cert" id="https_cert" value="$https_cert" class="fileBrowserField" data-initialdir="$my_lcldata" data-files="1" />
                        <button class="btn btn-default generate_cert" title="$T('explain-new-cert')">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </button>
                        <span class="desc">$T('explain-https_cert')</span>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="https_key">$T('opt-https_key')</label>
                        <input type="text" name="https_key" id="https_key" value="$https_key" class="fileBrowserField" data-initialdir="$my_lcldata" data-files="1" />
                        <button class="btn btn-default generate_cert" title="$T('explain-new-cert')">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </button>
                        <span class="desc">$T('explain-https_key')</span>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="https_chain">$T('opt-https_chain')</label>
                        <input type="text" name="https_chain" id="https_chain" value="$https_chain" class="fileBrowserField" data-initialdir="$my_lcldata" data-files="1" />
                        <span class="desc">$T('explain-https_chain')</span>
                    </div>
                    <div class="field-pair">
                        <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                        <button class="btn btn-default sabnzbd_restart"><span class="glyphicon glyphicon-refresh"></span> $T('button-restart') SABnzbd</button>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="section">
            <div class="col2">
                <h3>$T('security') <a href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
                <p><b>$T('restartRequired')</b></p>
            </div><!-- /col2 -->
            <div class="col1">
                <fieldset>
                    <!-- Tricks to avoid browser auto-fill, fixed on-submit with javascript -->
                    <div class="field-pair">
                        <label class="config" for="${pid}_wu">$T('opt-web_username')</label>
                        <input type="text" name="${pid}_wu" id="${pid}_wu" value="$username" data-hide="username" />
                        <span class="desc">$T('explain-web_username')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="${pid}_wp">$T('opt-web_password')</label>
                        <input type="text" name="${pid}_wp" id="${pid}_wp" value="$password" data-hide="password" />
                        <span class="desc">$T('explain-web_password')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="inet_exposure">$T('opt-inet_exposure')</label>
                            <select name="inet_exposure" id="inet_exposure" class="select">
                                <optgroup label="API">
                                    <option value="0" <!--#if $inet_exposure == 0 then 'selected="selected"' else ""#-->>$T('inet-local')</option>
                                    <option value="1" <!--#if $inet_exposure == 1 then 'selected="selected"' else ""#-->>$T('inet-nzb')</option>
                                    <option value="2" <!--#if $inet_exposure == 2 then 'selected="selected"' else ""#-->>$T('inet-api')</option>
                                    <option value="3" <!--#if $inet_exposure == 3 then 'selected="selected"' else ""#-->>$T('inet-fullapi')</option>
                                </optgroup>
                                <optgroup label="$T('inet-fullapi') &amp; $T('opt-web_dir')">
                                    <option value="4" <!--#if $inet_exposure == 4 then 'selected="selected"' else ""#-->>$T('inet-ui')</option>
                                    <option value="5" <!--#if $inet_exposure == 5 then 'selected="selected"' else ""#-->>$T('inet-ui') - $T('inet-external_login')</option>
                                </optgroup>
                            </select>
                        <span class="desc">$T('explain-inet_exposure')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="apikey_display">$T('opt-apikey')</label>
                        <input type="text" id="apikey_display" value="$apikey" readonly />
                        <button class="btn btn-default show_qrcode" title="$T('explain-qr-code')" rel="$apikey" ><span class="glyphicon glyphicon-qrcode"></span></button>
                        <button class="btn btn-default generate_key" id="generate_new_apikey" title="$T('button-apikey')"><span class="glyphicon glyphicon-repeat"></span></button>
                        <span class="desc">$T('explain-apikey')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="nzbkey">$T('opt-nzbkey')</label>
                        <input type="text" id="nzbkey" value="$nzb_key" readonly />
                        <button class="btn btn-default show_qrcode" title="$T('explain-qr-code')" rel="$nzb_key" ><span class="glyphicon glyphicon-qrcode"></span></button>
                        <button class="btn btn-default generate_key" id="generate_new_nzbkey" title="$T('button-apikey')"><span class="glyphicon glyphicon-repeat"></span></button>
                        <span class="desc">$T('explain-nzbkey')</span>
                    </div>
                    <div class="field-pair">
                        <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                    </div>
                </fieldset>
            </div><!-- /col1 -->
        </div><!-- /section -->
        <div class="section">
            <div class="col2">
                <h3>$T('cmenu-switches') <a href="$help_uri" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
            </div><!-- /col2 -->
            <div class="col1">
                <fieldset>
                    <div class="field-pair">
                        <label class="config" for="auto_browser">$T('opt-auto_browser')</label>
                        <input type="checkbox" name="auto_browser" id="auto_browser" value="1" <!--#if int($auto_browser) > 0 then 'checked="checked"' else ""#--> />
                        <span class="desc">$T('explain-auto_browser')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="check_new_rel">$T('opt-check_new_rel')</label>
                        <select name="check_new_rel" id="check_new_rel">
                            <option value="0" <!--#if $check_new_rel == 0 then 'selected="selected"' else ""#--> >$T('off')</option>
                            <option value="1" <!--#if $check_new_rel == 1 then 'selected="selected"' else ""#--> >$T('on')</option>
                            <option value="2" <!--#if $check_new_rel == 2 then 'selected="selected"' else ""#--> >$T('also-test')</option>
                        </select>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="enable_https_verification">$T('opt-enable_https_verification')</label>
                        <input type="checkbox" name="enable_https_verification" id="enable_https_verification" value="1" <!--#if int($enable_https_verification) > 0 then 'checked="checked"' else ""#--> />
                        <span class="desc">$T('explain-enable_https_verification')</span>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="socks5_proxy_url">$T('opt-socks5_proxy_url')</label>
                        <input type="text" name="socks5_proxy_url" id="socks5_proxy_url" value="$socks5_proxy_url" autocomplete="off" placeholder="socks5://user:pass@hostname:port" />
                        <span class="desc">$T('explain-socks5_proxy_url') <br/>$T('readwiki')</span>
                    </div>
                    <div class="field-pair">
                        <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                    </div>
                </fieldset>
            </div><!-- /col1 -->
        </div><!-- /section -->
        <div class="section">
            <div class="col2">
                <h3>$T('tuning') <a href="$help_uri#toc2" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
            </div><!-- /col2 -->
            <div class="col1">
                <fieldset>
                    <div class="field-pair value-and-select">
                        <label class="config" for="bandwidth_max_value">$T('opt-bandwidth_max')</label>
                        <input type="number" name="bandwidth_max_value" id="bandwidth_max_value" class="smaller_input" />
                        <select name="bandwidth_max_dropdown" id="bandwidth_max_dropdown">
                            <option value="">B/s</option>
                            <option value="K">KB/s</option>
                            <option value="M" selected>MB/s</option>
                        </select>
                        <input type="hidden" name="bandwidth_max" id="bandwidth_max" value="$bandwidth_max" />
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="bandwidth_perc">$T('opt-bandwidth_perc')</label>
                        <input type="number" name="bandwidth_perc" id="bandwidth_perc" value="$bandwidth_perc" step="10" min="0" max="100"/>
                        <span class="desc">$T('explain-bandwidth_perc')</span>
                    </div>
                    <div class="field-pair advanced-settings">
                        <label class="config" for="cache_limit">$T('opt-cache_limitstr')</label>
                        <input type="text" name="cache_limit" id="cache_limit" value="$cache_limit" class="smaller_input" />
                        <span class="desc">$T('explain-cache_limitstr').replace("64M", "256M").replace("128M", "512M")</span>
                    </div>
                    <div class="field-pair">
                        <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                    </div>
                </fieldset>
            </div><!-- /col1 -->
        </div><!-- /section -->
    </form>

    <form action="uploadConfig" method="post" name="fullform" class="fullform" autocomplete="off" enctype="multipart/form-data">
        <input type="hidden" name="apikey" value="$apikey" />
        <input type="hidden" name="ajax" value="1" />
        <input type="hidden" name="output" value="json" />
        <div class="section">
            <div class="col2">
                <h3>$T('backup') <a href="$help_uri#toc3" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a></h3>
            </div><!-- /col2 -->
            <div class="col1">
                <fieldset>
                    <div class="field-pair">
                        <label class="config" for="create_backup">$T('create-backup')</label>
                        <span class="desc"><button class="btn btn-default createBackup" type="button" id="create_backup"><span class="glyphicon glyphicon glyphicon-import"></span> $T('create-backup')</button></span>
                        <span class="desc">$T('explain-create_backup')</span>
                    </div>
                    <div class="field-pair">
                        <label class="config" for="config_backup_file">$T('restore-backup')</label>
                        <input type="file" accept=".zip" name="config_backup_file" id="config_backup_file" />
                        <span class="desc">$T('restartRequired')</span>
                    </div>
                    <div class="field-pair">
                        <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-open"></span> $T('restore-backup')</button>
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</div><!-- /colmask -->

<div class="modal fade" id="modal_qr">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <!-- For the QR code -->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
    // Show the message about translating when it's non-English
    function hideOrShowTranslate() {
        if(jQuery('#language').val() === 'en') {
            jQuery('.alert-translate').hide()
        } else {
            jQuery('.alert-translate').show()
        }
    }
    jQuery('#language').on('change', function() {
        // Show message
        hideOrShowTranslate()
        // Re-load page on submit
        jQuery('.fullform').submit(function() {
            // Skip the fancy stuff, just submit
            this.submit()
        })
        // No JSON response
        jQuery('#ajax').val('')
    })
    hideOrShowTranslate()

    // Highlight in case user is not safe
    // So when exposed to internet and no password, no external limit or no username/password
    var safeCheck = jQuery('#host, #inet_exposure, #${pid}_wu, #${pid}_wp')
    function checkSafety() {
        if(jQuery('#host').val() !== 'localhost' && jQuery('#host').val() !== '127.0.0.1') {
            // No limitation on local-network
            if(jQuery('#inet_exposure').val() > 3) {
                // And no username and password?
                if(!jQuery('#${pid}_wu').val() || !jQuery('#${pid}_wp').val()) {
                    // Add warning icon if not there already
                    if(!jQuery('.host-warning').length) {
                        safeCheck.after('<span class="glyphicon glyphicon-alert host-warning"></span>')
                        jQuery('.host-warning').tooltip({'title': '$T('checkSafety')'})
                        safeCheck.addClass('host-warning-highlight')
                    }
                    return
                }
            }
        }
        // Remove warnings
        jQuery('.host-warning').remove()
        safeCheck.removeClass('host-warning-highlight')
    }
    checkSafety()
    safeCheck.on('change', checkSafety)

    // Click functions
    jQuery('#apikey, #nzbkey').click(function () { jQuery(this).select() });

    jQuery('#generate_new_apikey').click(function () {
      if (confirm("$T('confirm')")) {
        $.ajax({
          type: "POST",
          url: "../../api",
          data: {mode:'config', name:'set_apikey', apikey: jQuery('#apikey').val()},
          success: function(msg){
            jQuery('#apikey').val(msg);
            document.location = document.location;
          }
        });
      }
    });
    jQuery('#generate_new_nzbkey').click(function () {
      if (confirm("$T('confirm')")) {
        $.ajax({
          type: "POST",
          url: "../../api",
          data: { mode:'config', name:'set_nzbkey', apikey: jQuery('#apikey').val() },
          success: function(msg){
            jQuery('#nzbkey').val(msg);
            document.location = document.location;
          }
        });
      }
    });

    // Add autocomplete and file-browser
    jQuery('.fileBrowserField').typeahead().fileBrowser();

    jQuery('.show_qrcode').click(function (e) {
        // Show in modal
        jQuery('#modal_qr .modal-dialog').width(330)
        jQuery('#modal_qr .modal-body').html('').qrcode({
            "size": 280,
            "color": "#3a3",
            "text": jQuery(this).attr('rel')
        });
        jQuery('#modal_qr').modal('show');

        // No save on this button click
        e.preventDefault();
    });

    jQuery('.generate_cert').click(function(e) {
        if(!confirm('$T('explain-new-cert')')) {
            return;
        }

        // Submit request and then restart
        $.ajax({
            type: "POST",
            url: "../../api",
            data: { mode: 'config', name: 'regenerate_certs', apikey: jQuery('#apikey').val() },
            success: function(msg) {
                do_restart()
            }
        });

        e.preventDefault();
    })

    // Only allow re-generate if default certs
    if(jQuery('#https_cert').val() !== '$def_https_cert_file') {
        jQuery('.generate_cert').attr('disabled', 'disabled')
    }

    // Parse the text
    var bandwidthLimit = jQuery('#bandwidth_max').val()
    if(bandwidthLimit) {
        var bandwithLimitNumber = parseFloat(bandwidthLimit)
        var bandwithLimitText = bandwidthLimit.replace(/[^a-zA-Z]+/g, '');
        if(bandwithLimitNumber) {
            jQuery('#bandwidth_max_value').val(bandwithLimitNumber)
            jQuery('#bandwidth_max_dropdown').val(bandwithLimitText)
        }
    }

    // Update the value
    jQuery('#bandwidth_max_value, #bandwidth_max_dropdown').on('change', function() {
        if(jQuery('#bandwidth_max_value').val()) {
            jQuery('#bandwidth_max').val(jQuery('#bandwidth_max_value').val() + jQuery('#bandwidth_max_dropdown').val())
        } else {
            jQuery('#bandwidth_max').val('')
        }
    })

    jQuery('#create_backup').click(function () {
        $.ajax({
          type: "POST",
          url: "../../api",
          data: {mode:'config', name:'create_backup', output:'json', apikey: jQuery('#apikey').val()},
          success: function(data) {
              if(data.value.result) {
                  alert("$T('backup'):\n" + data.value.message)
              } else {
                  alert("$T('button-failed')")
              }
          }
        });
    });
});
</script>


<!--#include $webdir + "/_inc_footer_uc.tmpl"#-->
