<div id="tabContent" ng-controller="VeterinarianController">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header">
					<div class="box-name">
						<i class="fa fa-table"></i> <span>Veterinarians</span>
					</div>
					<div class="box-icons">
						<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
						</a> <a class="expand-link"> <i class="fa fa-expand"></i>
						</a> <a class="close-link"> <i class="fa fa-times"></i>
						</a>
					</div>
					<div class="no-move"></div>
				</div>
				<div class="box-content no-padding">
					<table
						class="table table-striped table-bordered table-hover table-heading no-border-bottom">
						<tr>
							<td>Name</td>
							<th>Specialties</th>
						</tr>
						<tr ng-repeat="veterinarian in veterinarians">
							<td>{{veterinarian.firstName}}&nbsp;{{veterinarian.lastName}}</td>
							<td><span ng-repeat="specialty in veterinarian.specialties">{{specialty.name}}&nbsp;</span></td>
						</tr>
					</table>
				</div>
				<div class="box-content">
					<form class="form-horizontal" role="form">
						<div class="form-group has-success">
							<div class="col-sm-3">
								<input type="text" class="form-control" placeholder="Search" data-toggle="tooltip" data-placement="bottom" title="Search" ng-model="searchText">
							</div>
							<button type="submit" class="btn btn-primary btn-label-left"
								ng-click="searchVeterinarians()">
								<span><i class="fa fa-clock-o"></i></span> Search
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
