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

<div class="restore" ng-class="{'restore-direct': IsBackupTemporary}" ng-controller="RestoreController">


    <div class="steps-legend">
        <ol ng-show="IsBackupTemporary">
            <li class="step1 complete" disabled translate>Backup location</li>
            <li ng-class="{active: restore_step == 0, complete: restore_step > 0 }" class="step1" ng-click="trySetStep(0)" ng-disabled="restore_step >= 2" translate>Select files</li>
            <li ng-class="{active: restore_step == 1, complete: restore_step > 1}" class="step2" ng-click="onClickNext()" ng-disabled="restore_step >= 2" translate>Restore location</li>
            <li ng-class="{active: restore_step == 2 && connecting == true, complete: restore_step >= 3 && connecting == false}" disabled class="step3" translate>Restoring files</li>
            <li ng-class="{active: restore_step == 3 && connecting == false }" disabled class="step3" translate>Restore complete</li>
        </ol>
        
        <ol ng-hide="IsBackupTemporary">
            <li ng-class="{active: restore_step == 0, complete: restore_step > 0 }" class="step1" ng-click="trySetStep(0)" ng-disabled="restore_step >= 2" translate>Select files</li>
            <li ng-class="{active: restore_step == 1, complete: restore_step > 1}" class="step2" ng-click="onClickNext()" ng-disabled="restore_step >= 2" translate>Restore location</li>
            <li ng-class="{active: restore_step == 2 && connecting == true, complete: restore_step > 2 && connecting == false}" disabled class="step3" translate>Restoring files</li>
            <li ng-class="{active: restore_step == 3 && connecting == false }" disabled class="step3" translate>Restore complete</li>
        </ol>
    </div>

    <div class="steps-boxes">

        <div ng-show="restore_step == 0 && connecting == false">
            <div class="page-title">
                <h2 ng-if="IsBackupTemporary" translate>Restore files</h2>
                <h2 ng-if="!IsBackupTemporary" translate translate-params-backupname="Backup.Backup.Name">Restore files from {{backupname}}</h2>
            </div>
            <div class="card">
                <div class="input timestamp">
                    <label for="restoreversion" translate>Restore from</label>

                    <select name="restoreversion" id="restoreversion" ng-model="RestoreVersion" ng-options="fs.Version as fs.DisplayLabel group by fs.GroupLabel for fs in Filesets | orderBy: ['Version']">

                    </select>
                </div>

                <div class="input text search overlayButton multiple" style="max-width: none">
                    <label for="searchfilter" translate>Search for files</label>
                    <div class="input-with-actions">
                        <input type="search" id="searchfilter" name="searchfilter" ng-model="SearchFilter" placeholder="{{'Type to highlight files' | translate}}" ng-on-enter-press="doSearch()" ng-on-escape-press="clearSearch()" />
                        <button type="button" id="searchfiltersubmit" class="ekup-button ekup-button-secondary" ng-click="doSearch()" ng-cancelsearch="clearSearch()" ng-enabled="!Searching">
                            <i class="ic-search"></i>
                            <span ng-show="Searching" translate>Busy ...</span>
                            <span ng-hide="Searching" translate>Search</span>
                        </button>
                    </div>
                </div>

                <div class="resizable filepicker">
                    <restore-file-picker id="restore_file_picker" ng-sources="Paths" ng-backup-id="BackupID" ng-timestamp="filesetStamps[RestoreVersion + '']" treedata="treedata" ng-selected="Selected" ng-search-filter="SearchFilter" ng-search-mode="InSearchMode"></restore-file-picker>
                </div>
            </div>
            <!-- <div ng-repeat="value in Selected" >{{value}}</div> -->
            <div class="actions-container">
                <button type="button" class="ekup-button" ng-if="IsBackupTemporary" ng-click="onClickBack()">
                    <i class="ic-chevron-left"></i>
                    <span translate>Back</span>
                </button>
                <button type="button" class="ekup-button" ng-click="onClickNext()">
                    <span translate>Next</span>
                    <i class="ic-chevron-right"></i>
                </button>
            </div>

        </div>

        <div ng-show="restore_step == 1 && connecting == false" width="auto">
            <div class="page-title">
                <h2 translate>Restore location</h2>
            </div>

            <div class="card">

            <div class="input text overlayButton multiple" style="max-width: none">
                <label for="restore_path" translate>Folder path</label>
                <input type="text" name="restore_path" id="restore_path"
                    ng-model="RestorePath"
                    readonly
                    placeholder="{{'Enter the destination path' | translate}}" 
                    />
                <!-- <a href id="file_targetFolderPathAdd" class="button" ng-click="HideFolderBrowser = false" translate>Browse</a> -->
            </div>

            <div class="checkbox-container">
                <input id="file_targetFolderPathAdd" type="checkbox" ng-model="HideFolderBrowser" />
                <label class="checkbox-label" for="file_targetFolderPathAdd">
                    <span class="checkbox">
                        <i class="ic-checkbox-check"></i>
                    </span>
                    <span translate>Use default restore path (Recommended)</span>                                            
                </label>
            </div>

            <div class="input text" ng-hide="HideFolderBrowser">

                <div class="checkbox-container">
                    <input id="file_showHiddenFolders" type="checkbox" ng-model="ShowHiddenFolders" />
                    <label class="checkbox-label" for="file_showHiddenFolders">
                        <span class="checkbox">
                            <i class="ic-checkbox-check"></i>
                        </span>
                        <span translate>Show hidden folders</span>                                            
                    </label>
                </div>

                <div class="resizable filepicker" style="clear: both;">
                    <destination-folder-picker id="folder_path_picker" ng-model="RestorePath" ng-show-hidden="ShowHiddenFolders" ng-hide-user-node="false"></destination-folder-picker>
                </div>
            </div>

            <div  class="input password" ng-show="showInputPassphrase()">
                <h2 translate>Passphrase</h2>
                <p translate>
                    Backup is encrypted but no passphrase is available.
                    Type a passphrase below to use for restoring your files,
                    or, in case of GPG encryption, leave blank to let gpg retrieve the passphrase by
                    invoking your system's keychain.
                </p>
                <input autocomplete="new-password" type="password" name="restore_path" id="passphrase" ng-model="passphrase"
                placeholder="{{'Type passphrase here.' | translate}}" />
            </div>
            </div>
            
            <div class="actions-container">
                <button type="button" class="ekup-button" ng-click="restore_step = 0">
                    <i class="ic-chevron-left"></i>
                    <span translate>Back</span>
                </button>
                <div style="flex: 1;"></div>
                <button type="button" class="ekup-button" ng-click="onStartRestore()">
                    <span translate>Restore</span>
                    <i class="ic-download-cloud"></i>
                </button>
            </div>
        </div>

        <div ng-show="restore_step == 3 && connecting == false">
            
            <div class="page-title">
                <h2 translate>Your files and folders have been restored successfully.</h2>
            </div>

            <div class="card">
                <div>
                    <span translate>Restore complete. Do you want to open the restore folder ?</span>
                </div>

                <div class="actions-container">
                    <!-- <a href class="submit" ng-click="onClickComplete()" translate>OK</a> -->
                    
                    <button type="button" class="ekup-button" ng-click="OpenRestorePath()" ng-disabled="IsOpeningRestoreFolder == true">
                        <i class="ic-folder"></i>
                        <span translate>Open restore folder</span>
                    </button>
                    
                    <button type="button" class="ekup-button ekup-button-secondary" ng-click="onClickComplete()" ng-disabled="IsOpeningRestoreFolder == true">
                        <i class="ic-save"></i>
                        <div>
                            <span style="margin-right: 5px;" translate>Go back to</span> <span translate>My backups</span>
                        </div>
                    </button>
                </div>

            </div>
        </div>

        <div ng-show="connecting == true && taskid != null">            
            <div class="page-title">
                <h2 translate>Restoring files</h2>
            </div>
            <div class="card">
                <wait-area taskid="taskid" text="ConnectionProgress" allow-cancel="true"></wait-area>
            </div>
        </div>

        <div ng-show="connecting == true && taskid == null">
            {{ConnectionProgress}}
        </div>
    </div>
</div>
