<div id="servicetickets" class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">{{'Issues overview' | translate}}</h3>
	</div>
	<div class="panel-body">
		<div ng-model="searchParam" class="col-sm-12 search-container">
			<div class="input-group col-sm-12" style="margin-bottom: 15px;">
				<input type="text" class="search-query form-control" style="padding-right: 28px;" placeholder="{{ 'Search...' | translate}}" ng-model="searchParam.searchText" ng-keypress="doSearch($event,searchParam)">
				<span class="input-group-btn" style="display: block;">
					<button class="btn glyphicon glyphicon-search" style="right: 36px; background: transparent; z-index: 1000;" type="button" ng-click="searchCards(searchParam)"></button>
				</span>
			</div>

			<div class="col-sm-12 card-advance-search" style="margin-bottom: 15px;">
				<a href="javascript:void()" ng-click="advanceSearchCards(searchParam)"><i class="glyphicon glyphicon-filter" style="margin-right: 2px;"> </i>{{'Advanced Search' | translate}}</a>
			</div>
			<div class="col-sm-12 card-advance-search-fields" ng-show="searchParam.advanceSearch">
				<div class="form-group col-sm-12">
					<label for="cardmodule" class="col-sm-12">{{'Module' | translate}}</label>
					<select id="cardmodule" class="card-module col-sm-12 form-control" ng-model="searchParam.moduleName" ng-change="searchCards(searchParam)">
						<option value=""></option>
						<option ng-repeat="module in modules" value="{{module.name}}">{{module.name}}</option>
					</select>
				</div>
				<div class="form-group  col-sm-12">
					<label for="cardstatus" class="col-sm-12">{{'Impact' | translate}}</label>
					<select id="cardstatus" class="col-sm-12 card-status form-control" ng-model="searchParam.cardStatus" ng-change="searchCards(searchParam)">
						<option value=""></option>
						<option ng-repeat="status in statuses" value="{{status.name}}">{{status.name | translate}}</option>
					</select>
				</div>
				<div class="col-sm-12" style="margin-bottom: 15px;">
					<input id="ShowOnlyOfMe" type="checkbox" class="card-only-me" style="margin-top: 0; margin-right: 5px;" ng-model="onlyMe" ng-change="searchCards(searchParam, onlyMe)" /><label for="ShowOnlyOfMe" style="margin-bottom: 0;">{{'Only show created by me'}}</label>
				</div>

			</div>
		</div>
		<wizdom365-spinner class="col-sm-12" style="position: relative; height: 15px;" loading="loading" ng-if="loading"></wizdom365-spinner>
		<div class="list-group col-sm-12" ng-if="cards && cards.length > 0">
			<a href="javascript:void()" ng-click="showDetail(card)" class="list-group-item" ng-repeat="card in cards | orderBy:'due' | start: (currentPage - 1) * numPerPage | limitTo:numPerPage">
				<h4 class="list-group-item-heading">{{card.name}}</h4>
				<p class="list-group-item-text">{{card.desc | limitTo:200}}</p>
				<p class="list-group-item-text"><i>{{'Impact' | translate}}: {{ statuses | cardstatus : card.idList | translate}}</i></p>
			</a>
		</div>
		<div class="col-sm-12" ng-if="cards && cards.length === 0">{{"Nothing matches your search" | translate}}</div>
		<div class="bugs-pagination" ng-if="cards && cards.length > 0">
			<pagination total-items="cards.length"
						ng-change="setcurrentPage(currentPage)"
						ng-model="currentPage"
						items-per-page="numPerPage"
						max-size="5"
						boundary-links="false"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"
						ng-hide="cards.length <= numPerPage">

			</pagination>
		</div>
	</div>
</div>

<style>
	.col-sm-12 {
		padding: 0 !important;
	}

	.pagination {
		margin: 0 !important;
	}
</style>