<div id="job-overview">
  <h4 class="bg-primary">Job Overview: {{jobId}}</h4>

  <div class="room" ng-repeat="room in system.rooms track by $index">

    <h4 class="room-detail">{{room.name}}&nbsp;
      <span class="pull-right">
        <a class="link-unstyled" title="Edit {{room.name}}" type="room" room="room" hcm-edit><i class="fa fa-lg fa-fw fa-pencil "></i></a>
        <a class="link-unstyled" ng-if="!containsMaster(room)" title="Delete {{room.name}}" type="room" room="room" hcm-delete> <i class="fa fa-lg fa-fw fa-trash-o "></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">
              {{bstation.type}} / {{bstation.name}}
              <span class="pull-right">
                <a class="link-unstyled" title="Edit {{bstation.name}}" type="bstation" room="room" bstation="bstation" hcm-edit> <i class="fa fa-lg fa-fw fa-pencil "></i></a>

                <a class="link-unstyled" ng-hide="bstation.master || ($first && $last)" title="Delete {{bstation.name}}" type="bstation" room="room" bstation="bstation" hcm-delete><i class="fa fa-lg fa-fw fa-trash-o "></i></a>
              </span>
            </p>

            <p ng-repeat="remote in room.remotes track by remote.id">
              {{remote.name}}
              <span class="pull-right">
                <a class="link-unstyled" title="Delete {{remote.name}}" type="remote" room="room" remote="remote" hcm-delete> <i class="fa fa-lg fa-fw fa-trash-o "></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.brand}} | {{device.model}}</small>
      <span class="pull-right">
        <a  ng-mouseover="popover.device = device; findPunchDevice(room)"
            ng-if="device.punch_vol !== -1"
            data-placement="top"
            data-title="Volume is coming from {{popover.punchName}}"
            data-trigger="hover click" bs-tooltip><i class="fa fa-lg fa-fw fa-volume-up " ></i></a>
        <a class="link-unstyled" title="Edit Favorite Channels" ng-click="showFavModal(room, device)" ng-if="isEntDevice(device.category) && !device.fav_option"><i class="fa fa-fw fa-lg fa-star-o " ></i></a>
        <a class="link-unstyled" title="Edit Favorite Channels" ng-click="showFavModal(room, device)"  ng-if="isEntDevice(device.category) && device.fav_option"><i class="fa fa-fw fa-lg fa-star "></i></a>
        <a class="link-unstyled" title="Edit {{device.name}}" type="device" room="room" device="device" hcm-edit> <i class="fa fa-lg fa-fw fa-pencil "></i></a>
        <a class="link-unstyled" title="Delete {{device.name}}" type="device" room="room" device="device" hcm-delete> <i class="fa fa-lg fa-fw fa-trash-o "></i></a>
      </span>
    </p>
  </div>
</div>
