<div>
	<div ng-click="showGenericImport = !showGenericImport;" class="link">
		<span ng-show="!showGenericImport">{{'missing.importer' | translate}}</span>
		<span ng-show="showGenericImport">{{'missing.importer.back' | translate}}</span>
	</div>
</div>

<div ng-controller="ImportCtrl" ng-show="!showGenericImport">
	<div class="row">
		<div class="col-xs-6">
			<div class="import-selection">
				<label>{{ 'import.type' | translate}}
				<select ng-init="importerType" ng-model="importerType"
						ng-change="setImporter(importerType)">
					<option ng-repeat="importer in available_importers"
							value="{{importer}}">
						{{importer.name}}
					</option>
				</select></label>
			</div>
			<div ng-show="selectedImporter">
				<b>{{ 'import.steps' | translate }}</b>
				<ul class="import-steps">
					<li ng-repeat="step in selectedImporter.exportSteps">{{step}}</li>
				</ul>
			</div>
			<input ng-if="selectedImporter" type="file" file-select
				   success="fileLoaded" error="fileLoadError"
				   progress="fileSelectProgress"><br/>
			<button class="button" ng-click="startImport()"
					ng-if="selectedImporter">{{ 'import' | translate}}
			</button>

			<div ng-if="file_read_progress.percent > 0">
				{{ 'read.progress' | translate}}
				<div progress-bar="file_read_progress.percent" index="file_read_progress.loaded" total="file_read_progress.total"></div>
			</div>
			<div ng-if="import_progress.progress > 0">
				{{ 'upload.progress' | translate}}
				<div progress-bar="import_progress.progress" index="import_progress.loaded" total="import_progress.total"></div>
			</div>
		</div>
		<div class="col-xs-6">
			<div ng-if="log" class="import_log">
				<textarea id="import_log" auto-scroll="log">{{log.join('\n')}}</textarea>
			</div>
		</div>
	</div>
</div>
<div ng-include="'views/partials/forms/settings/generic_csv_import.html'" ng-show="showGenericImport"></div>