<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 step</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 class="mt-3 tx-bold tx-primary" translate>
                            You can exclude certain files and subfolders contained in a selected folder by unchecking them.
                        </div>
                        <div class="mb-2 tx-bold tx-primary" translate>
                            This exclusion is indicated by a red cross in place of a blue checkmark.
                        </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 class="pt-1 tx-bold" translate>Show hidden folders</span>                                            
                                </label>
                            </div>
                        </div>
                        
                    <div class="box filters">
                        <div class="headerthreedotmenu">
                            <a href ng-click="showFilter = !showFilter" class="expandable">
                                <h3 class="d-flex items-center">
                                    <span translate>Filters</span>
                                    <i class="ic-chevron-{{showFilter ? 'up': 'down'}}" style="font-size: 30px"></i>
                                </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 step</span>
                        </button>
                        <button type="button" class="ekup-button" ng-click="nextPage()">
                            <span translate>Next step</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>Scheduling</h3>
                    <div class="mt-3 tx-bold tx-primary" translate>If a date was missed, the task starts as soon as possible.</div>
                    <div class="mt-3">
                        <label for="nextRunTime" class="tx-14" translate>First backup</label>
                        <div class="schedule-next-run-time">
                            <div class="input-icon-group">
                                <i class="icon-before ic-clock tx-primary"></i>
                                <input class="mb-0" type="time" ng-model="Schedule.Time" id="nextRunTime" />
                            </div>
                            <div class="input-icon-group">
                                <i class="icon-before ic-calendar tx-primary"></i>
                                <input class="mb-0" type="date" ng-model="Schedule.Time" id="nextRunDate" />
                            </div>
                            <span class="tx-14">({{ Schedule.NextTime }})</span>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label for="repeatRunNumber" class="tx-14" 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>
                    <div class="mt-3">
                        <label class="tx-14" translate>Allowed days</label>
                        <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}}" class="tx-14 br-15">{{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>
                    </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 step</span>
                    </button>
                    <button type="button" class="ekup-button" ng-click="nextPage()">
                        <span translate>Next step</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>Options</h3>
                    <div class="mt-3 input multiple text select keepBackups">
                        <label for="keepTimeType" class="tx-14" translate>Backup retention</label>
                        <select id="keepTimeType" ng-model="KeepType" class="mb-4">
                            <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="pt-3 tx-bold tx-primary" 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="pt-3 tx-bold tx-primary" 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 ng-show="KeepType == 'versions'">
                            <div class="retention-options">
                                <input type="number" ng-model="Options['keep-versions']" min="1" ng-change="validateKeepversion()"/>
                            </div>
                            <div class="pt-3 tx-bold tx-primary" 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="pt-3 tx-bold tx-primary" 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 step</span>
                    </button>
                    <button type="button" class="ekup-button" ng-click="nextPage()">
                        <span translate>Next step</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>Email notifications</h3>
                    <ul>
                        <li class="alert-config-row mt-3" ng-repeat="alert in Backup.Alerts track by $index">
                            <backup-notification-form
                                alert="alert"
                                validation-callback="validateStep6()"
                            ></backup-notification-form>
                            <div class="actions-container mt-0">
                                <button
                                    type="button"
                                    class="ekup-button ekup-button-ghost ekup-error-button"
                                    title="{{'Remove' | translate}}"
                                    ng-click="Backup.Alerts.splice($index, 1)"
                                >
                                    <i class="ic-trash-2"></i>
                                    <span translate>Remove</span>
                                </button>
                            </div>
                        </li>
                    </ul>

                    <div class="d-flex items-center mt-3" ng-show="Backup.Alerts.length >= maxNumberOfRecipients">
                        <i class="tx-error ic-alert-triangle mr-1"></i>
                        <div
                            class="tx-error"
                            translate
                            translate-params-max="maxNumberOfRecipients"
                        >
                            Max number of recipient reached ({{max}} max)
                        </div>
                    </div>
                    
                    
                    <div class="actions-container justify-end">
                        <button type="button"
                                class="ekup-button ekup-button-ghost"
                                ng-disabled="Backup.Alerts.length == 0 || !step6IsValid || sendingTestEmail"
                                ng-click="sendTestEmail()"
                        >
                            <span class="tx-bold" translate>Send test email</span>
                            <i class="ic-send tx-bold"></i>
                        </button>
                        <button type="button"
                                class="ekup-button ekup-button-ghost"
                                ng-disabled="Backup.Alerts.length >= maxNumberOfRecipients"
                                ng-click="AddRecipient()"
                        >
                            <span class="tx-bold" translate>Add a recipient</span>
                            <i class="ic-plus-circle tx-bold"></i>
                        </button>
                    </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 step</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 -->