
<h2>
	{{ 'thTitle' | translate }}
	<i class="fa fa-refresh fa-spin fa-fw" ng-show="loading"></i>
</h2>
<p>

	<span ng-show="targetUser">
		{{ 'thSubtitleUserPrefix' | translate }}<a href="" ng-click="gotoUser()">{{targetUser.name}}</a>{{ 'thSubtitleUserSuffix' | translate }}
	</span>
	<span ng-hide="targetUser" translate="thSubtitle" translate-compile></span>
</p>

<form class="form-horizontal" role="form">
	<div class="row" style="margin: 2em 0;">
		<div class="form-group">
			<ul class="nav nav-tabs nav-justified">
				<li id="previousTab" ng-show="invoicesState.hasPreviousInvoices" role="presentation">
					<a ng-click="previousInvoicesClick()" href="#">{{ 'thPreviousInvoices' | translate }}</a>
				</li>
				<li id="currentTab" ng-show="invoicesState.hasCurrentInvoices" role="presentation">
					<a ng-click="currentInvoiceClick()" href="#">{{ 'thCurrentInvoice' | translate }}</a>
				</li>
				<li id="nextTab" role="presentation">
					<a ng-click="nextInvoiceClick()" href="#">{{ 'thFutureInvoice' | translate }}</a>
				</li>
			</ul>
		</div>

		<!-- Invoice filter -->
		<div class="form-group" ng-show="invoices.length > 0 && invoicesState.showPreviousInvoices">
			<label class="col-lg-2 control-label">{{ 'thInvoiceFilter' | translate }}</label>
			<div class="col-lg-2">
				<select class="form-control" ng-model="parameters.invoiceId">
					<option ng-repeat="invoice in previousInvoices" value="{{invoice.id}}">
						{{invoice.name}}
					</option>
				</select>
			</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">
						<label class="btn btn-sm" ng-repeat="type in transactionTypes" ng-model="parameters.selectedTypes[type]" btn-checkbox ng-class="{ 'btn-default': !parameters.selectedTypes[type], 'btn-primary': parameters.selectedTypes[type] }">
							{{ 'transactionTypes_' + type | translate }}
						</label>
					</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="parameters.success" btn-radio="null"
							   ng-class="{ 'btn-default': parameters.success !== null, 'btn-primary': parameters.success === null }">
							{{ 'both' | translate }}
						</label>
						<label class="btn btn-sm" ng-model="parameters.success" btn-radio="true"
							   ng-class="{ 'btn-default': parameters.success !== true, 'btn-primary': parameters.success === true }">
							{{ 'thTransactionCompleted' | translate }}
						</label>
						<label class="btn btn-sm" ng-model="parameters.success" btn-radio="false"
							   ng-class="{ 'btn-default': parameters.success !== false, 'btn-primary': parameters.success === false }">
							{{ 'thTransactionNotCompleted' | translate }}
						</label>
					</div>
				</div>
			</div>
		</div>

	</div>

	<!-- Transaction List -->
	<ul class="nav nav-tabs">
		<li role="presentation" class="active">
			<a href="#detalhamento">{{ 'list' | translate }}</a>
		</li>
		<li role="presentation">
			<a href="#resumo">{{ 'synopsis' | translate }}</a>
		</li>
	</ul>

	<div class="tab-content">
		<br />
		<div class="tab-pane fade in active" id="detalhamento">
			<lacuna-paginated-list page-index="parameters.desiredPage" page-size="parameters.pageSize" response-data="data">
				<table class="table table-striped table-hover">
					<tr>
						<th class="fit">
							{{ 'date' | translate }}
							<span class="grid-sort-arrow">
								<span ng-show="parameters.sortDirection == 0" class="clickable" ng-click="parameters.sortDirection=1">
									<i class="glyphicon glyphicon-chevron-down"></i>
								</span>
								<span ng-show="parameters.sortDirection == 1" class="clickable" ng-click="parameters.sortDirection=0">
									<i class="glyphicon glyphicon-chevron-up"></i>
								</span>
							</span>
						</th>
						<th class="fit">{{ 'thCompletedColumn' | translate }}</th>
						<th class="fit">Id</th>
						<th>{{ 'thTypeColumn' | translate }}</th>
					</tr>
					<tr ng-repeat="transaction in $entities">
						<td class="fit">{{ transaction.date | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
						<td class="fit text-center">
							<i class="glyphicon glyphicon-ok" style="color: green" ng-show="transaction.success === true"></i>
							<i class="glyphicon glyphicon-minus" style="color: gray" ng-show="transaction.success === false"></i>
						</td>
						<td class="fit" style="font-family: monospace">
							{{ transaction.id }}
						</td>
						<td>
							<a href="" ng-click="viewDetails(transaction)">{{ 'transactionTypes_' + transaction.type | translate }}</a>
						</td>
					</tr>
				</table>
			</lacuna-paginated-list>
		</div>

		<div class="tab-pane fade" id="resumo">
			<ul class="list-group">
				<li class="list-group-item" ng-repeat="synopsis in resumo">
					<span>{{synopsis.transactionType | translate}}</span><span class="badge">{{synopsis.count}}</span>
				</li>
			</ul>
		</div>
	</div>
</form>
