<div ng-controller="ImportController" class="importpage">

    <div class="page-title">
        <h2 translate>Import backup configuration</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>Select configuration</span>
                    </li>
                    <li ng-class="{active: step == 2 }" disabled>
                        <span translate>Importing...</span>
                    </li>
                </ol>
            </div>
        </div>
        <div class="steps-boxes">
            <div ng-show="step == 1">
                <div class="card">
                    <input type="hidden" name="direct" id="direct" value="true" />
                    <input type="hidden" name="import_metadata" id="import_metadata" value="false" />

                    <div class="input text">
                        <label translate>Configuration file:</label>
                        <div class="file-input">
                            <label class="ekup-button ekup-button-secondary"  for="file">
                                <i class="ic-upload"></i>
                                <span ng-if="!UploadDownloads" translate>Choose a file</span>                        
                                <span ng-if="UploadDownloads" translate>Change file</span>                        
                            </label>
                            <input type="file" fd-input file-name="UploadDownloads" name="config"  id="file" accept="application/JSON" />
                            <span ng-if="UploadDownloads">
                                <i class="ic-file"></i>
                                {{UploadDownloads}}
                            </span>
                            <button type="button" ng-if="UploadDownloads" class="ekup-icon-button ekup-icon-error-button" ng-click="cleanFile()">
                                <i class="ic-x"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="actions-container">
                    <div style="flex:1;"></div>
                    <button class="ekup-button" ng-disabled="!UploadDownloads" ng-hide="Connecting" ng-click="doSubmit()">
                        <i class="ic-log-in"></i>
                        <span translate>Import</span>
                    </button>
                    <button class="ekup-button" ng-show="Connecting" translate>
                        <i class="ic-log-in"></i>
                        <span translate>Importing …</span>
                    </button>
                </div>
            </div>
            <div ng-if="step == 2">
                <div class="card">
                    <backup-import-task import-backup="importBackup" 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>
