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

<div class="add" ng-controller="EditBackupController">
    <div class="steps">
        <button class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0" aria-labelledby="steps-legend__1">
            <span>1</span>
        </button>
        <button class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1" aria-labelledby="steps-legend__2">
            <span>2</span>
        </button>
        <button class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2" aria-labelledby="steps-legend__3">
            <span>3</span>
        </button>
        <button class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3" aria-labelledby="steps-legend__4">
            <span>4</span>
        </button>
        <button class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4" aria-labelledby="steps-legend__5">
            <span>5</span>
        </button>
    </div>
    <!-- .steps -->

    <ol class="steps-legend">
        <li id="steps-legend__1" ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
        <li id="steps-legend__2" ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1" translate>Destination</li>
        <li id="steps-legend__3" ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2" translate>Source Data</li>
        <li id="steps-legend__4" ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3" translate>Schedule</li>
        <li id="steps-legend__5" ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4" translate>Options</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-show="!checkGpgAsymmetric() && (Options['encryption-module'] || '').length == 0">
                        <h3 class="warning" translate>We recommend that you encrypt all backups stored outside your system</h3>
                    </div>

                    <div class="input password" ng-hide="checkGpgAsymmetric() || (Options['encryption-module'] || '').length == 0">
                        <label for="passphrase" translate>Passphrase</label>
                        <input autocomplete="new-password" type="{{ShowPassphrase ? 'text' : 'password'}}" name="passphrase" id="passphrase" ng-model="Options['passphrase']" />
                    </div>
                    <div class="input password" ng-hide="checkGpgAsymmetric() || (Options['encryption-module'] || '').length == 0">
                        <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-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" set-builduri-fn="setBuilduriFn(builduriFn)"></backup-edit-uri>

                <div class="buttons">
                    <input class="submit next" type="button" id="nextStep2" 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">
                        <source-folder-picker ng-sources="Backup.Sources" ng-filters="Backup.Filters" ng-show-hidden="showhiddenfolders" ng-exclude-attributes="ExcludeAttributes" ng-exclude-size="ExcludeFileSize"></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>
                <div class="box exclude">
                    <div class="expandable">
                        <a href ng-click="showExclude = !showExclude">
                            <h2 translate>Exclude</h2>
                            <img ng-show="showExclude" 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="showExclude" 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>

                    <div ng-show="showExclude">
                        <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.toUpperCase() 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 maxSize">
                    <label for="dblockSizeNumber" translate>Remote volume size</label>
                    <input type="number" class="number" parse-size-number="uppercase" id="dblockSizeNumber" ng-model="Options['dblock-size']" />
                    <select parse-size-multiplier="uppercase" id="dblockSizeMultiplier" ng-model="Options['dblock-size']" ng-options="item.value as item.name for item in AppUtils.fileSizeMultipliers">
                    </select>

                    <div class="hint" translate>
                        The backups will be split up into multiple files called volumes. Here you can set the maximum size of the individual volume files. <external-link link="'https://www.duplicati.com/articles/Choosing-Sizes/#remote-volume-size'">See this page for more information.</external-link>
                    </div>

                </div>

                <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 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>
    <!-- .steps-boxes -->
</div>
<!-- .add -->
