<!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/style.css">
    <link rel="stylesheet" type="text/css" href="styles/themes.css">
    <link rel="stylesheet" type="text/css" href="../oem/ngax/styles/oem.css" />
    <link rel="stylesheet" type="text/css" href="../customized/customized.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 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"></script>
    <script type="text/javascript" src="scripts/menu.js"></script>

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

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

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

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

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

    <script type="text/javascript" src="../package/ngax/package.js"></script>
    <script type="text/javascript" src="../oem/ngax/scripts/oem.js"></script>
    <script type="text/javascript" src="../customized/customized.js"></script>

</head>
<body class="theme-{{active_theme}}">

    <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>

            <div class="donate" ng-hide="systemInfo.SuppressDonationMessages">
                <external-link link="'https://www.duplicati.com/donate'">{{'Donate' | translate }}</external-link>
            </div>


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

            <div class="action-icons-small">
                <div class="pause" ng-class="{'active': state.programState != 'Running'}" ng-click="pauseOptions()" title="{{state.programState == 'Running' ? 'Click to see the pause options' : 'Click to resume'}}"></div>
                <div class="throttle {{throttle_active ? 'active' : 'inactive'}}" ng-click="throttleOptions()" title="{{'Click to set throttle options' | translate}}" alt="{{'Click to set throttle options' | translate}}"></div>
            </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 upload:</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 | moment: 'calendar'}}</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">
                        <div ng-hide="state.activeTask == null" class="stop" ng-click="stopDialog()" translate></div>
                        <div ng-hide="state.activeTask != null || state.programState == 'Running'" class="resume" ng-click="sendResume()" translate></div>
                    </div>

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

                </div>

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

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

            <div class="donate">
                <ul>
                    <li ng-hide="systemInfo.SuppressDonationMessages">
                        <external-link link="'https://www.duplicati.com/donate'">{{'Donate' | translate}}</external-link>
                    </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" alt="{{'Duplicati forum' | translate}}" title="{{'Duplicati forum' | translate}}" width="28" /></a>
                    </li>
                    <li>
                        <a href="https://github.com/duplicati" target="_blank" rel="external"><img src="img/social/github.png" alt="Github" title="Github" /></a>
                    </li>
                    <li>
                        <a href="https://www.facebook.com/pages/Duplicati/105118456272281" target="_blank" rel="external"><img src="img/social/facebook.png" alt="Facebook" title="Facebook" /></a>
                    </li>
                    <li>
                        <a href="https://plus.google.com/105271984558189185842" target="_blank" rel="external"><img src="img/social/google.png" alt="Google Plus" title="Google Plus" /></a>
                    </li>
                    <!-- <li>
                        <a href="http://www.duplicati.com" target="_blank" rel="external"><img src="img/social/duplicati.png" alt="{{'Duplicati Website' | translate}}" title="{{'Duplicati Website' | translate}}" /></a>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>

    <notification-area></notification-area>

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

        <div ng-show="state.CurrentItem != 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 !='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 != '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>
