<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng-app="backupApp" ng-controller="AppController">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title ng-bind-template="{{systemInfo.MachineName}} - {{brandingService.appName}}"></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" type="text/css" href="styles/smoothness/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="styles/default.css" disabled="disabled">
    <link rel="stylesheet" type="text/css" href="styles/dark.css" disabled="disabled">	 
    <link rel="stylesheet" type="text/css" ng-href="styles/{{active_theme}}.css">

    <script type="text/javascript" src="scripts/libs/oldbrowsersupport.js"></script>
    <script type="text/javascript" src="scripts/libs/cryptojs.js"></script>
    <script type="text/javascript" src="scripts/libs/zxcvbn.js"></script>
    <script>
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1) {
            /* Microsoft Internet Explorer detected in. */
            /* Bluebird is necessary to make Promises work in IE */
            document.write('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" ></scr' + 'ipt>');
        }
    </script>

    <script type="text/javascript" src="scripts/libs/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/libs/jquery-ui.min.js"></script>

    <script type="text/javascript" src="scripts/angular/angular.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-route.min.js"></script>

    <script type="text/javascript" src="scripts/angular/angular-loader.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-animate.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-cookies.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-resource.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular-touch.min.js"></script>

    <script type="text/javascript" src="scripts/libs/modal.min.js"></script>
    <script type="text/javascript" src="scripts/libs/dxTree.js"></script>
    <script type="text/javascript" src="scripts/libs/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="scripts/libs/clipboard.min.js"></script>
    <script type="text/javascript" src="scripts/libs/ngclipboard.min.js"></script>

    <script type="text/javascript" src="scripts/libs/angular-gettext.min.js"></script>

    <script type="text/javascript" src="scripts/app.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/menu.js?v=2.1.0.5"></script>

    <script type="text/javascript" src="scripts/angular-gettext-cli_compiled_js_output.js?v=2.1.0.5"></script>

    <script type="text/javascript" src="scripts/services/AppUtils.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/BrandingService.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/BackupList.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/AppService.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/ServerStatus.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/SystemInfo.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/EditUriBackendConfig.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/EditUriBuiltins.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/NotificationService.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/DialogService.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/LogService.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/services/EditBackupService.js?v=2.1.0.5"></script>

    <script type="text/javascript" src="scripts/controllers/AppController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/AboutController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/StateController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/SystemSettingsController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/HomeController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/EditBackupController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/RestoreController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/RestoreDirectController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/LogController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/BackupLogController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/ExportController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/ImportController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/UpdateChangelogController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/DialogController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/LocalDatabaseController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/DeleteController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/RestoreWizardController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/AddWizardController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/PauseController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/CommandlineController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/ThrottleController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/ChangePasswordController.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/controllers/ConfirmDeleteController.js?v=2.1.0.5"></script>

    <script type="text/javascript" src="scripts/filters/timeremaining.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/filters/highlight.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/filters/parsetimestamp.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/filters/moment.js?v=2.1.0.5"></script>

    <script type="text/javascript" src="scripts/directives/backupEditUri.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/sourceFolderPicker.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/targetFolderPicker.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/parseFilterType.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/parseSizeNumber.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/parseAdvancedOption.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/stringArrayAsText.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/waitArea.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/restoreFilePicker.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/keyboardHandlers.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/notificationArea.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/progressBar.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/advancedOptionsEditor.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/timeFormatFixer.js?v=2.1.0.5"></script>
    <script type="text/javascript" src="scripts/directives/externalLink.js?v=2.1.0.5"></script>
