<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/employees">Employees</a></li>
	<li class="active">Import From Quickbooks</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Import From Quickbooks</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._reload()" title="Reload"><i class="ti ti-reload"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-sm-8">
							<input type="text" class="form-control" ng-model="searchInput" placeholder="Search here...">
						</div>
						<div class="col-sm-4">
							<select class="form-control" name="_statusFilter" id="_statusFilter" ng-model="vm._statusFilter">
								<option value="">-- Select --</option>
								<option value="Not Imported">Not Imported</option>
								<option value="Imported">Imported</option>
							</select>
						</div>
					</div>
					<div style="max-height: 500px; overflow-y: auto;">
						<table class="table table-striped">
							<thead>
								<tr>
									<th width="5%"><input type="checkbox" ng-model="_selectedAll" ng-click="vm._selectAll(_selectedAll)" /></th>
									<th width="5%">ID</th>
									<th>Name</th>
									<th class="hidden-xs">Phone</th>
									<th class="hidden-xs">Mobile</th>
									<th class="hidden-xs">Email</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="employee in vm.filteredEmployees = (vm.employees | filter: searchInput | filter: vm._filterByStatus)">
									<td><input type="checkbox" ng-disabled="employee.status == 'Imported'" checklist-model="vm._selectedEmployees" checklist-value="employee.id" /></td>
									<td>{{employee.id}}</td>
									<td>{{employee.name}}</td>
									<td class="hidden-xs">{{employee.contacts.phone}}</td>
									<td class="hidden-xs">{{employee.contacts.phone_secondary}}</td>
									<td class="hidden-xs">{{employee.contacts.email}}</td>
									<td><span class="label" ng-class="{'label-success': employee.status == 'Imported', 'label-danger': employee.status == 'Not Imported'}">{{employee.status}}</span></td>
								</tr>
							</tbody>
						</table>
					</div>
					<p class="text-center" ng-show="vm.employees.length == 0">No records found</p>
				</div>
				<div class="panel-footer" ng-show="vm.employees.length > 0">
					<div class="row">
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._noMoreEmployeesToLoad" ng-click="vm._loadMore()" class="btn-warning btn">Load More {{vm._total}} Employee(s)</a>
						</div>
						<div class="col-xs-12 col-sm-4 text-center">{{vm.filteredEmployees.length}} Record(s) Found</div>
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._selectedEmployees.length == 0 || !vm._importButton" ng-click="vm._importEmployees()" class="btn-info btn">Import {{vm._selectedEmployees.length}} Employee(s)</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
