<div ng-controller="RestoreWizardController" class="restorewizard">
    
    <div class="page-title">
        <h2 translate>Where do you want to restore from?</h2>
    </div>

    <div class="card">
        <h3 style="margin-bottom: 15px;" translate>Restore from an existing backup</h3>
        <ul>
            <li class="checkbox-container" ng-repeat="item in RestorableBackup"
                ng-click="selection.backupid = item.Backup.ID"
                ng-class="{selected: selection.backupid == item.Backup.ID}"
                >
                <input type="radio" name="direct" id="backup-{{item.Backup.ID}}" ng-model="selection.backupid" value="{{item.Backup.ID}}">
                <label class="checkbox-label" for="backup-{{item.Backup.ID}}">
                    <span class="checkbox" ng-class="{checked: selection.style == 'importfile'}">
                        <i class="ic-circle-fill"></i>
                    </span>
                    <div>
                        <div>{{item.Backup.Name}}</div>
                        <div ng-hide="item.Backup.Metadata == null || item.Backup.Metadata.TargetSizeString == null" class="subtext" translate translate-n="parseInt(item.Backup.Metadata.BackupListCount)" translate-plural="{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Versions">{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Version</div>

                        <div ng-show="item.Backup.Metadata == null || item.Backup.Metadata.TargetSizeString == null" class="subtext" translate>Unknown backup size and versions</div>

                        <div ng-hide="item.Backup.Metadata == null || item.Backup.Metadata.LastRestoreFinished == null"
                        class="subtext"
                        translate translate-params-time="item.Backup.Metadata.LastRestoreFinished | parseDate:forceActualDate "
                        translate-params-duration="formatDuration(item.Backup.Metadata.LastRestoreDuration)">Last successful restore: {{time}} (took {{duration || '0 seconds'}})
                        </div>
                    </div>
                </label>
            </li>
            <li ng-if="backups && backups.length > 0" style="cursor: initial;"><h3 translate>Or</h3></li>      
            <li class="checkbox-container"
                ng-click="selection.backupid = 'direct'"
                ng-class="{selected: selection.backupid == 'direct'}"
                >
                <input type="radio" name="direct" id="direct" ng-model="selection.backupid" value="direct">
                <label class="checkbox-label" for="direct">
                    <span class="checkbox" ng-class="{checked: selection.style == 'importfile'}">
                        <i class="ic-circle-fill"></i>
                    </span>
                    <div>
                        <div translate>Direct restore from backup files ...</div>
                        <div class="subtext" translate>Point to your backup files and restore from there</div>
                    </div>
                </label>
            </li>
        </ul>
    
    </div>

    <div class="actions-container">
        <div style="flex: 1;"></div>
        <a href class="ekup-button" ng-click="nextPage()">
            <span translate>Next</span>
            <i class="ic-chevron-right"></i>
        </a>       
    </div>
</div>
