<h2>
	{{ vm.titleKey | translate }}
	<i class="fa fa-refresh fa-spin fa-fw" ng-show="loading"></i>
</h2>
<p>
	<span ng-show="vm.targetUser">
		{{ 'evSubtitleUserPrefix' | translate }}<a href="" ng-click="gotoUser()">{{vm.targetUser.name}}</a>{{ 'evSubtitleUserSuffix' | translate }}
	</span>
	<span ng-hide="vm.targetUser" translate="evSubtitle"></span>
</p>

<form class="form-horizontal" role="form">
	<div class="row" style="margin: 2em 0;">
		<!-- Date filter -->
		<div class="form-group">
			<label class="col-lg-2 control-label">{{ 'thDateFilter' | translate }}</label>
			<div class="col-lg-5">
				<div class="input-group">
					<span class="input-group-addon">{{ 'thFromDate' | translate }}
					</span>

					<input type="text" id="begin-datepicker" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="vm.dateParameters.beginDate" is-open="vm.editingBeginDate" max-date="vm.today"
						   show-weeks="false" ng-focus="vm.editBeginDate($event)" on-open-focus="false" datepicker-append-to-body="true" />

					<span class="input-group-addon">{{ 'thToDate' | translate }}</span>

					<input type="text" id="end-datepicker" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="vm.dateParameters.endDate" is-open="vm.editingEndDate" max-date="vm.today"
						   show-weeks="false" ng-focus="vm.editEndDate($event)" on-open-focus="false" datepicker-append-to-body="true" />
					<span class="input-group-btn">
						<button class="btn btn-primary" type="button" ng-click="vm.updateDates()"><span class="glyphicon glyphicon-search"></span><span class="button-text">{{ 'search' | translate }}</span></button>
					</span>
				</div>
			</div>
		</div>

		<!-- Type filter -->
		<div class="form-group">
			<label class="col-lg-2 control-label">{{ 'thTypeFilter' | translate }}</label>
			<div class="col-lg-10">
				<div class="btn-toolbar">
					<div class="btn-group" data-toggle="buttons">
						<button class="btn btn-sm" btn-checkbox ng-repeat="type in vm.operationTypes" ng-model="vm.filters.operations[type]" ng-class="{ 'btn-default': !vm.filters.operations[type], 'btn-primary': vm.filters.operations[type] }">
							{{ 'operationTypes_' + type | translate }}
						</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Success filter -->
		<div class="form-group">
			<label class="col-lg-2 control-label">{{ 'thSuccessFilter' | translate }}</label>
			<div class="col-lg-10">
				<div class="btn-toolbar">
					<div class="btn-group" data-toggle="buttons">
						<label class="btn btn-sm" ng-model="vm.filters.success" btn-radio="null"
							   ng-class="{ 'btn-default': vm.filters.success !== null, 'btn-primary': vm.filters.success === null }">
							{{ 'both' | translate }}
						</label>
						<label class="btn btn-sm" ng-model="vm.filters.success" btn-radio="true"
							   ng-class="{ 'btn-default': vm.filters.success !== true, 'btn-primary': vm.filters.success === true }">
							{{ 'success' | translate }}
						</label>
						<label class="btn btn-sm" ng-model="vm.filters.success" btn-radio="false"
							   ng-class="{ 'btn-default': vm.filters.success !== false, 'btn-primary': vm.filters.success === false }">
							{{ 'fail' | translate }}
						</label>
					</div>
				</div>
			</div>
		</div>

	</div>

	<lacuna-paginated-list page-index="vm.filters.desiredPage" page-size="vm.filters.pageSize" response-data="vm.data" get-data="vm.searchByFilters">
		<table class="table 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>
				<th>{{ 'thClientLibId' | translate }}</th>
				<th>{{ 'thClientLibVersion' | translate }}</th>
			</tr>
			<tr ng-repeat="op in $entities">
				<td class="fit">{{ op.date | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
				<td class="fit text-center">
					<i class="glyphicon glyphicon-ok" style="color: green" ng-show="op.success === true"></i>
					<i class="glyphicon glyphicon-remove" style="color: red" ng-show="op.success === false"></i>
				</td>
				<td class="fit" style="font-family: monospace">
					<span ng-bind="op.id"></span>
				</td>
				<td>
					<a ng-show="op.hasDetails" href="" ng-click="vm.showDetails(op)">{{ 'operationTypes_' + op.operation | translate }}</a>
					<span ng-hide="op.hasDetails">{{ 'operationTypes_' + op.operation | translate }}</span>
				</td>
				<td>{{ op.clientLibId }}</td>
				<td>{{ op.clientLibVersion }}</td>
			</tr>
		</table>
	</lacuna-paginated-list>
</form>

<!-- Datepicker template -->
<script type="text/ng-template" id="template/datepicker/popup.html">
	<ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
		<li ng-transclude style="padding:8px"></li>
		<li ng-if="showButtonBar" style="padding:0px 8px">
			<span class="btn-group pull-left">
				<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ 'today' | translate }}</button>
				<button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ 'clear' | translate }}</button>
			</span>
			<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ 'close' | translate }}</button>
		</li>
	</ul>
</script>
