<div class="modal-header">
	<h3 class="modal-title">{{ 'cscdTitle' | translate }}</h3>
</div>
<div class="modal-body">

	<div class="well" ng-show="!model">
		{{ 'loading' | translate }}
	</div>

	<form class="form-horizontal" role="form" ng-show="model">

		<div class="form-group">
			<label class="col-sm-3 control-label">Id</label>
			<div class="col-sm-9">
				<p class="form-control-static">{{model.id}}</p>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">{{ 'name' | translate }}</label>
			<div class="col-sm-9">
				<p ng-hide="renaming" class="form-control-static">
					{{model.name}}
					<span class="glyphicon glyphicon-pencil glyphicon-btn" ng-click="rename()" ng-show="isEditable" tooltip="{{ 'editTooltip' | translate }}"></span>
				</p>
				<div ng-show="renaming" class="input-group">
					<input type="text" class="form-control" ng-model="newName">
					<span class="input-group-btn">
						<button class="btn btn-primary" type="button" ng-click="renameConfirm()">{{ 'ok' | translate }}</button>
						<button class="btn btn-default" type="button" ng-click="renameCancel()">{{ 'cancel' | translate }}</button>
					</span>
				</div>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">{{ 'description' | translate }}</label>
			<div class="col-sm-9">
				<p class="form-control-static">{{ model.description }}</p>
			</div>
		</div>

		<div class="form-group" ng-hide="model.type == 'Standard'">
			<label class="col-sm-3 control-label">{{ 'cscdTrustedRoots' | translate }}</label>
			<div class="col-sm-9" ng-show="trustedRoots == null">
				<p class="form-control-static">
					{{ 'loading' | translate }}
				</p>
			</div>
			<div class="col-sm-9" ng-show="trustedRoots != null">
				<p ng-repeat="cert in trustedRoots" class="form-control-static">
					<a href="" ng-click="showTrustedRoot(cert)">{{ cert.subjectDisplayName }}</a>
					<span class="glyphicon glyphicon-remove glyphicon-btn" ng-click="removeTrustedRoot(cert)" ng-show="isEditable" tooltip="{{ 'remove' | translate }}"></span>
				</p>
				<p ng-show="isEditable" class="form-control-static">
					{{ 'cscdAddTrustedRoot' | translate }}:
					<input type="file" file-model="trustedRootFile" onchange="angular.element(this).scope().trustedRootFileChanged()" style="display:inline-block" />
				</p>
				<p ng-show="!isEditable && !trustedRoots.length" class="form-control-static">
					{{ 'none' | translate }}
				</p>
			</div>
		</div>

		<div class="form-group" ng-hide="model.type == 'Standard'">
			<label class="col-sm-3 control-label">{{ 'cscdStandardArbitrators' | translate }}</label>
			<div class="col-sm-9">

				<div class="form-control-static" ng-show="editingArbitrators">
					<p ng-repeat="(name, value) in newAdditionalArbitrators">
						<input type="checkbox" ng-model="newAdditionalArbitrators[name]" id="{{name}}" />
						<label class="label-not-bold" id="name" for="{{name}}">{{ 'standardArbitrator_' + name | translate }}</label>
					</p>
					<p>
						<button class="btn btn-xs btn-primary" ng-click="saveArbitrators()">{{ 'save' | translate }}</button>
						<button class="btn btn-xs btn-warning" ng-click="discardArbitrators()">{{ 'discard' | translate }}</button>
					</p>
				</div>

				<p class="form-control-static" ng-hide="editingArbitrators">
					<span ng-repeat="name in additionalArbitrators">
						{{ 'standardArbitrator_' + name | translate }}<span ng-show="!$last">,</span>
					</span>
					<span ng-show="!additionalArbitrators.length">{{ 'none' | translate }}</span>
					<span class="glyphicon glyphicon-pencil glyphicon-btn" ng-click="editArbitrators()" ng-show="isEditable" tooltip="{{ 'editTooltip' | translate }}"></span>
				</p>

			</div>
		</div>

	</form>

</div>
<div class="modal-footer">
	<button class="btn btn-danger pull-left" ng-click="remove()" ng-show="isEditable">{{ 'remove' | translate }}</button>
	<button class="btn btn-primary" ng-click="close()">{{ 'close' | translate }}</button>
</div>
