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

	<form class="form-horizontal" role="form">

		<!-- Breadcrumb -->
		<ol class="breadcrumb">

			<li ng-repeat="cert in certBreadcrumb">
				<a href="" ng-click="showIssued(cert)">
					{{ cert.subjectDisplayName }}
				</a>
			</li>

			<li class="active">{{ model.subjectDisplayName }}</li>
		</ol>

		<!-- Subject -->
		<div class="form-group">
			<label class="col-sm-3 control-label">{{ 'subject' | translate }}</label>
			<div class="col-sm-9">
				<p class="form-control-static">
					{{ model.subjectDisplayName }}
					<span tooltip="{{ (subjectDetailsVisible ? 'certHideDetails' : 'certShowDetails') | translate }}">
						<span ng-hide="subjectDetailsVisible" class="glyphicon glyphicon-menu-down glyphicon-btn" ng-click="subjectDetailsVisible = true"></span>
						<span ng-show="subjectDetailsVisible" class="glyphicon glyphicon-menu-up glyphicon-btn" ng-click="subjectDetailsVisible = false"></span>
					</span>
				</p>
			</div>

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

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

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

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

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

		<!-- Issuer -->
		<div class="form-group">
			<label class="col-sm-3 control-label">{{ 'issuer' | translate }}</label>
			<div class="col-sm-9">
				<p class="form-control-static">
					<span ng-show="hasIssuer()">
						<a href="" ng-click="showIssuer()">{{ model.issuerDisplayName }}</a>
					</span>
					<span ng-hide="hasIssuer()">{{ model.issuerDisplayName }}</span>
					<span tooltip="{{ (issuerDetailsVisible ? 'certHideDetails' : 'certShowDetails') | translate }}">
						<span ng-hide="issuerDetailsVisible" class="glyphicon glyphicon-menu-down glyphicon-btn" ng-click="issuerDetailsVisible = true"></span>
						<span ng-show="issuerDetailsVisible" class="glyphicon glyphicon-menu-up glyphicon-btn" ng-click="issuerDetailsVisible = false"></span>
					</span>
				</p>
			</div>

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

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

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

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

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

		<!-- Validity -->
		<div class="form-group">
			<label class="col-sm-3 control-label">{{ 'validity' | translate }}</label>
			<div class="col-sm-9">
				<p class="form-control-static">
					{{ model.validityStart | date }} <b>to</b> {{ model.validityEnd | date }}
				</p>
			</div>
		</div>

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

	</form>

</div>
<div class="modal-footer">
	<button class="btn btn-default pull-left" ng-click="download()" ng-show="canDownload">{{ 'certDownload' | translate }}</button>
	<button ng-repeat="button in customButtons" class="btn {{button.css}}" ng-click="clickCustomButton(button)">
		{{button.text}}
	</button>
	<button class="btn btn-primary" ng-click="close()">{{ 'close' | translate }}</button>
</div>
