<div ng-controller="GenericCsvImportCtrl">
	<div class="row">
		<div class="col-xs-12 col-md-3">
			<div>{{ 'select.csv' | translate}}
				<input type="file" file-select accept=".csv"
					   success="csvLoaded">
			</div>
			<div ng-show="parsed_csv">
				<span translate="parsed.csv.rows" translate-value-rows="{{ parsed_csv.length }}">

				</span>
			</div>
			<div ng-show="parsed_csv">
				<input type="checkbox" ng-model="skipFirstRow" ng-checked="matched"> {{ 'skip.first.row' | translate}}
			</div>
			<div ng-show="import_fields.indexOf('label') === -1 && parsed_csv">
				<b>{{ 'import.csv.label.req' | translate}}</b>
			</div>
			<div ng-show="import_fields.indexOf('label') !== -1 && parsed_csv">
				<button class="btn btn-success" ng-disabled="importing" ng-click="startCSVImport()"><i class="fa fa-spinner fa-spin" ng-show="importing"></i> {{ (importing) ? ('import.importing' | translate) : ('import.start' | translate) }}</button>
			</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>
				<div ng-if="log" class="import_log">
					<textarea id="import_log" auto-scroll="log">{{log.join('\n')}}</textarea>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-9" ng-show="parsed_csv">
			<b>{{ 'first.five.lines' | translate }}</b><br />
			{{ 'assign.column' | translate }}
			<div class="import-table-outter">
			<table class="import-table">
				<tr ng-repeat="line in parsed_csv | limitTo:5">
					<td class="inspect"><i class="fa fa-search"
										   ng-click="inspectCredential(line)"
										   ng-if="($index > 0 && matched && import_fields.length > 0) || ($index >= 0 && !matched && import_fields.length > 0)"></i>
					</td>
					<td ng-repeat="prop in line track by $index">
						{{line[$index]}}
					</td>
				</tr>
				<tr ng-repeat="line in parsed_csv | limitTo:1">
					<td></td>
					<td ng-repeat="prop in line track by $index">
						<select ng-model="import_fields[$index]" ng-change="updateExample()"
								ng-options="property.prop as property.label for property in credentialProperties">

						</select>
					</td>
				</tr>
			</table>
			</div>
			<div ng-show="inspected_credential && import_fields.length > 0">
				<b>{{ 'example.credential' | translate}}</b>
				<div credential-template="inspected_credential" show-label>

				</div>
			</div>
		</div>

	</div>
</div>