</head>
<body>

    <div class="container">
        <div class="header">
            <div class="logo">
                <a href="#/">
                    <img class="mainlogo" ng-src="{{brandingService.appLogoPath}}" />
                </a>

                <div class="logotext">
                    <a href="#/" class="home">{{brandingService.appName}}</a>
                    <div class="build-suffix" ng-hide="systemInfo.ServerVersionType == 'stable' || systemInfo.ServerVersionType == ''">{{systemInfo.ServerVersionType}}</div>
                    <div class="powered-by">{{brandingService.appSubtitle}}</div>
                </div>
            </div>

            <a href class="menubutton hidden" data-target="mainmenu" translate>Menu</a>

            <div class="action-icons-small">
                <button class="pause" ng-class="{'active': state.programState != 'Running'}" ng-click="pauseOptions()" title="{{state.programState == 'Running' ? 'Click to see the pause options' : 'Click to resume'}}"></button>
                <button class="throttle {{throttle_active ? 'active' : 'inactive'}}" ng-click="throttleOptions()" title="{{'Click to set throttle options' | translate}}" alt="{{'Click to set throttle options' | translate}}"></button>
            </div>

            <div class="statepadding">
                <div class="state" ng-controller="StateController">
                    <div class="content">
                        <div ng-hide="state.activeTask == null">
                            <span ng-hide="activeBackup == null">
                                <span ng-hide="StopReqId == activeTaskID">
                                    <div class="task-state-info">
                                        <div class="task-name" title="{{activeBackup.Backup.Name}}">
                                            <strong>{{activeBackup.Backup.Name}}</strong>
                                        </div>
                                        <strong>: </strong>
                                        <div>
                                            {{StateText}}
                                        </div>
                                    </div>
                                </span>
                                <span ng-show="StopReqId == activeTaskID">
                                    <strong translate>Stopping after the current file:</strong> {{activeBackup.Backup.Name}}
                                </span>
                            </span>
                            <span ng-show="activeBackup == null">
                                <strong ng-hide="StopReqId == activeTaskID" translate>Running task:</strong>
                                <strong ng-show="StopReqId == activeTaskID" translate>Stopping task:</strong>
                                {{StateText}}
                            </span>

                        </div>

                        <div ng-show="state.activeTask == null &amp;&amp; nextTask != null">
                            <strong translate>Next task:</strong> {{nextTask.Backup.Name}}
                        </div>

                        <div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask != null"><strong translate>Next scheduled task:</strong> {{nextScheduledTask.Backup.Name}} <span title="{{nextScheduledTime | parsetimestamp}}">{{nextScheduledTime | parseDate:forceActualDate }}</span></div>

                        <div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask == null" translate>No scheduled tasks</div>
                    </div>

                    <div class="buttons">
                        <button ng-hide="state.activeTask == null" class="stop" ng-click="stopDialog()" translate></button>
                        <button ng-hide="state.activeTask != null || state.programState == 'Running'" class="resume" ng-click="sendResume()" translate></button>
                    </div>

                    <div class="progress-bar progress-bar-striped" ng-class="{active: Progress &lt; 0}" role="progressbar" aria-valuenow="{{Progress * 100}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': (Progress * 100) + '%'}"></div>

                </div>

                <div class="action-icons">
                    <button class="pause" ng-class="{'active': state.programState != 'Running'}" ng-click="pauseOptions()" title="{{state.programState == 'Running' ? 'Click to see the pause options' : 'Click to resume'}}"></button>
                    <button class="throttle {{throttle_active ? 'active' : 'inactive'}}" ng-click="throttleOptions()" title="{{'Click to set throttle options' | translate}}" alt="{{'Click to set throttle options' | translate}}"></button>
                </div>
            </div>
        </div>

        <div class="body">
            <div class="mainmenu menu" id="mainmenu">
                <ul>
                    <li>
                        <a href="#/" class="home" ng-class="{active: current_page == 'home'}" translate>Home</a>
                    </li>
                    <li>
                        <a class="add" href="#/addstart" ng-class="{active: current_page == 'add'}" translate>Add backup</a>
                    </li>
                    <li>
                        <a href="#/restorestart" ng-class="{active: current_page == 'restore'}" class="restore" translate>Restore</a>
                    </li>
                    <li ng-hide="state.programState == 'Running'">
                        <a href ng-click="resume()" id="resume" class="resume" translate>Resume</a>
                    </li>
                    <li>
                        <a href="#/settings" class="settings" ng-class="{active: current_page == 'settings'}" translate>Settings</a>
                    </li>
                    <li>
                        <a href="#/about" class="about" ng-class="{active: current_page == 'about'}" translate>About</a>
                    </li>
                    <li ng-show="isLoggedIn">
                        <a href ng-click="log_out()" class="logout" translate>Log out</a>
                    </li>
                </ul>
            </div>

            <div ng-view class="content" style="width: 100%">
            </div>
        </div>

        <div class="footer">
            <div class="about-footer">
                <ul>
                    <li>
                        <a href="#/about" translate>About</a>
                    </li>
                </ul>
            </div>

            <div class="social">
                {{'Visit us on' | translate}}<div class="external-link-image"></div>
                <ul>
                    <li>
                        <a href="https://forum.duplicati.com" target="_blank" rel="external"><img src="img/social/duplicati.png" srcset="img/social/duplicati.png 1x, img/social/duplicati_2x.png 2x, img/social/duplicati_3x.png 3x" alt="{{'Duplicati forum' | translate}}" title="{{'Duplicati forum' | translate}}" width="27" /></a>
                    </li>
                    <li>
                        <a href="https://github.com/duplicati" target="_blank" rel="external"><img src="img/social/github.png" srcset="img/social/github.png 1x, img/social/github_2x.png 2x, img/social/github_3x.png 3x" alt="Github" title="Github" /></a>
                    </li>
                    <!-- <li>
                        <a href="http://www.duplicati.com" target="_blank" rel="external"><img src="img/social/duplicati.png" srcset="img/social/duplicati.png 1x, img/social/duplicati_2x.png 2x, img/social/duplicati_3x.png 3x" alt="{{'Duplicati Website' | translate}}" title="{{'Duplicati Website' | translate}}" /></a>
                    </li> -->
                </ul>
            </div>
            <div class="themelink">
                <a href="https://docs.duplicati.com" target="_blank" rel="external">{{'Manual' | translate}}<div class="external-link-image"></div></a>
            </div>
        </div>
    </div>

    <notification-area></notification-area>

    <div ng-controller="DialogController">
        <div ng-show="state.CurrentItem != null && state.CurrentItem.title != null" class="blocker" ng-click=""></div>

        <div ng-show="state.CurrentItem != null && state.CurrentItem.title != null" class="modal-dialog ng-cloak">
            <div class="info">
                <div class="title">{{state.CurrentItem.title}}</div>
                <div class="content" ng-show="state.CurrentItem.message || state.CurrentItem.enableTextarea">
                    {{state.CurrentItem.message}}
                    <form ng-show="state.CurrentItem.enableTextarea">
                        <textarea placeholder="{{state.CurrentItem.placeholder}}" ng-model="state.CurrentItem.textarea" id="copytarget"></textarea>
                    </form>
                </div>
                <div class="content" ng-show="state.CurrentItem.htmltemplate" ng-include="state.CurrentItem.htmltemplate"></div>
                <div class="content buttons">
                    <ul>
                        <li ng-show="state.CurrentItem.buttonTemplate" ng-include="state.CurrentItem.buttonTemplate" style="display: inline-block"></li>
                        <li ng-repeat="btn in state.CurrentItem.buttons track by $index" style="display: inline-block"><a href class="button" ng-click="onButtonClick($index)">{{btn}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="connection-lost-blocker" ng-show="state.connectionState != 'connected'" class="blocker ng-cloak" ng-click=""></div>

    <div id="connection-lost-dialog" ng-show="state.connectionState != 'connected'" class="connection-lost ng-cloak">
        <div class="info">
            <div class="title" translate>Connection lost</div>
            <div class="content" ng-show="state.connectionState == 'unauthorized'" translate>
                <p>Connection to server was rejected due to invalid authentication.</p>
                <p>Log in again, or re-open the page from the TrayIcon (if applicable)</p>
            </div>
            <div class="content" ng-show="state.connectionState != 'unauthorized' && state.connectionState != 'connecting'" translate translate-params-time="(state.connectionAttemptTimer + 1000) | timeremaining">
                The connection to the server is lost, attempting again in {{time}} …
            </div>
            <div class="content" translate ng-hide="state.connectionState != 'connecting'">
                Connecting to server …
            </div>
            <div class="content buttons">
                <a href ng-show="state.connectionState == 'unauthorized'" ng-click="reload()" class="button" translate>Reload</a>
                <a href ng-show="state.connectionState == 'unauthorized'" ng-click="login()" class="button" translate>Log in</a>
                <a ng-show="state.connectionState == 'unauthorized'" href="https://docs.duplicati.com/detailed-descriptions/duplicati-access-password" target="_blank" class="button" translate>Help</a>
                <a href ng-show="state.connectionState != 'unauthorized' && state.connectionState != 'connecting'" ng-click="doReconnect()" class="button" translate>Connect now</a>
                <a href ng-hide="state.connectionState != 'connecting'" class="button" style="cursor: default;" translate>Connecting …</a>
            </div>
        </div>
    </div>

    <div ng-show="false" class="blocker" ng-click=""></div>

    <div ng-show="false" class="connection-lost" ng-click="">
        <div class="info">
            <div class="title">Not loaded …</div>
            <div class="content">
                The page is not yet loaded, this can be caused by a defective install, a browser issue or a slow connection.
            </div>
            <div class="content buttons">
                <a href class="button">Reload page</a>
            </div>
        </div>
    </div>

</body>
</html>
