<div class='grid' id="{{grid.thisGridId}}">

	<div ng-show="grid.filteredRows.length > 0 || grid.applySearch">
		
		<div>
			<table ng-if="grid.navigation" cellspacing="0" cellpadding="0" border="0" width="100%" class="navigation">
				<tbody>
					<tr>
						<td>
						</td>
						<td></td>
						<td align="right">
							Found {{grid.navigation.totalCount}} Record(s)
						</td>
						<td align="right" class="pageCount">
							Page {{grid.navigation.pageActive}} of {{grid.navigation.totalPagesActive}}
						</td>
						<td align="right" class="apiNavigation apiNavigationWide">
							<ul class="pagination-sm pagination">
								<li ng-if="grid.apiNavigation.previous" ng-class="{'disabled': grid.navigation.startLimit<=0}">
									<a ng-click="grid.apiNavigation.previous.command()" href="">
										{{translation.getPrevious[LANG]}} {{grid.navigation.endLimit}}
									</a>
								</li>
								<li ng-if="grid.apiNavigation.next" ng-class="{'disabled': !grid.navigation.showNext}">
									<a ng-click="grid.apiNavigation.next.command()" href="">
										{{translation.getNext[LANG]}} {{grid.navigation.endLimit}}
									</a>
								</li>
								<li ng-if="grid.apiNavigation.last" ng-class="{'disabled': !grid.navigation.showNext}">
									<a ng-click="grid.apiNavigation.last.command();" href="">{{translation.last[LANG]}}</a>
								</li>
							</ul>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<table border="0" cellspacing="0" cellpadding="0" width="100%" class="">
			<tr class="header">
				<td>
					<div ng-show="grid.topActions.length > 0">
						{{translation.select[LANG]}}:
						<a href="" ng-click="grid.selectAll()">{{translation.All[LANG]}}</a> -
						<a href="" ng-click="grid.selectNone()">{{translation.None[LANG]}}</a> |
						<div class="btn-sm btn-group" dropdown>
							<button type="button" class="btn btn-sm btn-danger dropdown-toggle" dropdown-toggle ng-disabled="disabled">
								{{translation.moreAction[LANG]}} <span class="caret"></span>
							</button>
							<ul class="dropdown-menu" role="menu">
								<li ng-repeat="action in grid.topActions">
									<a href="" ng-confirm-click="{{action.commandMsg}}" ng-click="action.command()">{{action.label}}</a>
								</li>
							</ul>
						</div>
					</div>
				</td>
				<td align="right">
					<div ng-show="grid.search">
						{{translation.searchGrid[LANG]}}:
						<input class="searchInput" ng-model="grid.query" type="text" ng-keyup="grid.filterData(grid.query); grid.applySearch=true"/>
						<button ng-click="grid.query =''; grid.filterData('')" class="btn-filter btn btn-sm btn-danger">
							{{translation.clearGridSearch[LANG]}}
						</button>
					</div>
				</td>
			</tr>
		</table>
		
		<div ng-show="grid.filteredRows.length > 0">
			
			<table border="0" cellspacing="0" cellpadding="0" width="100%" class="navigation">
				<tr>
					<td valign="middle">
						<ul class="gridRPP">
							<li ng-repeat="recordsPerPage in grid.recordsPerPageArray">
								<a href="" ng-class="{active:recordsPerPage === grid.itemsPerPage}" ng-click="grid.changeLimitTo(recordsPerPage)">{{recordsPerPage}}</a>
							</li>
						</ul>
					</td>
					<td align="right">
						<pagination total-items="grid.rows.length" ng-model="grid.currentPage" items-per-page="grid.filteredRows.length" num-pages="grid.totalPages" max-size="grid.maxPageSize" class="pagination-sm" boundary-links="true" rotate="false"></pagination>
					</td>
				</tr>
			</table>
			
			<table border="0" cellspacing="0" cellpadding="0" width="100%" class="">
				<tr>
					<th ng-show="(grid.topActions.length > 0)||(grid.leftActions.length > 0)" colspan="{{(grid.topActions.length > 0) ? (grid.leftActions.length + 1) : grid.leftActions.length}}"></th>
					<th ng-repeat="column in grid.columns">
						<a href="" ng-class="{active:grid.sortField===column.field}" ng-click="grid.changeSort(column.field);">{{column.label}}</a>
					</th>
				</tr>
				<tr ng-repeat="row in grid.filteredRows | orderBy:grid.sortField:grid.reverse |limitTo: grid.itemsPerPage"
				    ng-class="{'first': $first, 'last': $last, selected:row.selected}" ng-class-odd="'odd'" ng-class-even="'even'" class="rows">
					<td class='leftAction' ng-show="grid.topActions.length > 0">
						<input ng-model="row.selected" name="IDS[]" type="checkbox" value="{{row['ID']}}"/>
					</td>
					<td ng-repeat="action in grid.leftActions" class="leftAction">
						<a href="" ng-confirm-click="{{action.commandMsg}}" ng-click="action.command(row)">
							<span class="icon icon-{{action.icon}}" tooltip="{{action.label}}"></span>
							<!--<img ng-src="themes/{{grid.themeToUse}}/img/{{action.icon}}.png" tooltip="{{action.label}}" border="0"/>-->
						</a>
					</td>
					<td ng-repeat="column in grid.columns" class="columns column-{{column.field}}">
						<span ng-if="column.filter">{{row[column.field] | filterPicker: column.filter}}</span>
						<span ng-if="!column.filter" ng-bind-html="row[column.field]"></span>
					</td>
				</tr>
			</table>
			
			<table border="0" cellspacing="0" cellpadding="0" width="100%" class="navigation">
				<tr>
					<td valign="middle">
						<ul class="gridRPP">
							<li ng-repeat="recordsPerPage in grid.recordsPerPageArray">
								<a href="" ng-class="{active:recordsPerPage === grid.itemsPerPage}" ng-click="grid.changeLimitTo(recordsPerPage)">{{recordsPerPage}}</a>
							</li>
						</ul>
					</td>
					<td align="right">
						<pagination total-items="grid.rows.length" ng-model="grid.currentPage" items-per-page="grid.filteredRows.length" num-pages="grid.totalPages" max-size="grid.maxPageSize" class="pagination-sm" boundary-links="true" rotate="false"></pagination>
					</td>
				</tr>
				<tr>
					<td align="right" colspan="2">
						<div class="range-label">{{translation.displaying[LANG]}} {{grid.range.lower}} -
							{{grid.range.upper}} {{translation.of[LANG]}} {{grid.rows.length}}
						</div>
					</td>
				</tr>
			</table>

		</div>
	</div>
	<div ng-show="grid.filteredRows.length ===0">
		<div ng-show="grid.showNoMessage">
			<br>
			<div class="alert-warning alert ng-isolate-scope alert-warning alert-dismissable">
				<span class="ng-scope ng-binding">{{translation.noRecordsFound[LANG]}}</span>
			</div>
		</div>
	</div>
</div>