<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" >
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">Job Request Data</h4>
      </div>
      <div class="modal-body">
        <div id="job-overview">
          <div class="room" ng-repeat="room in job.rooms track by $index">

            <h4 class="room-detail">{{room.name}}</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 $index">
                      {{bstation.type}} / {{bstation.name}}
                    </p>

                    <p ng-repeat="remote in room.remotes track by $index">
                      {{remote.name}}
                    </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 $index">
              {{device.name}} <small class="text-muted">{{device.db.brand}} | {{device.db.model.name}} &nbsp;|&nbsp; </small>
              <span ng-if="device.target.type == 1" class="device-type-text">IR (<span ng-if="device.target.port == 255">BK</span><span ng-if="device.target.port == 0">FR</span>)</span>
              <span ng-if="device.target.type != 1" class="device-type-text">IP</span>
              <span class="pull-right">
                <a  ng-mouseover="popover.device = device; findPunchDevice(room.devices, device.attr.punch)"
                    ng-if="device.attr.punch !== -1"
                    data-placement="top"
                    data-container="body"
                    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" ng-if="!device.attr.fav"><i class="fa fa-fw fa-lg fa-star-o " ></i></a>
                <a class="link-unstyled" ng-if="device.attr.fav"><i class="fa fa-fw fa-lg fa-star " ></i></a>
                <strong ng-click="showActivities(room, device); $hide()" class="cursor-pointer device-type-text">A</strong>
              </span>
            </p>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="$hide()">Close</button>
      </div>
    </div>
  </div>
</div>






