<div ng-show="lacunaSecurityContextCreated">
	<div class="alert alert-success top-buffer alert-dismissable">
		<span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
		{{ 'scLacunaSecurityContextCreated' | translate }} <a href="#/security-contexts">{{ 'scLacunaSecurityContextCreatedHere' | translate }}</a>
	</div>
</div>

<h2>
	{{ 'systemSecurityContexts' | translate }}
</h2>
<div>
	{{ 'scSystemContextsSubtitle' | translate }}
	<a href="" data-toggle="modal" data-target="#aboutSecurityContextsModal">
		<i class="fa fa-question-circle"></i>
	</a>
</div>

<div ng-show="systemContexts == null" class="loading-panel"></div>
<div class="row" ng-show="systemContexts != null">
	<div class="col-md-6">

		<p ng-show="systemContexts.length == 0">
			{{ 'scSystemContextsNoDataMessage' | translate }}
		</p>

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

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

		<div ng-show="!hasLacunaSecurityContext && !lacunaSecurityContextCreated">
			<a href="" class="btn btn-link" ng-click="addLacunaSecurityContext()">
				{{ 'scAddLacunaSecurityContext' | translate }}
			</a>
			<a href="" data-toggle="modal" data-target="#aboutLacunaSecurityContextModal">
				<i class="fa fa-question-circle"></i>
			</a>
		</div>

	</div>
	<div class="col-md-6">

	</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="caFile" file-model="caFile" onchange="angular.element(this).scope().caFileChanged()">
			</div>
		</form>
	</div>
</div>

<!-- About Custom Security Contexts modal -->
<div class="modal fade" id="aboutSecurityContextsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">{{ 'scAboutCustomContextsTitle' | translate }}</h4>
			</div>
			<div class="modal-body">
				<p>
					{{ 'scAboutCustomContextsPart1' | translate }}
				</p>
				<p>
					{{ 'scAboutCustomContextsPart2' | translate }}
				</p>
				<p>
					{{ 'scAboutCustomContextsPart3' | translate }}
				</p>
			</div>
			<!--<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
			</div>-->
		</div>
	</div>
</div>

<!-- About Intermediate CAs modal -->
<div class="modal fade" id="aboutIntermediateCAsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">{{ 'scAboutCustomCAsTitle' | translate }}</h4>
			</div>
			<div class="modal-body">
				<p>
					{{ 'scAboutCustomCAsPart1' | translate }}
				</p>
				<p>
					{{ 'scAboutCustomCAsPart2' | translate }}
				</p>
			</div>
			<!--<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
			</div>-->
		</div>
	</div>
</div>

<!-- About Lacuna Security Context modal -->
<div class="modal fade" id="aboutLacunaSecurityContextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">{{ 'scAboutLacunaSecurityContextTitle' | translate }}</h4>
			</div>
			<div class="modal-body">
				<p>
					{{ 'scAboutLacunaSecurityContext' | translate }}
				</p>
			</div>
		</div>
	</div>
</div>
