<div class="top-pad"></div>

<div class="content-padding">

	<div class="box-content2 box-content-table box-search-bar table-sticky-dependant">
		<table>
			<tr>
				<td colspan="5">
					<div title="More options" class="search-bar-options" ng-class="{'orange':show_more_options}" ng-click="moreOptions()">
						<i class="fa" ng-class="{'fa-search':show_more_options, 'fa-search-plus':!show_more_options}"></i>
					</div>&nbsp;&nbsp;<input type="text" ng-model="query.search" id="search" tabindex="1" placeholder="Search drivers">
				</td>
				<td colspan="4" class="search-title-nav">
					<div class="page-title-nav">
						<a href="/drivers/onboarding/docs"><button class="button button-green nav-button-grey"><i class="fa fa-briefcase"></i><span>Documents</span></button></a>
						<a href="/drivers/onboarding/new"><button class="button button-green nav-button-green"><i class="fa fa-plus"></i><span>Add Driver</span></button></a>
						<a href="/staff/notes"><button class="button button-green nav-button-green"><i class="fa fa-file"></i><span>Notes</span></button></a>
					</div>
				</td>
			</tr>
			<tr ng-if="show_more_options">
				<th>Community</th>
				<td>
					<ui-select ng-model="query.community" theme="select2" close-on-select="true" style="width: 300px;" title="Select a community">
						<ui-select-match placeholder="Select a community">{{$select.selected.name}}</ui-select-match>
						<ui-select-choices repeat="community.id_community as community in communities | propsFilter: {name: $select.search}">
							{{community.name}}
						</ui-select-choices>
					</ui-select>
					<a ng-show="query.community" ng-click="query.community=null" href=""><button class="button button-small button-empty button-green"><i class="fa fa-trash-o"></i></button></a>
				</td>
				<th>Able To Receive Text Message</th>
				<td>
					<select ng-model="query.send_text" ng-options="option.value as option.label for option in send_text_options"></select>
				</td>
				<th>Status</th>
				<td>
					<select ng-model="query.status" ng-options="option.value as option.label for option in statuses"></select>
				</td>
			</tr>
			<tr ng-if="show_more_options">
				<th>Display</th>
				<td>
					<select ng-model="query.limit" ng-options="limit.value as limit.label for limit in limits"></select> per page
				</td>
				<td colspan="8"></td>
			</tr>
		</table>
	</div>
	<div class="bar-loader bar-loader-search" ng-class="{'bar-loader-loading': loading}"></div>


	<ng-include src="'/assets/view/listview-driver-onboarding.html'"></ng-include>


	<div sticky-bottom="47" class="table-sticky-dependant">
		<div class="no-box-content-color">
			<ng-include src="'/assets/view/listview-paging.html'"></ng-include>
		</div>
	</div>

	<div class="divider"></div>

</div>
