#if $pane == "Config"#
    #set global $root = '../'#
#else#
    #set global $root = '../../'#
#end if#
<!DOCTYPE HTML>
<html lang="$active_lang" #if $rtl#dir="rtl"#end if#>
<head>
    <title>
        SABnzbd $T('menu-config')
        #if $pane != "Config" then "-" else ""#
        #if $pane == "General" then $T('cmenu-general') else ""#
        #if $pane == "Folders" then $T('cmenu-folders') else ""#
        #if $pane == "Switches" then $T('cmenu-switches') else ""#
        #if $pane == "Servers" then $T('cmenu-servers') else ""#
        #if $pane == "Scheduling" then $T('cmenu-scheduling') else ""#
        #if $pane == "Email" then $T('cmenu-notif') else ""#
        #if $pane == "Categories" then $T('cmenu-cat') else ""#
        #if $pane == "Sorting" then $T('cmenu-sorting') else ""#
        #if $pane == "Special" then $T('cmenu-special') else ""#
        #if $pane == "RSS" then $T('cmenu-rss') else ""#
    </title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
    <meta name="apple-mobile-web-app-title" content="SABnzbd" />

    <link rel="apple-touch-icon" sizes="76x76" href="${root}staticcfg/ico/apple-touch-icon-76x76-precomposed.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="${root}staticcfg/ico/apple-touch-icon-120x120-precomposed.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="${root}staticcfg/ico/apple-touch-icon-152x152-precomposed.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="${root}staticcfg/ico/apple-touch-icon-180x180-precomposed.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="${root}staticcfg/ico/android-192x192.png" />

    <link rel="stylesheet" type="text/css" href="${root}staticcfg/bootstrap/css/bootstrap.min.css?v=$version" />
    <link rel="stylesheet" type="text/css" href="${root}staticcfg/css/chartist.min.css" />
    <link rel="stylesheet" type="text/css" href="${root}staticcfg/css/style.css?v=$version" />
    <!--#if $color_scheme not in ('Light', '') #-->
    <link rel="stylesheet" type="text/css" href="${root}staticcfg/css/${color_scheme}.css?v=$version"/>
    <!--#end if#-->

    <link rel="shortcut icon" href="${root}staticcfg/ico/favicon.ico?v=$version" />

    <script type="text/javascript">
        // Keeping track of the form state
        var formHasChanged = false;
        var formWasSubmitted = false;

        // Information we need
        var sabSession = '$apikey';
        var rootURL = '${root}'
        var urlBase = '${url_base}'
        var folderBrowseUrl = '${root}api?mode=browse&output=json&apikey=$apikey';
        var folderSeperator = '#if $os.sep == '\\' then '\\\\' else '/'#'

        // Translations
        var configTranslate = new Object();
        configTranslate.browseText = "$T('browse-folder')";
        configTranslate.saveChanges = "$T('button-saveChanges')";
        configTranslate.saving = "$T('button-saving')";
        configTranslate.failed = "$T('button-failed')";
        configTranslate.explainRestart = "$T('explain-Restart')";
        configTranslate.wizzardRestart = "$T('restarting-sab')";
        configTranslate.needRestart = "$T('restartRequired') $T('explain-needNewLogin')".replace(/\<br(\s*\/|)\>/g, '\n');
        configTranslate.buttonRestart = "$T('button-restart')";
        configTranslate.confirmLeave = "$T('confirmWithoutSavingPrompt')";
        configTranslate.searchPages = ['$T('cmenu-general')', '$T('cmenu-folders')', '$T('cmenu-switches')', '$T('cmenu-sorting')', '$T('cmenu-notif')', '$T('cmenu-special')']
    </script>
    <script type="text/javascript" src="${root}staticcfg/js/jquery-3.5.1.min.js?v=$version"></script>
    <script type="text/javascript" src="${root}staticcfg/bootstrap/js/bootstrap.min.js?v=$version"></script>
    <script type="text/javascript" src="${root}staticcfg/js/script.js?v=$version"></script>
    <script type="text/javascript">
        // Set default functions for the autocomplete everywhere


        // to top right away
        if(window.location.hash) {
            scroll(0,0);
            // void some browsers issue
            setTimeout(function() { scroll(0,0); }, 1);
        }
    </script>
</head>

<body class="$pane">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-logo navbar-logo-small" href="${root}" title="$T('Home')" data-placement="bottom">
                #include $webdir + "/staticcfg/images/logo-small.svg"#
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="${root}config/general/" #if $pane == "General" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-cog"></span>
                        <strong>$T('cmenu-general')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/folders/" #if $pane == "Folders" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <strong>$T('cmenu-folders')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/server/" #if $pane == "Servers" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-sort"></span>
                        <strong>$T('cmenu-servers')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/categories/" #if $pane == "Categories" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-tag"></span>
                        <strong>$T('cmenu-cat')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/switches/" #if $pane == "Switches" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-check"></span>
                        <strong>$T('cmenu-switches')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/sorting/" #if $pane == "Sorting" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                        <strong>$T('cmenu-sorting')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/notify/" #if $pane == "Email" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-comment"></span>
                        <strong>$T('cmenu-notif')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/scheduling/" #if $pane == "Scheduling" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-time"></span>
                        <strong>$T('cmenu-scheduling')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/rss/" #if $pane == "RSS" then 'class="active"' else ""#>
                        <svg class="rss-icon-svg" viewBox="0 0 8 8">
                            <rect class="rss-button" width="8" height="8" />
                            <circle class="rss-symbol" cx="2" cy="6" r="1" />
                            <path class="rss-symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z" />
                            <path class="rss-symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z" />
                        </svg>
                        <strong>$T('cmenu-rss')</strong>
                    </a>
                </li>
                <li>
                    <a href="${root}config/special/" #if $pane == "Special" then 'class="active"' else ""#>
                        <span class="glyphicon glyphicon-education"></span>
                        <strong>$T('cmenu-special')</strong>
                    </a>
                </li>
                <li>
                    <a href="$help_uri" target="_blank">
                        <span class="glyphicon glyphicon-question-sign"></span>
                        <strong>$T('menu-help')</strong>
                    </a>
                </li>
                <li class="dropdown" id="search-menu">
                    <a data-toggle="dropdown" href="#">
                        <span class="glyphicon glyphicon-search"></span>
                        <strong><span class="glyphicon glyphicon-search"></span></strong>
                    </a>
                    <ul class="dropdown-menu" id="search-dropdown">
                        <li>
                            <form onsubmit="return false">
                                <input type="text" name="config-search" id="search-box" placeholder="$T('cmenu-search')" onkeyup="doConfigSearch(this)">
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="content" class="container">
<!-- Content start -->
