<script>$(function () { $(".resizable").resizable(); });</script>

<div class="add" ng-controller="EditBackupController">
    <div class="steps">
        <div class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0">
            <span>1</span>
        </div>
        <div class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1"
            ng-disabled="Backup.Name == undefined || Backup.Name == ''">
            <span>2</span>
        </div>
        <div class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2"
            ng-disabled="step2IsValid != true">
            <span>3</span>
        </div>
        <div class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3"
            ng-disabled="step2IsValid != true">
            <span>4</span>
        </div>
        <div class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4"
            ng-disabled="step2IsValid != true">
            <span>5</span>
        </div>
        <div class="step step6" ng-class="{active: CurrentStep == 5}" ng-click="CurrentStep = 5"
            ng-disabled="step2IsValid != true">
            <!-- <div class="step step6" ng-class="{active: CurrentStep == 5}" ng-click="CurrentStep = 5"> -->
            <span>6</span>
        </div>
    </div>
    <!-- .steps -->

    <ol class="steps-legend">
        <li ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
        <li ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1"
            ng-disabled="Backup.Name == undefined || Backup.Name == ''" translate>Destination</li>
        <li ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2"
            ng-disabled="step2IsValid != true" translate>Source Data</li>
        <li ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3"
            ng-disabled="step2IsValid != true" translate>Schedule</li>
        <li ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4"
            ng-disabled="step2IsValid != true" translate>Options</li>
        <li ng-class="{active: CurrentStep == 5}" class="step6" ng-click="CurrentStep = 5"
            ng-disabled="step2IsValid != true" translate>Notifications</li>
    </ol>
    <!-- .steps-legend -->

    <div class="steps-boxes">
        <div class="step step1" ng-class="{active: CurrentStep == 0}">
            <div class="form">
                <form class="styled">
                    <h2 translate>General backup settings</h2>

                    <div class="input text">
                        <label for="name" translate>Name</label>
                        <input type="text" name="name" id="name" ng-model="Backup.Name"
                            placeholder="{{'My Photos' | translate}}" />
                    </div>
                    <div class="input textarea">
                        <label for="description" translate>Description (optional)</label>
                        <textarea name="description" id="description" ng-model="Backup.Description"></textarea>
                    </div>
                    <!-- <div class="input select" ng-hide="SystemInfo.EncryptionModules.length == 0">
                        <label for="encryption" translate>Encryption</label>
                        <select name="encryption" id="encryption" ng-model="Options['encryption-module']" ng-options="module.Key as module.DisplayName for module in SystemInfo.EncryptionModules">
                            <option value="" translate>No encryption</option>
                        </select>
                    </div> -->

                    <div class="input encryptionhint" ng-hide="isEditMode">
                        <p class="warning" translate>
                            You can set a passphrase to protect your backups and be accessible only by you. Be caustious to remember this passphrase, it will be asked to make a restore from a different computer or installtion.
                        </p>
                    </div>

                    <div class="input password" ng-hide="isEditMode">
                        <label for="passphrase" translate>Passphrase (optional)</label>
                        <input autocomplete="new-password" type="{{ShowPassphrase ? 'text' : 'password'}}"
                            name="passphrase" id="passphrase" ng-model="Options['passphrase']" />
                    </div>
                    <div class="input password" ng-hide="isEditMode">
                        <label for="repeat-passphrase" translate>Repeat Passphrase</label>
                        <input autocomplete="new-password" type="{{ShowPassphrase ? 'text' : 'password'}}"
                            name="repeat-passphrase" id="repeat-passphrase" ng-model="RepeatPasshrase" />

                        <div class="tools">
                            <ul>
                                <li>
                                    <a href ng-click="togglePassphraseVisibility()" ng-show="ShowPassphrase"
                                        translate>Hide</a>
                                    <a href ng-click="togglePassphraseVisibility()" ng-hide="ShowPassphrase"
                                        translate>Show</a>
                                </li>
                                <!-- <li>|</li> -->
                                <!-- <li>
                                    <a href ng-click="generatePassphrase()" translate>Generate</a>
                                </li> -->
                                <li ng-show="PassphraseScoreString">|</li>
                                <li class="strength score-{{PassphraseScore}}" ng-show="PassphraseScoreString">
                                    {{PassphraseScore != 'x' ? 'Strength: ' : ''}} {{PassphraseScoreString}}</li>
                            </ul>
                        </div>
                    </div>

                    <div class="buttons">
                        <input class="submit next" type="button" id="nextStep1" ng-disabled="!step1IsValid"
                            ng-click="nextPage()" value="{{'Next' | translate}} &gt;" />
                    </div>
                </form>
            </div>
        </div>
        <!-- .step1 -->

        <div class="step step2" ng-class="{active: CurrentStep == 1}">
            <form class="styled">
                <div class="headerthreedotmenu">
                    <h2 translate>Backup destination</h2>

                    <div class="contextmenu_container">
                        <a href title="{{'Menu' | translate}}"><img src="img/three_dots.png"
                                srcset="img/three_dots.png 1x, img/three_dots_2x.png 2x, img/three_dots_3x.png 3x"
                                id="threedotmenubutton_add_destination" class="threedotmenubutton" /></a>

                        <div class="contextmenu" id="threedotmenu_add_destination">
                            <ul>
                                <li>
                                    <a href ng-click="importUrl()" translate>Import Destination URL</a>
                                </li>
                                <li>
                                    <a href ng-click="copyUrlToClipboard()" translate>Copy Destination URL to Clipboard</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <backup-edit-uri uri="Backup.TargetURL" folder-path-prefix="Backup.TargetFolderPathPrefix"
                    is-valid="step2IsValid" set-builduri-fn="setBuilduriFn(builduriFn)"></backup-edit-uri>

                <div class="buttons">
                    <input class="submit next" type="button" id="nextStep2" ng-disabled="step2IsValid != true"
                        ng-click="nextPage()" value="{{'Next' | translate}} &gt;" />
                    <input class="submit prev" type="button" id="prevStep2" ng-click="prevPage()"
                        value="&lt; {{'Previous' | translate}}" />
                </div>
            </form>
        </div>
        <!-- .step2 -->

        <div class="step step3" ng-class="{active: CurrentStep == 2}">
            <form class="styled">
                <div class="box browser">
                    <div class="headerthreedotmenu">
                        <h2 translate>Source data</h2>

                        <div class="contextmenu_container">
                            <a href title="{{'Menu' | translate}}"><img src="img/three_dots.png"
                                    srcset="img/three_dots.png 1x, img/three_dots_2x.png 2x, img/three_dots_3x.png 3x"
                                    id="threedotmenubutton_add_source_folders" class="threedotmenubutton" /></a>

                            <div class="contextmenu" id="threedotmenu_add_source_folders">
                                <ul>
                                    <li ng-hide="EditSourceAdvanced">
                                        <a href ng-click="EditSourceAdvanced = true" translate>Show advanced editor</a>
                                    </li>
                                    <li ng-show="EditSourceAdvanced">
                                        <a href ng-click="EditSourceAdvanced = false" translate>Show treeview</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="input checklinks">
                        <a href class="{{EditSourceAdvanced ? 'inactive' : ''}}"
                            ng-click="showhiddenfolders = !showhiddenfolders"><i
                                class="fa {{showhiddenfolders ? 'fa-check' : ''}}"></i> {{'Show hidden folders' |
                            translate}}</a>
                    </div>
                    <div class="resizable filepicker" ng-hide="EditSourceAdvanced">
                        <div translate>
                            You can exclude files and folders contained in a selected folder by clicking on them. (a red cross will appear instead of the green check)
                        </div>
                        <source-folder-picker ng-sources="Backup.Sources" ng-filters="Backup.Filters"
                            ng-show-hidden="showhiddenfolders"></source-folder-picker>
                    </div>
                    <div class="input textarea" ng-show="EditSourceAdvanced">
                        <label for="SourcePathList" translate>Source folders</label>
                        <textarea id="SourcePathList" string-array-as-text ng-model="Backup.Sources"
                            ng-model-options="{updateOn: 'blur'}"></textarea>
                    </div>
                    <!-- <div class="input text overlayButton">
                        <input type="text" name="sourcePath" id="sourcePath" placeholder="{{'Add a path directly' | translate}}" ng-model="manualSourcePath" ng-disabled="validatingSourcePath" />
                        <a href id="sourceFolderPathAdd" class="button"  ng-disabled="validatingSourcePath || manualSourcePath == null || manualSourcePath == ''" ng-click="addManualSourcePath()">
                            <span ng-show="validatingSourcePath" translate>Validating …</span>
                            <span ng-hide="validatingSourcePath" translate>Add path</span>
                        </a>
                    </div> -->
                </div>
                <div class="box filters">
                    <div class="headerthreedotmenu">
                        <a href ng-click="showFilter = !showFilter" class="expandable">
                            <h2 translate>Filters</h2>
                            <img ng-show="showFilter" src="img/arrow_collapse_green.png"
                                srcset="img/arrow_collapse_green.png 1x, img/arrow_collapse_green_2x.png 2x, img/arrow_collapse_green_3x.png 3x">
                            <img ng-hide="showFilter" src="img/arrow_expand_green.png"
                                srcset="img/arrow_expand_green.png 1x, img/arrow_expand_green_2x.png 2x, img/arrow_expand_green_3x.png 3x">
                        </a>

                        <div class="contextmenu_container" ng-show="showFilter">
                            <a href title="{{'Menu' | translate}}"><img src="img/three_dots.png"
                                    srcset="img/three_dots.png 1x, img/three_dots_2x.png 2x, img/three_dots_3x.png 3x"
                                    id="threedotmenubutton_add_source_filters" class="threedotmenubutton"
                                    title="{{'Menu' | translate}}" /></a>

                            <div class="contextmenu" id="threedotmenu_add_source_filters">
                                <ul>
                                    <li>
                                        <a href ng-show="EditFilterAdvanced" ng-click="EditFilterAdvanced = false"
                                            translate>Edit as list</a>
                                    </li>
                                    <li>
                                        <a href ng-hide="EditFilterAdvanced" ng-click="EditFilterAdvanced = true"
                                            translate>Edit as text</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div ng-show="showFilter">
                        <div class="input textarea" ng-show="EditFilterAdvanced">
                            <!--<label for="FilterList">Filters <span class="info">i</span></label>-->
                            <textarea id="FilterList" string-array-as-text ng-model="Backup.Filters"
                                ng-model-options="{updateOn: 'blur'}"></textarea>
                        </div>
                        <div class="input textarea" ng-hide="EditFilterAdvanced">
                            <ul id="simplefilterlist">
                                <li ng-repeat="f in Backup.Filters track by $index">
                                    <select parse-filter-type ng-model="Backup.Filters[$index]"
                                        ng-options="item.key as item.name for item in AppUtils.filterClasses">
                                    </select>

                                    <div
                                        ng-show="!(Backup.Filters[$index].indexOf('-{') == 0 || Backup.Filters[$index].indexOf('+{') == 0)">
                                        <input type="text" parse-filter-content ng-model="Backup.Filters[$index]"
                                            ng-model-options="{updateOn: 'blur'}"
                                            placeholder="{{'Enter expression here' | translate}}" />
                                    </div>
                                    <div
                                        ng-show="Backup.Filters[$index].indexOf('-{') == 0 || Backup.Filters[$index].indexOf('+{') == 0">
                                        <select parse-filter-content ng-model="Backup.Filters[$index]"
                                            ng-options="item.value as item.name for item in AppUtils.filterGroups">
                                        </select>
                                    </div>

                                    <a class="button" href title="{{'Remove' | translate}}"
                                        ng-click="Backup.Filters.splice($index, 1)">X</a>
                                </li>

                            </ul>
                            <a href ng-click="Backup.Filters.push('-\\')" translate>Add filter</a>
                        </div>
                    </div>

                    <div ng-show="showFilter">
                        <div class="input checkbox multiple">
                            <div ng-repeat="attr in fileAttributes">
                                <input id="fileattr_{{attr.value}}" type="checkbox" name="fileattr_{{attr.value}}"
                                    value="{{attr.value}}" ng-checked="ExcludeAttributes.indexOf(attr.value) > -1"
                                    ng-click="toggleExcludeAttributes(attr.value)" />
                                <label for="fileattr_{{attr.value}}">{{attr.name}}</label>
                            </div>
                        </div>

                        <div class="input text select multiple">
                            <input id="exclude-large-files" type="checkbox" class="simple-checkbox"
                                ng-model="ExcludeLargeFiles" />
                            <label for="exclude-large-files" translate>Files larger than:</label>

                            <input type="number" parse-size-number="uppercase"
                                ng-model="Options['--skip-files-larger-than']" id="exclude-larger-than-number"
                                ng-disabled="!ExcludeLargeFiles" value="1" />
                            <select parse-size-multiplier="uppercase" id="exclude-larger-than-multiplier"
                                ng-model="Options['--skip-files-larger-than']" ng-disabled="!ExcludeLargeFiles"
                                ng-options="item.value as item.name for item in AppUtils.fileSizeMultipliers">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <input class="submit next" type="button" id="nextStep3" ng-click="nextPage()"
                        value="{{'Next' | translate}} &gt;" />
                    <input class="submit prev" type="button" id="prevStep3" ng-click="prevPage()"
                        value="&lt; {{'Previous' | translate}}" />
                </div>
            </form>
        </div>
        <!-- .step3 -->

        <div class="step step4" ng-class="{active: CurrentStep == 3}">
            <form class="styled">
                <h2 translate>Schedule</h2>
                <div class="input checkbox multiple">
                    <input type="checkbox" id="useScheduleRun" ng-checked="Schedule != null"
                        ng-click="toggleSchedule()" />
                    <label for="useScheduleRun" translate>Automatically run backups.</label>
                </div>
                <div ng-hide="Schedule == null">
                    <div translate>If a date was missed, the job will run as soon as possible.</div>
                    <br />
                    <div class="input text multiple">
                        <label for="nextRunTime" translate>Next time</label>
                        <input type="time" ng-model="Schedule.Time" id="nextRunTime" />
                        <input type="date" ng-model="Schedule.Time" id="nextRunDate" />
                    </div>
                    <div class="input text select multiple repeat">
                        <label for="repeatRunNumber" translate>Run again every</label>
                        <input
                            ng-show="AppUtils.contains_key(AppUtils.timerangeMultipliers, AppUtils.splitSizeString(Schedule.Repeat)[1], 'value')"
                            type="number" parse-size-number ng-model="Schedule.Repeat" id="repeatRunNumber" />
                        <select parse-size-multiplier ng-model="Schedule.Repeat" id="repeatRunMultiplier"
                            ng-options="item.value as item.name for item in AppUtils.timerangeMultipliers">
                            <!-- <option value="" translate>custom</option> -->
                        </select>

                        <input type="text"
                            ng-show="!AppUtils.contains_key(AppUtils.timerangeMultipliers, AppUtils.splitSizeString(Schedule.Repeat)[1], 'value')"
                            ng-model="Schedule.Repeat" ng-model-options="{updateOn: 'blur'}" />
                    </div>
                    <div class="input checkbox multiple">
                        <strong translate>Allowed days</strong>

                        <div ng-repeat="day in AppUtils.daysOfWeek">
                            <input class="simple-checkbox" id="dayofweek_{{day.value}}" type="checkbox"
                                name="dayofweek_{{day.value}}" value="{{day.value}}"
                                ng-checked="Schedule.AllowedDays.indexOf(day.value) > -1"
                                ng-click="toggleAllowedDays(day.value)" />
                            <label for="dayofweek_{{day.value}}">{{day.name}}</label>
                        </div>
                    </div>
                </div>

                <div class="buttons">
                    <input class="submit next" type="button" id="nextStep4" ng-click="nextPage()"
                        value="{{'Next' | translate}} &gt;" />
                    <input class="submit prev" type="button" id="prevStep4" ng-click="prevPage()"
                        value="&lt; {{'Previous' | translate}}" />
                </div>
            </form>
        </div>
        <!-- .step4 -->

        <div class="step step5" ng-class="{active: CurrentStep == 4}">
            <form class="styled">
                <h2 translate>General options</h2>

                <div class="input multiple text select keepBackups">
                    <label for="keepTimeType" translate>Backup retention</label>
                    <select id="keepTimeType" ng-model="KeepType">
                        <option value="" translate>Keep all backups</option>
                        <option value="time" translate>Delete backups that are older than</option>
                        <option value="versions" translate>Keep a specific number of backups</option>
                        <option value="smart" translate>Smart backup retention</option>
                        <!-- <option value="custom" translate>Custom backup retention</option> -->
                    </select>

                    <div ng-show="KeepType == ''" class="hint" translate>
                        Nothing will be deleted. The backup size will grow with each change.
                    </div>

                    <div ng-show="KeepType == 'smart'" class="hint" translate>
                        Over time backups will be deleted automatically. There will remain one backup for each of the last 7 days, each of the last 4 weeks, each of the last 12 months. There will always be at least one remaining backup.
                    </div>

                    <!-- <div class="retention-options" ng-show="KeepType == 'custom'">
                        <input type="text" ng-model="Options['retention-policy']" ng-show="KeepType == 'custom'" />
                    </div>
                    <div class="hint" translate  ng-show="KeepType == 'custom'">
                        Enter a retention strategy manually. Placeholders are D/W/Y for days/weeks/years and U for unlimited. The syntax is: 7D:1D,4W:1W,36M:1M. This example keeps one backup for each of the next 7 days, one for each of the next 4 weeks, and one for each of the next 36 months. This can also be written as 1W:1D,1M:1W,3Y:1M.
                    </div> -->

                    <div class="retention-options" ng-show="KeepType == 'versions'">
                        <input type="number" ng-model="Options['keep-versions']" min="1" />
                    </div>
                    <div class="hint" ng-show="KeepType == 'versions'" translate>Once there are more backups than the
                        specified number, the oldest backups are deleted.</div>

                    <div class="retention-options" ng-show="KeepType == 'time'">
                        <input type="text" class="number" parse-size-number ng-model="Options['keep-time']" />
                        <select parse-size-multiplier ng-model="Options['keep-time']">
                            <option value="D" translate>Days</option>
                            <option value="W" translate>Weeks</option>
                            <option value="M" translate>Months</option>
                            <option value="Y" translate>Years</option>
                            <!-- <option value="" translate>custom</option> -->
                        </select>

                    </div>
                    <div class="hint" ng-show="KeepType == 'time'" translate>
                        If at least one newer backup is found, all backups older than this date are deleted.
                    </div>

                </div>

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

                    <div class="input" ng-repeat="opt in module.SupportedLocalCommands">
                        <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 class="headerthreedotmenu">
                    <a href ng-click="showAdvanced = !showAdvanced" class="expandable">
                        <h2 translate>Advanced options</h2>
                        <img ng-show="showAdvanced" src="img/arrow_collapse_green.png" srcset="img/arrow_collapse_green.png 1x, img/arrow_collapse_green_2x.png 2x, img/arrow_collapse_green_3x.png 3x">
                        <img ng-hide="showAdvanced" src="img/arrow_expand_green.png" srcset="img/arrow_expand_green.png 1x, img/arrow_expand_green_2x.png 2x, img/arrow_expand_green_3x.png 3x">
                    </a>

                    <div class="contextmenu_container" ng-show="showAdvanced">
                        <a href title="{{'Menu' | translate}}"><img src="img/three_dots.png" srcset="img/three_dots.png 1x, img/three_dots_2x.png 2x, img/three_dots_3x.png 3x" id="threedotmenubutton_add_options_adv" class="threedotmenubutton" title="{{'Menu' | translate}}"/></a>

                        <div class="contextmenu" id="threedotmenu_add_options_adv">
                            <ul>
                                <li>
                                    <a href ng-show="ShowAdvancedTextArea" ng-click="ShowAdvancedTextArea = false" translate>Edit as list</a>
                                </li>
                                <li>
                                    <a href ng-hide="ShowAdvancedTextArea" ng-click="ShowAdvancedTextArea = true" translate>Edit as text</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div> -->

                <!-- <div ng-show="showAdvanced">
                    <div class="input textarea" ng-show="ShowAdvancedTextArea">
                        <textarea id="backupOptions" ng-model="ExtendedOptions" string-array-as-text placeholder="{{AppUtils.format(AppUtils.exampleOptionString, '--dblock-size=100MB')}}"></textarea>
                    </div>

                    <div class="input" ng-hide="ShowAdvancedTextArea">
                        <advanced-options-editor ng-option-list="ExtendedOptionList" ng-model="ExtendedOptions"></advanced-options-editor>
                    </div>
                </div> -->

                <div class="buttons">
                    <input class="submit next" type="button" id="nextStep5" ng-click="nextPage()"
                        value="{{'Next' | translate}} &gt;" />
                    <!-- <input class="submit save" type="submit" id="save" ng-click="save()" value="{{'Save' | translate}}" /> -->
                    <input class="submit prev" type="button" id="prevStep5" ng-click="prevPage()"
                        value="&lt; {{'Previous' | translate}}" />
                </div>
            </form>
        </div>
        <!-- .step5 -->

        <div class="step step6" ng-class="{active: CurrentStep == 5}">
            <form class="styled">
                <h2 translate>List of recipients</h2>
                <ul>
                    <li ng-repeat="alert in Backup.Alerts track by $index">
                        <div class="alert-config-row">
                            <backup-notification-form alert="alert"
                                validation-callback="validateStep6()"></backup-notification-form>
                            <a class="button" href title="{{'Remove' | translate}}"
                                style="display: flex; align-items: center;"
                                ng-click="Backup.Alerts.splice($index, 1)">X</a>
                        </div>
                    </li>
                </ul>
                <div class="buttons">
                    <input class="submit next" type="button" ng-disabled="Backup.Alerts.length >= maxNumberOfRecipients"
                        ng-click="AddRecipient()" value="{{'Add a recipient' | translate}}"
                        style="float: none;display: initial;margin: 0;"></a>
                    <input class="submit next" type="button"
                        ng-disabled="Backup.Alerts.length == 0 || !step6IsValid || sendingTestEmail"
                        ng-click="sendTestEmail()" value="{{'Send test email' | translate}}">
                </div>
                <div class="warning" ng-show="Backup.Alerts.length >= maxNumberOfRecipients" translate
                    translate-params-max="maxNumberOfRecipients">
                    Max number of recipient reached ({{max}} max)
                </div>
                <!-- <backup-notification-form ng-recipient="notificationConfig.Recipient" ng-levels="notificationConfig.Levels"></backup-notification-form> -->
                <div class="buttons">
                    <input class="submit save" type="submit" id="save" ng-click="save()"
                        ng-disabled="step6IsValid != true" value="{{'Save' | translate}}" />
                    <input class="submit prev" type="button" id="prevStep6" ng-click="prevPage()"
                        value="&lt; {{'Previous' | translate}}" />
                </div>
            </form>
        </div>
    </div>
    <!-- .steps-boxes -->
</div>
<!-- .add -->