<div ng-controller="ImportFromServerController">
    <div class="page-title">
        <h2 translate>Import from server</h2>
    </div>
    <div class="steps-container">
        <div class="steps-legend">
            <div class="card">
                <ol>
                    <li ng-class="{active: step == 1, complete: step > 1}" disabled>
                        <span translate>Retrieve from server</span>
                    </li>
                    <li ng-class="{active: step == 2, complete: step > 2}" disabled>
                        <span translate>Select configuration</span>
                    </li>
                    <li ng-class="{active: step == 3 }" disabled>
                        <span translate>Importing...</span>
                    </li>
                </ol>
            </div>
        </div>
        <div class="steps-boxes">
            <div ng-if="step == 1">
                <div class="card">
                    <h3 translate>Looking for configuration on server...</h3>
                    <div class="circular-loader">
                        <div class="circular-loader-spinner"></div>
                    </div>
                </div>
            </div>
            <div ng-if="step == 2">
                <div class="card">
                    <h3 translate>List of configuration found</h3>
                    <div ng-if="importedBackups.length == 0" translate>
                        No configuration found on server or you already imported them.
                    </div>
                    <ul ng-if="importedBackups.length > 0">
                        <li class="imported-backup" ng-repeat="imports in importedBackups track by $index">
                            <h4>
                                <checkbox
                                    id="'imports_'+$index"
                                    type="'checkbox'"
                                    model="imports.selected"
                                    label="imports.Backup.Name"
                                    value="true"
                                    on-change="CheckSelected(value)"
                                ></checkbox>
                                <!-- <span></span> -->
                            </h4>
                            <div>
                                <span translate>Size:</span>
                                <span>{{imports.Backup.Metadata.SourceSizeString}}</span>
                            </div>
                            <div>
                                <span translate>Last backup:</span>
                                <span>{{imports.Backup.Metadata.LastBackupDate | parseDate:forceActualDate}}</span>
                            </div>
                            <div>
                                <div class="allowed-days">

                                    <div ng-repeat="day in daysOfWeek"
                                    class="day"
                                    ng-class="{checked: imports.Schedule.AllowedDays.indexOf(day.value) > -1}"
                                    >
                                        <label translate>{{day.name}}</label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    
                </div>
                <div class="actions-container">
                    <div style="flex:1;"></div>
                    <button type="button" class="ekup-button" ng-click="Import()" ng-disabled="!configurationSelected || importing">
                        <span translate>Import</span>
                        <i class="ic-log-in"></i>
                    </button>
                </div>
            </div>
            <div ng-if="step == 3">
                <div class="card">
                    <backup-import-task ng-repeat="import in importedBackups track by $index" import-backup="import" on-complete="onCompleteTask()"></backup-import-task>
                </div>
                <div class="actions-container">
                    <div style="flex:1;"></div>
                    <button class="ekup-button ekup-button-secondary" ng-disabled="!importComplete" ng-click="goToMyBackups()">
                        <i class="ic-save"></i>
                        <span style="margin-right: 5px;" translate>Go back to</span> <span translate>My backups</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>