<div class="settings" ng-controller="SystemSettingsController">
    
    <div class="page-title">
        <h2 translate>Settings</h2>
        <a href="#" class="ekup-button ekup-warning-button">
            <i class="ic-x"></i>
            <span translate>Cancel</span>
        </a>
        <button ng-disabled="!SFTPisValid" ng-click="save()" class="ekup-button">
            <i class="ic-save"></i>
            <span translate>Save</span>
        </button>
    </div>


    <div class="card">
        <nav class="tabs">
            <ul>
                <li ng-class="{active: activeTab == 'user'}" ng-click="activeTab = 'user'">
                    <i class="ic-user-profile"></i>
                    <span translate>User preferences</span>
                </li>
                <li ng-class="{active: activeTab == 'sftp'}" ng-click="activeTab = 'sftp'">
                    <i class="ic-server"></i>
                    <span translate>SFTP config</span>
                </li>
                <li ng-class="{active: activeTab == 'options'}" ng-click="activeTab = 'options'">
                    <i class="ic-settings"></i>
                    <span translate>Options</span>
                </li>
            </ul>
        </nav>

        <div class="user-settings-tab" ng-show="activeTab == 'user'">
            <h3 translate>User information</h3>
            <div class="input mixed multiple">
                <label for="user_email" translate>Email</label>
                <input type="text" name="user_email" id="user_email" ng-model="userEmail" placeholder="{{'Enter the user email' | translate}}" />
                <div class="sublabel"><p translate>This mail is used to notify the user (ex: reset password) and prefill the recipient list (step 6) during backup creation. If you change this mail it will not update the mail for alert in the existing backup.</p></div>
            </div>

            <h3>{{'Pause after startup or hibernation' | translate}}</h3>
            <div class="input mixed multiple">
                <label for="pauseTime" translate>Pause</label>
                <select id="pauseTime" name="pauseTime" ng-model="startupDelayDurationValue">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="30">30</option>
                    <option value="45">45</option>
                </select>
                <select id="pauseFormat" name="pauseFormat" ng-model="startupDelayDurationMultiplier">
                    <option value="s" translate>Seconds</option>
                    <option value="m" translate>Minutes</option>
                    <option value="h" translate>Hours</option>
                </select>
                <div class="sublabel" translate>Ekup will run when started, but will remain in a paused state for the duration. Ekup will occupy minimal system resources and no backups will be run.</div>
            </div>

            <h3 translate>User interface settings</h3>
            <div class="input mixed multiple">
                <label for="userinterfacelanguage" translate>Language in user interface</label>

                <select id="userinterfacelanguage" ng-model="uiLanguage" ng-options="item.Code as item.DisplayName + ' (' + item.Code + ', ' + item.EnglishName + ')' for item in SystemInfo.SupportedLocales">
                    <option value="">{{ SystemInfo.BrowserLocaleSupported ?
                                        lang_browser_default + " (" + SystemInfo.BrowserLocale.DisplayName + ", " + SystemInfo.BrowserLocale.Code + ")" :
                                        lang_default + " (en, English)" }}</option>
                </select>
            </div>

            <div ng-repeat="module in ServerModules">
                <h2>{{module.DisplayName}}</h2>

                <p ng-show="(module.ServiceLink || '').length > 0"><external-link link="module.ServiceLink">{{module.Description}}</external-link></p>
                <p ng-show="(module.ServiceLink || '').length == 0">{{module.Description}}</p>

                <div class="input" ng-repeat="opt in module.SupportedGlobalCommands">
                    <label for="{{module.Key}}-{{opt.Name}}" title="{{opt.LongDescription}}">{{opt.ShortDescription}}</label>
                    <input type="text" title="{{opt.LongDescription}}" name="{{module.Key}}-{{opt.Name}}" id="{{module.Key}}-{{opt.Name}}" ng-model="servermodulesettings[opt.Name]" />
                </div>
            </div>
        </div>
        <div class="sftp-tab" ng-show="activeTab == 'sftp'">
            <setting-sftp-server-config uri="defaultBackupTargeturl"
                folder-path-prefix="backupFolderPathPrefix"
                is-valid="SFTPisValid"
                can-change-config="Backups.length == 0"
            ></setting-sftp-server-config>
        </div>
        <div class="options-tab" ng-show="activeTab == 'options'">
            <h3 translate>Default options</h3>
            <div class="sublabel"><p translate>Options added here are applied to all backups, but can be overridden in each individual backup</p></div>
            <div class="input textarea" ng-show="ShowAdvancedTextArea">
                <label for="backupOptions" translate>Options</label>
                <a href ng-click="ShowAdvancedTextArea = false" class="ekup-button ekup-button-secondary" style="margin-bottom: 10px;" translate>Edit as list</a>
                <textarea id="backupOptions" ng-model="advancedOptions" string-array-as-text placeholder="{{AppUtils.format(AppUtils.exampleOptionString, '--dblock-size=100MB')}}"></textarea>
            </div>

            <div class="input" ng-hide="ShowAdvancedTextArea">
                <label for="backupOptions" translate>Options</label>
                <a href ng-click="ShowAdvancedTextArea = true" class="ekup-button ekup-button-secondary" style="margin-bottom: 10px;" translate>Edit as text</a>
                <advanced-options-editor ng-option-list="advancedOptionList" ng-model="advancedOptions"></advanced-options-editor>
            </div>
        </div>
    </div>
</div>
