<h4 class="subheader">Devices</h4>
<small>Below are listed all the customer's devices</small>
<div class="well">
	<div class="row">
		<ul class="list-unstyled list-inline col-sm-8">
			<li class="text-center" ng-repeat="device in devices | filter:filter">
				<div ng-class="{active: device.selected}" class="selectable-devices" ng-click="selectDevice(device)">
					<div class="checkbox" ng-show="device.selected"><i class="fa fa-check"></i></div>
					<div><i class="{[{ getDeviceClass(device) }]} fa-4x"></i></div>
					<small>{[{ device.model_number.manufacturer.name+' - '+device.model_number.model_number }]}</small>
				</div>
				<button class="btn btn-xs btn-warning btn-block edit-selectable-device" ng-click="showDeviceModal(device)" eat-click>Edit</button>
			</li>
		</ul>
		<div class="col-m-4 text-right">

			<div>
				<div class="btn-group" ng-model="view" bs-buttons-radio>
					<button type="button" class="btn btn-default" value="selected"><i class="fa fa-check"></i></button>
					<button type="button" class="btn btn-default" value="all"><i class="fa fa-square-o"></i></button>
				</div>
				<button class="btn btn-success" ng-click="showDeviceModal()" eat-click>Add a new device</button>
			</div>

			<br>

			<div >
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search" ng-model="search" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>
			</div>

		</div>
		<br>
		<div paginator="paginator"></div>
	</div>
</div>
<div device-details-modal="showDeviceDetails"></div>