<div class="room" ng-repeat="room in rooms track by room.id">

    <h4 class="room-detail">
      <span class="ng-scope ng-binding editable editable-click" editable-text="room.name" e-placeholder="Enter room name" onbeforesave="checkName($data)">{{room.name}}</span>
      <span class="pull-right">
        <a ng-hide="$first && $last" title="Delete {{room.name}}" item="room" list="rooms" confirm-delete> <i class="fa fa-lg fa-fw fa-trash-o action-icon"></i></a>
      </span>
    </h4>

    <div class="panel-group" data-animation="" start-collapsed="1" bs-collapse>
      <div class="panel panel-default" >
        <div class="panel-heading" bs-collapse-toggle>
          <h6 class="panel-title">
            <i class="fa fa-plus"></i>&nbsp;&nbsp;Show controllers for {{room.name}}
          </h6>
        </div>
        <div class="panel-collapse" bs-collapse-target>
          <div class="panel-body">
            <p ng-repeat="bstation in room.bstations track by bstation.id">

              <span class="ng-scope ng-binding editable editable-click" editable-text="bstation.name" e-placeholder="Enter controller name" onbeforesave="checkName($data)">{{bstation.name}}</span> &nbsp;&nbsp;
              <span class="text-muted">Model: </span> 
              <select class="ng-pristine ng-valid" name="controllerType" id="" ng-model="bstation.type" ng-options="modelName for modelName in modelTypes"></select>
            

              <span class="pull-right">
                <a ng-hide="bstation.master || ($first && $last)" title="Delete {{bstation.name}}" item="bstation" list="room.bstations" confirm-delete> 
                  <i class="fa fa-lg fa-fw fa-trash-o action-icon"></i></a>
              </span>
            </p>

            <!-- <p ng-repeat="remote in room.remotes track by remote.id">
              {{remote.name}} <span class="text-muted">({{remote.mac | remoteId}})</span>
              <span class="pull-right">
                <a title="Delete {{remote.name}}" ng-click="showRemoteModal('delete', room, remote)" > <i class="fa fa-lg fa-fw fa-trash-o action-icon"></i></a>
              </span>
            </p> -->
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted" ng-if="!room.devices.length">You currently have no devices in this room.</p>

    <p ng-repeat="device in room.devices track by device.id">

      <!-- <a data-trigger="click" data-placement="top-left" data-type="info" data-html="1" data-title="<strong>Brand: </strong> {{device.brand}}<br><strong>Model:</strong> {{device.model}}" bs-tooltip>{{device.name}} </a> -->
      {{device.name}} <small class="text-muted">{{device.db.brand}} | {{device.db.model.name}}</small>
      <span class="pull-right">
        <a ng-if="device.attr.punch !== -1"><i class="fa fa-lg fa-fw fa-volume-up action-icon" ></i></a>

        <a title="Edit Favorite Channels" ng-if="isEntDevice(device.db.type) && !device.attr.fav" ng-model="device.attr.fav" data-true-value="1" data-false-value="0" bs-checkbox><i class="fa fa-fw fa-lg fa-star-o action-icon" ></i></a>

        <a title="Edit Favorite Channels"  ng-if="isEntDevice(device.db.type) && device.attr.fav" ng-model="device.attr.fav" data-true-value="1" data-false-value="0" bs-checkbox><i class="fa fa-fw fa-lg fa-star action-icon"></i></a>

        <a title="Edit {{device.name}}" ng-click="showDeviceModal('edit', room, device)"> <i class="fa fa-lg fa-fw fa-pencil action-icon"></i></a>
        <a title="Delete {{device.name}}" item="device" list="room.devices" confirm-delete> <i class="fa fa-lg fa-fw fa-trash-o action-icon"></i></a>
      </span>
    </p>
  </div>

