<div class="box-content2 box-content-table">
	<div sticky-header>
		<table class="thead">
			<tr>
				<th>Name</th>
				<th>Info</th>
				<th class="tb-small tb-center">Payment</th>
				<th class="tb-small tb-center" ng-if="query.working != 'all'">Working</th>
				<th class="tb-small tb-center">Pex</th>
				<th class="tb-small"> </th>
			</tr>
		</table>
		<div class="tbody">
			<table class="tb-zebra">
				<tr ng-repeat="s in staff track by $index" ng-attr-tabindex="{{$index+4}}" tab-select="/staff/{{s.login}}" ng-init="$last ? ngRepeatFinished() : null">
					<td>
						<span class="listview-bold">{{s.name}}</span>
						<br><span class="listview-smaller">{{s.login}}</span>
						<br><a href ng-click="callText(s.phone)" class="listview-smaller">{{s.phone | formatPhone}}</a>
					</td>
					<td>
						<span class="listview-bold">{{s.type}}</span>
						<span ng-if="!community"><br>
							<span>
								<span class="staff-community-repeat listview-smaller" ng-repeat="community in s.communities">
									{{community}}
								</span>
								<span class="staff-community-repeat listview-smaller" ng-repeat="g in s.brand_representative_groups">
									{{g}}
							</span>
							<span class="staff-community-repeat listview-smaller" ng-repeat="g in s.community_manager_groups">
									{{g}}
							</span>
							</span>
						</span>
						<div>

							<span class="tag tag-empty tag-green" ng-if="s.active">Active</span>
							<span class="tag tag-empty tag-red" ng-if="!s.active">Inactive</span>

							<span class="tag tag-empty tag-orange" ng-if="s.vehicle == 'car'">Car</span>
							<span class="tag tag-empty tag-purple" ng-if="s.vehicle == 'bike'">Bike</span>
							<span class="tag tag-empty tag-darkgreen" ng-if="s.vehicle == 'rollerblades'">Rollerblades</span>
							<span class="tag tag-empty tag-lightblue" ng-if="s.vehicle == 'rickshaw'">Rickshaw</span>
							<span class="tag tag-empty tag-yellow" ng-if="s.vehicle == 'skateboard'">Skateboard</span>
							<span class="tag tag-empty 	tag-grey" ng-if="!s.vehicle">None</span>

						</div>
					</td>
					<td nowrap class="tb-center tb-v-center tb-small">
						<span ng-if="!s.isCommunityDirector">
							<span class="tag tag-green" ng-if="s.verified">Verified</span>
							<span class="tag tag-red" ng-if="!s.verified">Unverified</span>
						</span>
						<span ng-if="s.isCommunityDirector">
							<span class="tag tag-empty tag-lightgrey">None</span>
						</span>
					</td>
					<td nowrap class="tb-center tb-v-center" ng-if="query.working != 'all'">
						<span class="tag tag-purple" ng-if="s.working_today && !s.working">Today</span>
						<span class="tag tag-orange" ng-if="s.working">Now</span>
						<span class="tag tag-lightgrey" ng-if="!s.working_today && !s.working">No</span>
					</td>
					<td nowrap class="tb-center tb-v-center tb-small">
						<span class="tag tag-empty tag-grey" ng-if="s.pexcard && s.pexcard.card_serial">{{s.pexcard.card_serial}}</span>
						<span class="tag tag-empty tag-lightgrey" ng-if="!s.pexcard || !s.pexcard.card_serial">None</span>
					</td>
					<td nowrap class="tb-v-center tb-right">
						<a href="/staff/{{s.login}}"><button class="button button-small button-empty button-green"><i class="fa fa-eye"></i>&nbsp;&nbsp;View</button></a>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>
