<div class="row" ng-controller="alertController">
	<div class="col-md-12 top-buffer">
		<div class="alert alert-danger" ng-repeat="alert in alerts">
			<i class="fa fa-warning"></i>
			<span>
				{{ 'alert_' + alert.type | translate }}
				<span ng-show="alert.details">
					({{ alert.details }})
				</span>
				{{ 'pleaseContactSupport' | translate }}
				<a href="http://help.lacunasoftware.com" target="_blank">http://help.lacunasoftware.com</a>
			</span>
		</div>
	</div>
</div>

<h2>{{ 'dashboard' | translate }}</h2>
<div class="row">
	<div class="col-md-12">
		<div class="panel panel-primary">
			<div class="panel-heading"><h4>{{ 'dashboardApiTokens' | translate }} <a href="" class="link-white" data-toggle="modal" data-target="#aboutAccessTokensModal"><i class="fa fa-question-circle"></i></a></h4></div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-6 center-block">
						<button type="button" class="btn btn-default btn-lg center-block" ng-click="generateToken()">{{ 'dashboardGenerateToken' | translate }}</button>
					</div>
					<div class="col-md-6 center-block">
						<button type="button" class="btn btn-danger btn-lg center-block" ng-click="revokeTokens()">{{ 'dashboardRevokeTokens' | translate }}</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<h3>{{ 'dashboardNextInvoice' | translate}}</h3>
<div class="row">
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-yellow">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-pencil fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge">{{ signatures }}</div>
						<div>{{ 'signatures' | translate }}</div>
					</div>
				</div>
			</div>
			<a href="#/transactions?type=PadesSignature&type=CadesSignature&type=XmlSignature&success=true">
				<div class="panel-footer">
					<span class="pull-left">{{ 'viewDetails' | translate }}</span>
					<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
					<div class="clearfix"></div>
				</div>
			</a>
		</div>
	</div>
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-yellow">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-sign-in fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge">{{authentications}}</div>
						<div>{{ 'certAuths' | translate }}</div>
					</div>
				</div>
			</div>
			<a href="#/transactions?type=CertAuthentication&success=true">
				<div class="panel-footer">
					<span class="pull-left">{{ 'viewDetails' | translate }}</span>
					<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
					<div class="clearfix"></div>
				</div>
			</a>
		</div>
	</div>
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-yellow">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-bars fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge">{{others}}</div>
						<div>{{ 'others' | translate }}</div>
					</div>
				</div>
			</div>
			<a href="#/transactions?type=Timestamp&type=OpenSignature&type=AddPdfMarks&success=true">
				<div class="panel-footer">
					<span class="pull-left">{{ 'viewDetails' | translate }}</span>
					<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
					<div class="clearfix"></div>
				</div>
			</a>
		</div>
	</div>
	<div class="col-lg-3 col-md-6">
		<div class="panel panel-green">
			<div class="panel-heading">
				<div class="row">
					<div class="col-xs-3">
						<i class="fa fa-exchange fa-5x"></i>
					</div>
					<div class="col-xs-9 text-right">
						<div class="huge">{{ transactions }}</div>
						<div>{{ 'transactions' | translate }}</div>
					</div>
				</div>
			</div>
			<a href="#/transactions?success=true">
				<div class="panel-footer">
					<span class="pull-left">{{ 'viewDetails' | translate }}</span>
					<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
					<div class="clearfix"></div>
				</div>
			</a>
		</div>
	</div>
</div>
<a href="#/transactions?page=1">{{ 'dashBoardGoToInvoices' | translate }}</a>

<h3>{{ 'dashboardLastEvents' | translate }}</h3>
<table class="table table-condensed table-striped table-hover">
	<tr>
		<th class="fit">
			{{ 'date' | translate }}
			<span class="grid-sort-arrow">
				<span ng-show="vm.filters.sortDirection == 0" class="clickable" ng-click="vm.filters.sortDirection = 1">
					<i class="glyphicon glyphicon-chevron-down"></i>
				</span>
				<span ng-show="vm.filters.sortDirection == 1" class="clickable" ng-click="vm.filters.sortDirection = 0">
					<i class="glyphicon glyphicon-chevron-up"></i>
				</span>
			</span>
		</th>
		<th class="fit">{{ 'thResultColumn' | translate }}</th>
		<th class="fit">Id</th>
		<th>{{ 'thTypeColumn' | translate }}</th>
	</tr>
	<tr ng-repeat="e in events">
		<td class="fit">{{ e.date | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
		<td class="fit text-center">
			<i class="glyphicon glyphicon-ok" style="color: green" ng-show="e.success === true"></i>
			<i class="glyphicon glyphicon-remove" style="color: red" ng-show="e.success === false"></i>
		</td>
		<td class="fit" style="font-family: monospace">
			<span ng-bind="e.id"></span>
		</td>
		<td>
			<a ng-show="e.hasDetails" href="" ng-click="showEventDetails(e)">{{ 'operationTypes_' + e.operation | translate }}</a>
			<span ng-hide="e.hasDetails">{{ 'operationTypes_' + e.operation | translate }}</span>
		</td>
	</tr>
</table>
<a href="#/events?count=10&sortField=DateUtc&sortDirection=0">{{ 'dashBoardGoToEventPage' | translate }}</a>

<h3>{{ 'dashboardGetStartedTitle' | translate }}</h3>
<p>{{ 'dashboardGetStartedMessage' | translate }}</p>
<ul>
	<li><a href="https://github.com/LacunaSoftware/RestPkiSamples/tree/master/Java" target="_blank">Java</a></li>
	<li><a href="https://github.com/LacunaSoftware/RestPkiSamples/tree/master/PHP" target="_blank">PHP</a></li>
	<li><a href="https://github.com/LacunaSoftware/RestPkiSamples/tree/master/CSharp" target="_blank">C#</a></li>
	<li><a href="https://github.com/LacunaSoftware/RestPkiSamples/tree/master/Python" target="_blank">Python</a></li>
	<li><a href="https://github.com/LacunaSoftware/RestPkiSamples/tree/master/NodeJS" target="_blank">Node.js</a></li>
</ul>
<p ng-show="isOnPremises"><b>{{ 'dashboardGetStartedOnPremisesNote' | translate }}</b></p>

<h3>{{ 'dashboardCustomizeValidationsTitle' | translate }}</h3>
<p>{{ 'dashboardCustomizeValidationsMessage' | translate }}</p>
<ul>
	<li><a href="#/security-contexts">{{ 'dashboardManageSecurityContexts' | translate }}</a></li>
</ul>


<!-- About API access tokens -->
<div class="modal fade" id="aboutAccessTokensModal" 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">{{ 'dashboardAboutTokensTitle' | translate }}</h4>
			</div>
			<div class="modal-body">
				<p>{{ 'dashboardAboutTokensMessage' | translate }}</p>
			</div>
			<!--<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
			</div>-->
		</div>
	</div>
</div>
