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

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

    <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="steps-container">

        <div class="card 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="card">
                    <h3 translate>Select files</h3>
                    <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 class="actions-container">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" 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="card">
                    <h3 translate>Restore location</h3>

                    <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}}" 
                            />
                    </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">
                    <div style="flex: 1;"></div>
                    <button type="button" class="ekup-button ekup-button-ghost" ng-click="restore_step = 0">
                        <i class="ic-chevron-left"></i>
                        <span translate>Back</span>
                    </button>
                    <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="card">
                    <h3 translate>Your files and folders have been restored successfully.</h3>
                    <div>
                        <span translate>Restore complete. Do you want to open the restore folder ?</span>
                    </div>
                    <div class="actions-container">
                        <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>
                    </div>


                </div>

                <div class="actions-container">
                    <div style="flex: 1;"></div>
                    
                    <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 ng-if="connecting == true && taskid != null">
                <div class="card">
                    <h3 translate>Restoring file</h3>
                    <wait-area taskid="taskid" text="ConnectionProgress" allow-cancel="true"></wait-area>
                </div>
            </div>

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