<h2>{{ 'basicInfo' | translate }}</h2>
<div ng-hide="model" class="loading-panel panel">
</div>
<div ng-show="model" class="panel panel-default">
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<label class="col-sm-4 control-label" ng-class="{blocked_user: model.isBlocked}">Username</label>
			<div class="col-sm-8">
				<p class="form-control-static" ng-class="{blocked_user: model.isBlocked}">
					<i ng-show="model.isBlocked" class="fa fa-user-times" tooltip="{{ 'udBlockedUser' | translate }}"></i> {{ model.username }}&nbsp;&nbsp;
					<button ng-show="!model.isBlocked && userId && isLoggedInUserAdmin" type="button" class="btn btn-danger btn-xs" ng-click="blockUser()">{{ 'udBlockUser' | translate }}</button>
					<button ng-show="model.isBlocked && userId && isLoggedInUserAdmin" type="button" class="btn btn-warning btn-xs" ng-click="unblockUser()">{{ 'udUnblockUser' | translate }}</button>
				</p>
			</div>
		</div>
		<div class="form-group" ng-show="userId || model.isAdmin">
			<label class="col-sm-4 control-label">Id</label>
			<div class="col-sm-8">
				<p class="form-control-static"> {{ model.id }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">{{ 'email' | translate }}</label>
			<div class="col-sm-8">
				<p class="form-control-static">{{ model.email }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">{{ 'udHasPassword' | translate }}</label>
			<div class="col-sm-8">
				<p class="form-control-static">
					{{ model.hasPassword.toString() | translate }}&nbsp;&nbsp;
					<button class="btn btn-default btn-xs" ng-show="!userId && model.hasPassword" ng-click="changePassword()"> {{ 'changePass' | translate }}</button>
					<button class="btn btn-default btn-xs" ng-show="userId" ng-click="resetPassword()"> {{ 'setPassword' | translate }}</button>
					<button class="btn btn-default btn-xs" ng-show="userId && model.hasPassword" ng-click="clearPassword()"> {{ 'clearPassword' | translate }}</button>
				</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">{{ 'udIsAdmin' | translate }}</label>
			<div class="col-sm-8">
				<p class="form-control-static">
					{{ model.isAdmin.toString() | translate }}&nbsp;&nbsp;
					<button ng-show="!model.isAdmin && userId" type="button" class="btn btn-warning btn-xs" ng-click="grantAdmin()">{{ 'udGrantAdmin' | translate }}</button>
					<button ng-show="model.isAdmin" type="button" class="btn btn-danger btn-xs" ng-click="revokeAdmin()">{{ 'udRevokeAdmin' | translate }}</button>
				</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">{{ 'udCustomerId' | translate }}</label>
			<div class="col-sm-8">
				<p ng-hide="editingCustomerId" class="form-control-static">
					{{model.customerId}}
					<span class="glyphicon glyphicon-pencil glyphicon-btn" ng-show="isLoggedInUserAdmin" ng-click="editCustomerId()" tooltip="{{ 'editTooltip' | translate }}"></span>
				</p>
				<div ng-show="editingCustomerId" class="input-group">
					<input type="text" class="form-control" ng-model="newCustomerId">
					<span class="input-group-btn">
						<button class="btn btn-primary" type="button" ng-click="confirmCustomerId()">{{ 'ok' | translate }}</button>
						<button class="btn btn-default" type="button" ng-click="cancelCustomerId()">{{ 'cancel' | translate }}</button>
					</span>
				</div>
			</div>
		</div>
	</form>
	<div class="modal-footer">
		<form class="form-horizontal">
			<br />
			<button class="btn btn-danger pull-left" ng-click="remove()" ng-show="model.canDelete && userId"><i class="fa fa-trash"></i> {{ 'remove' | translate }}</button>
			<button class="btn btn-default pull-left" ng-click="showEvents()"><i class="fa fa-clock-o"></i> {{ 'history' | translate }}</button>
			<button class="btn btn-default pull-left" ng-click="showTransactions()"><i class="fa fa-exchange"></i> {{ 'transactions' | translate }}</button>
			<button ng-show="isLoggedInUserAdmin" class="btn btn-default pull-left" ng-click="showTransactionLimits()"><i class="fa fa-minus-circle"></i> {{ 'transactionLimits' | translate }}</button>
			<button class="btn btn-default " ng-click="generateToken()">{{ 'udGenToken' | translate }}</button>
		</form>
	</div>
</div>
<h2>{{ 'userSettings' | translate }}</h2>
<div ng-hide="settings" class="loading-panel panel">
</div>
<div ng-show="settings" class="panel panel-default">
	<form class="form-horizontal">
		<br />
		<!-- Store Transaction Details (editable) -->
		<lacuna-editable-item description="{{ 'usTooltipStoreTransactionDetails' | translate }}" on-save="saveTransactionDetails(value)" on-edit="editSetting('storeTransactionDetails')">
			<item-label>{{ 'usStoreTransactionDetails' | translate }}</item-label>
			<item-value>{{ (!settings.storeTransactionDetails).toString() | translate }}</item-value>
			<item-editor>
				<select class="form-control" ng-options="option as ((!option).toString() | translate) for option in [true, false]" ng-model="$editor.data.value"></select>
			</item-editor>
		</lacuna-editable-item>
	</form>
</div>

<h2>{{ 'regionAndTime' | translate }}</h2>
<div ng-hide="regionAndTime" class="loading-panel panel">
</div>
<div ng-show="regionAndTime" class="panel panel-default">
	<form class="form-horizontal">
		<br />
		<!-- Culture (editable) -->
		<lacuna-editable-item description="{{ 'usTooltipCulture' | translate }}" on-save="saveRegionAndTime(key, value)" on-edit="editCulture()">
			<item-label>{{ 'usCulture' | translate }}</item-label>
			<item-value>{{ regionAndTime.culture.displayName }}</item-value>
			<item-editor>
				<select class="form-control" ng-options="culture.id as culture.displayName for culture in cultures" ng-model="$editor.data.value"></select>
			</item-editor>
		</lacuna-editable-item>
		<!-- Time Zone (editable) -->
		<lacuna-editable-item description="{{ 'usTooltipTimeZone' | translate }}" on-save="saveRegionAndTime(key, value)" on-edit="editTimeZone()">
			<item-label>{{ 'usTimeZone' | translate }}</item-label>
			<item-value>{{ regionAndTime.timeZone.displayName }}</item-value>
			<item-editor>
				<select class="form-control" ng-options="timezone.id as timezone.displayName for timezone in timezones" ng-model="$editor.data.value"></select>
			</item-editor>
		</lacuna-editable-item>
		<!-- Date Format (editable) -->
		<lacuna-editable-item description="{{ 'usTooltipDateFormat' | translate }}" on-save="saveRegionAndTime(key, value)" on-edit="editDateFormat()">
			<item-label>{{ 'usDateFormat' | translate }}</item-label>
			<item-value>{{ 'dateFormats_' + regionAndTime.dateFormat | translate }}</item-value>
			<item-editor>
				<select class="form-control" ng-options="format as ('dateFormats_' + format | translate) for format in dateFormats" ng-model="$editor.data.value"></select>
			</item-editor>
		</lacuna-editable-item>
		<!-- Date sample -->
		<div class="form-group">
			<label class="col-sm-4 control-label">
				<i class="fa fa-refresh fa-spin fa-fw" ng-show="loadingDateSample"></i>
				<span class="glyphicon glyphicon-question-sign" tooltip="{{ 'usTooltipDateSample' | translate }}" tooltip-append-to-body="true"></span>
				{{ 'usDateSample' | translate }}
			</label>
			<div class="col-sm-8">
				<p class="form-control-static text-info">
					{{ dateSample }}
				</p>
			</div>
		</div>
	</form>
</div>

<div ng-show="isLoggedInUserAdmin">
	<h2>{{ 'usCustomContextsTitle' | translate }}</h2>

	<div ng-show="customSecurityContexts == null" class="loading-panel"></div>

	<div ng-show="customSecurityContexts != null">
		<div class="row">
			<div class="col-md-6">
				<p ng-show="customSecurityContexts.length == 0">
					{{ 'usNoCustomContextsMessage' | translate }}
				</p>

				<div ng-show="customSecurityContexts.length > 0" class="list-group">
					<a ng-repeat="context in customSecurityContexts" class="list-group-item" href="" ng-click="showContext(context)">
						{{context.name}}
					</a>
				</div>

				<div class="input-group" ng-show="true">
					<input type="text" class="form-control" ng-model="newName" placeholder="{{ 'scCustomContextsNewNamePlaceholder' | translate }}">
					<span class="input-group-btn">
						<button class="btn btn-success" type="button" ng-click="createSecurityContext()">{{ 'create' | translate }}</button>
					</span>
				</div>
			</div>
		</div>
	</div>

	<h3>{{ 'scCustomCAsTitle' | translate }}</h3>
	<p>
		{{ 'scCustomCAsSubtitle' | translate }}
		<a href="" data-toggle="modal" data-target="#aboutIntermediateCAsModal">
			<i class="fa fa-question-circle"></i>
		</a>
	</p>
	<div ng-show="intermediateCAs == null" class="loading-panel"></div>
	<div ng-show="intermediateCAs != null" class="row">
		<div class="col-md-6">
			<p ng-show="intermediateCAs.length == 0">
				{{ 'scCustomCAsNoDataMessage' | translate }}
			</p>
			<div ng-show="intermediateCAs.length > 0" class="list-group">
				<a ng-repeat="ca in intermediateCAs" class="list-group-item" href="" ng-click="showCA(ca)">
					{{ca.subjectDisplayName}}
				</a>
			</div>
			<form>
				<div class="form-group">
					<label for="caFile"> {{ 'scCustomCAsAddCA' | translate }}</label>
					<input type="file" id="caFiles" ng-file-model="caFiles" onchange="angular.element(this).scope().upload()" multiple>
				</div>
			</form>
		</div>
	</div>
</div>
