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

<div class="add" ng-controller="EditBackupController">
    <!-- .steps -->
    <div class="page-title">
        <h2 translate>Add a new backup</h2>
    </div>
    <div class="steps-container">
        <div class="steps-legend">
            <div class="card">
                <ol>
                    <li ng-class="{active: CurrentStep == 0, complete: CurrentStep > 0}" class="step1" ng-click="CurrentStep = 0" translate>
                        <span translate>General</span>
                    </li>
                    <li ng-class="{active: CurrentStep == 1, complete: CurrentStep > 1}" class="step3" ng-click="CurrentStep = 1"
                        ng-disabled="step1IsValid != true" translate>
                        <span translate>Source Data</span>
                    </li>
                    <li ng-class="{active: CurrentStep == 2, complete: CurrentStep > 2}" class="step4" ng-click="CurrentStep = 2"
                        ng-disabled="step1IsValid != true" translate>
                        <span translate>Schedule</span>
                    </li>
                    <li ng-class="{active: CurrentStep == 3, complete: CurrentStep > 3}" class="step5" ng-click="CurrentStep = 3"
                        ng-disabled="step1IsValid != true" translate>
                        <span translate>Storage options</span>
                    </li>
                    <li ng-class="{active: CurrentStep == 4, complete: CurrentStep > 4}" class="step6" ng-click="CurrentStep = 4"
                        ng-disabled="step1IsValid != true" translate>
                        <span translate>Notifications</span>
                    </li>
                </ol>
            </div>
        </div>
        <!-- .steps-legend -->

        <div class="steps-boxes">
            <div class="step step1" ng-class="{active: CurrentStep == 0}">
                <div class="card">
                    <h3 translate>General backup settings</h3>
                    <backup-edit-step-one backup="Backup" options="Options" is-valid="step1IsValid" set-builduri-fn="setBuilduriFn(builduriFn)" ssh-key-file="sshKeyFile"></backup-edit-step-one>
                </div>

                <div class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button" ng-disabled="!step1IsValid" ng-click="nextPage()">
                        <span translate>Next</span>
                        <i class="ic-chevron-right"></i>
                    </button>
                </div>
            </div>
            <!-- .step1 -->


            <!-- .step2 -->

            <div class="step step2" ng-class="{active: CurrentStep == 1}">
                    <div class="card">
                        <h3 translate>Source data</h3>
                        <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="checkbox-container">
                                <input id="show-hidden-files" type="checkbox" ng-model="showhiddenfolders" />
                                <label class="checkbox-label" for="show-hidden-files">
                                    <span class="checkbox">
                                        <i class="ic-checkbox-check"></i>
                                    </span>
                                    <span translate>Show hidden folders</span>                                            
                                </label>
                            </div>
                        </div>
                        
                    <div class="box filters">
                        <div class="headerthreedotmenu">
                            <a href ng-click="showFilter = !showFilter" class="expandable">
                                <h3>
                                    <i class="ic-chevron-{{showFilter ? 'up': 'down'}}"></i>
                                    <span translate>Filters</span>
                                </h3>
                            </a>
                        </div>

                        <div class="expandable" ng-class="{expand: showFilter}">
                            <div class="inner">
                                <div style="margin-bottom: 50px;">
                                    <div class="input textarea" ng-show="EditFilterAdvanced">
                                        <textarea id="FilterList" string-array-as-text ng-model="Backup.Filters"
                                            ng-model-options="{updateOn: 'blur'}"></textarea>
                                    </div>
                                    <div class="filter-list" ng-hide="EditFilterAdvanced">
                                        <div ng-show="Backup.Filters.length == 0" style="text-align: center;" translate>
                                            No filters has been set.
                                        </div>
                                        <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>

                                                
                                                <input type="text" parse-filter-content ng-model="Backup.Filters[$index]"
                                                    ng-show="!(Backup.Filters[$index].indexOf('-{') == 0 || Backup.Filters[$index].indexOf('+{') == 0)"
                                                    ng-model-options="{updateOn: 'blur'}"
                                                    placeholder="{{'Enter expression here' | translate}}" />
                                                
                                                <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>

                                                <button type="button" class="ekup-icon-button ekup-icon-error-button" title="{{'Remove' | translate}}" ng-click="Backup.Filters.splice($index, 1)">
                                                    <i class="ic-x"></i>
                                                </button>
                                            </li>

                                        </ul>                                    
                                    </div>
                                    <div class="actions-container">
                                        <button type="button" href class="ekup-button ekup-button-secondary" ng-click="Backup.Filters.push('-\\')">
                                            <i class="ic-plus"></i>
                                            <span translate>Add filter</span>
                                        </button>
                                    </div>
                                </div>

                                <div>
                                    <h4 style="
                                        margin-bottom: 15px;
                                        font-size: 1.1em;
                                    " translate>Exclude</h4>
                                    <div ng-repeat="attr in fileAttributes" class="checkbox-container">
                                        <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 class="checkbox-label" for="fileattr_{{attr.value}}">
                                            <span class="checkbox">
                                                <i class="ic-checkbox-check"></i>
                                            </span>
                                            <span>{{attr.name | translate}}</span>
                                        </label>
                                    </div>

                                    <div>
                                        <div class="checkbox-container">
                                            <input id="exclude-large-files" type="checkbox" ng-model="ExcludeLargeFiles" />
                                            <label class="checkbox-label" for="exclude-large-files">
                                                <span class="checkbox">
                                                    <i class="ic-checkbox-check"></i>
                                                </span>
                                                <span translate>Files larger than:</span>                                            
                                            </label>
                                        </div>
                                        <div class="exclude-large-files">
                                            <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>
                        </div>
                    </div>
                    </div>
                    <div class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" ng-click="prevPage()">
                            <i class="ic-chevron-left"></i>
                            <span translate>Previous</span>
                        </button>
                        <button type="button" class="ekup-button" ng-click="nextPage()">
                            <span translate>Next</span>
                            <i class="ic-chevron-right"></i>
                        </button>
                    </div>
            </div>
            <!-- .step3 -->

            <div class="step step4" ng-class="{active: CurrentStep == 2}">
                <div class="card">
                    <h3 translate>Schedule your backup</h3>
                    <div>
                        <div>
                            <label for="nextRunTime" translate>Next time</label>
                            <div class="schedule-next-run-time">
                                <input type="time" ng-model="Schedule.Time" id="nextRunTime" />
                                <input type="date" ng-model="Schedule.Time" id="nextRunDate" />
                                <span>({{ Schedule.NextTime }})</span>
                            </div>
                        </div>
                        <div class="input text select multiple repeat">
                            <label for="repeatRunNumber" translate>Run again every</label>
                            <div class="schedule-frequency">
                                <input
                                    ng-change="validateRepeat()"
                                    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">
                                </select>

                            </div>
                        </div>

                        <h3 translate>Allowed days</h3>
                        <div class="allowed-days">

                            <div ng-repeat="day in AppUtils.daysOfWeek"
                            class="day"
                            ng-class="{checked: Schedule.AllowedDays.indexOf(day.value) > -1}"
                            >
                                <label for="dayofweek_{{day.value}}">{{day.name}}</label>
                                
                                <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)"
                                    />
                            </div>
                        </div>
                        <br/>
                        <div translate>If a date was missed, the job will run as soon as possible.</div>

                    </div>
                </div>
                
                <div class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" ng-click="prevPage()">
                        <i class="ic-chevron-left"></i>
                        <span translate>Previous</span>
                    </button>
                    <button type="button" class="ekup-button" ng-click="nextPage()">
                        <span translate>Next</span>
                        <i class="ic-chevron-right"></i>
                    </button>
                </div>
            </div>
            <!-- .step4 -->

            <div class="step step5" ng-class="{active: CurrentStep == 3}">
                <div class="card">
                    <h3 translate>Storage options</h3>
                    <div class="input multiple text select keepBackups">
                        <label for="keepTimeType" translate>Backup retention</label>
                        <select id="keepTimeType" ng-model="KeepType">
                            <option value="smart" translate>Smart backup retention</option>
                            <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="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. When the storage limit will be reached, there won't be new backup. You will be notified by a failed backup in the backup report.
                        </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 ng-show="KeepType == 'versions'">
                            <div class="retention-options">
                                <input type="number" ng-model="Options['keep-versions']" min="1" ng-change="validateKeepversion()"/>
                            </div>
                            <div class="hint" translate>Once there are more backups than the specified number, the oldest backups are deleted.</div>
                        </div>
    

                        <div ng-show="KeepType == 'time'">

                            <div class="retention-options">
                                <input type="number" class="number" parse-size-number ng-model="Options['keep-time']" 
                                    ng-change="validateKeeptime()"
                                />
                                <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" translate>
                                If at least one newer backup is found, all backups older than this date are deleted.
                            </div>
                        </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>

                <div class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" ng-click="prevPage()">
                        <i class="ic-chevron-left"></i>
                        <span translate>Previous</span>
                    </button>
                    <button type="button" class="ekup-button" ng-click="nextPage()">
                        <span translate>Next</span>
                        <i class="ic-chevron-right"></i>
                    </button>
                </div>
            </div>
            <!-- .step5 -->

            <div class="step step6" ng-class="{active: CurrentStep == 4}">
                <div class="card">
                    <h3 translate>List of recipients</h3>                   

                    <div class="actions-container" style="justify-content: space-between; margin: 20px 0;">                    
                        <button type="button" class="ekup-button ekup-button-ghost"
                            ng-disabled="Backup.Alerts.length >= maxNumberOfRecipients"
                            ng-click="AddRecipient()"
                            >
                            <i class="ic-plus"></i>
                            <span translate>Add a recipient</span>
                        </button>
                        <button type="button" class="ekup-button ekup-button-ghost"
                            ng-disabled="Backup.Alerts.length == 0 || !step6IsValid || sendingTestEmail"
                            ng-click="sendTestEmail()"
                            >
                            <i class="ic-send"></i>
                            <span translate>Send test email</span>
                        </button>
                    </div>
                    
                    <div class="warning" ng-show="Backup.Alerts.length >= maxNumberOfRecipients" translate
                        translate-params-max="maxNumberOfRecipients">
                        Max number of recipient reached ({{max}} max)
                    </div>

                    <ul>
                        <li class="alert-config-row" 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> -->
                            
                            <div class="actions-container">
                                <button type="button" class="ekup-button ekup-button-secondary ekup-error-button" title="{{'Remove' | translate}}" ng-click="Backup.Alerts.splice($index, 1)">
                                    <i class="ic-x-fill"></i>
                                    <span translate>Remove</span>
                                </button>
                            </div>
                        </li>
                    </ul>

                </div>
                    
                
    
                <div class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" ng-click="prevPage()">
                        <i class="ic-chevron-left"></i>
                        <span translate>Previous</span>
                    </button>
                    <button type="button" class="ekup-button" ng-click="save()" ng-disabled="step6IsValid != true" >
                        <i class="ic-save"></i>
                        <span translate>Save</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- .steps-boxes -->
    </div>
</div>
<!-- .add -->