<h2>
	{{ 'securityContexts' | translate }}
</h2>
<p>
	{{ 'scSubtitle' | translate }}
</p>

<div ng-show="builtinContexts == null" class="loading-panel"></div>
<div class="row">
	<div class="col-md-6">
		<div class="list-group margin-bottom0" ng-show="builtinContexts != null">
			<a ng-repeat="context in builtinContexts | orderBy: '+type'" class="list-group-item" href="" ng-click="showContext(context)">
				{{ context.name }}
				<span class="pull-right">
					<span class="label label-default">{{ context.type }}</span>
				</span>
			</a>
		</div>
	</div>
</div>

<h2>{{ 'scCustomContextsTitle' | translate }}</h2>
<p>
	{{ 'scCustomContextsSubtitle' | translate }}		
	<a href="" data-toggle="modal" data-target="#aboutSecurityContextsModal">
		<i class="fa fa-question-circle"></i>
	</a>
</p>
<div ng-show="customContexts == null" class="loading-panel"></div>
<div class="row" ng-show="customContexts != null">
	<div class="col-md-6">

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

		<div ng-show="customContexts.length > 0" class="list-group">
			<a ng-repeat="context in customContexts" 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="{{ 'scCustomContextsNewNamePlaceholder' | translate }}">
			<span class="input-group-btn">
				<button class="btn btn-success" type="button" ng-click="createSecurityContext()">{{ 'create' | translate }}</button>
			</span>
		</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>

<!-- 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>
	</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>
	</div>
</div>
