<div class="row">
	<div class="col-sm-6" id="table-wrapper">
		<table class="table" style="table-layout: fixed;">
			<thead>
				<tr>
					<th style="width: 36%;">Device</th>
					<th style="width: 20%;" class="text-center">Power</th>
					<th style="width: 18%;" class="text-center" ng-if="powerInputMode">Input</th>
					<th style="width: 26%;" class="text-center" ng-if="powerInputMode">Navigation</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="device in roomDevices track by $index">
					<td style="word-break: break-all;">{{device.name | characters: 15}}</td>
					 <td class="text-center" ng-if="!powerInputMode">
							<input type="checkbox" name="devices" id="device{{$index}}"
										 ng-disabled="disable"
										 checklist-model="ngModel"
										 checklist-compare-on="['device_id']"
										 checklist-value="{
											 'device_id': device.id,
											 'type': 0,
											 'func': null,
											 'name': device.name,
											 'repeat_min': device.repeat_min,
											 'repeat_macro': device.repeat_macro,
											 'target_type': device.target_type,
											 'target_addr': device.target_addr,
											 'target_port': device.target_port }">
					</td>
					<td class="text-center" ng-if="powerInputMode">      
						<input type="checkbox" name="power" id="power{{$index}}"
									 ng-disabled="disable"
									 checklist-model="ngModel"
									 checklist-compare-on="['device_id', 'type']"
									 checklist-value="{
										 'device_id': device.id,
										 'type': 1,
										 'func': null,
										 'name': device.name,
										 'repeat_min': device.repeat_min,
										 'repeat_macro': device.repeat_macro,
										 'target_type': device.target_type,
										 'target_addr': device.target_addr,
										 'target_port': device.target_port }">
					</td>
					<td class="text-center" ng-if="powerInputMode">
						<input type="checkbox" name="input" id="input{{$index}}"
									 ng-disabled="disable"
									 checklist-model="ngModel"
									 checklist-compare-on="['device_id', 'type']"
									 checklist-value="{
										 'device_id': device.id,
										 'type': 2,
										 'func': null,
										 'name': device.name,
										 'repeat_min': device.repeat_min,
										 'repeat_macro': device.repeat_macro,
										 'target_type': device.target_type,
										 'target_addr': device.target_addr,
										 'target_port': device.target_port }">
					</td>
          <td class="text-center" ng-if="powerInputMode">
            <input type="checkbox" name="navigation" class="navigation" id="navigation{{device.id}}" ng-if="device.category === 'Televisions'" ng-click="checkNavigation(device.id)" ng-checked="checked(device.id)">
          </td>
				</tr>
			</tbody>
		</table>


		<button class="btn btn-fw btn-primary" type="button" array="ngModel" clear-array>Clear All</button>
	</div>


	<div class="col-sm-6" ng-hide="disable">
		<p>This list will appear on the remote:</p>
		<ul class="sortable list-group" ng-model="ngModel" ui-sortable>
			<li class="list-group-item" ng-repeat="device in ngModel track by $index">
				{{ device.name | characters: 15}}
				<span ng-if="device.type === 1">Power</span>
				<span ng-if="device.type === 2">Input</span>
				<i class="fa fa-bars pull-right"></i>
			</li>
		</ul>
	</div>
</div>