<div id="system-overview">
  <h4 class="bg-primary">{{!virtualEditor ? system.name : ''}} Overview

    <a class="pull-right link-default link-unstyled" title="Edit {{system.name}}" type="system" system="system" hcm-edit> <i class="fa fa-lg fa-pencil "></i></a>
  </h4>

  <div class="room" ng-repeat="room in system.rooms track by $index" ng-init="outerIndex = $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) && !virtualEditor" 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.name}} 
              <span class="text-muted">({{bstation.mac | macAddress}})</span>
              <i class="fa fa-fw fa-key gold" ng-if="bstation.master" 
                  data-placement="top"
                  data-title="{{bstation.name}} is the primary controller."
                  data-trigger="hover click" bs-tooltip></i>

              <hardware-info ng-if="!virtualEditor" class="link-unstyled" device="bstation"></hardware-info>
              (Base Station)
              <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="text-muted">({{remote.mac | remoteId}})</span>
              <hardware-info device="remote"></hardware-info>
              (Remote Control)
              <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 class="overview-schedule-event">
      <h6>Advanced devices</h6>
    </div>

    <p ng-if="!room.twoway_devices.length">No devices are programmed</p>
    <p ng-repeat="twoway_device in room.twoway_devices track by twoway_device.id">
      {{twoway_device.name}}
      <span class="pull-right">
        <a  ng-mouseover="popover.twowayDevice = twoway_device; findPunchTwowayDevice(room)"
            ng-if="twoway_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 {{twoway_device.name}}" type="twoway_device" room="room" device="twoway_device" ttype="twoway_device.target_type" hcm-edit> <i class="fa fa-lg fa-fw fa-pencil "></i></a>
        <a class="link-unstyled" title="Delete {{device.name}}" type="twoway_device" room="room" device="twoway_device" hcm-delete> <i class="fa fa-lg fa-fw fa-trash-o "></i></a>
      </span>
    </p>

    <!-- display master room's TRF-ZW1 in slave room -->
    <p ng-repeat="twoway_device in system.rooms[0].twoway_devices track by twoway_device.id" ng-if="room != system.rooms[0] && twoway_device.model === 'TRF-ZW1' && twoway_device.extra_info.punch[outerIndex].from != '' && twoway_device.extra_info.punch[outerIndex].from != -1">
      {{twoway_device.name}}
      <span class="pull-right">
        <a  ng-mouseover="popover.twowayDevice = twoway_device; findPunchTwowayDevice(room)"
            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>
      </span>
    </p>

    <div class="overview-schedule-event">
      <h6>Scheduled Entertainment events</h6>
    </div>

    <p ng-if="!room.scheEvent.length">No events are programmed</p>
    <p ng-repeat="event in room.scheEvent">
      {{event.display_text}}
      <span class="pull-right">
        <span>
          {{event.default_state ? 'On' : 'Off'}} <input type="checkbox" class="js-switch small" ng-model="event.default_state" ng-change="changeEventState(system.id, room.id, event.id, event.default_state)" ui-switch checked />
        </span>
        <a class="link-unstyled" title="Edit {{event.display_text}}" ng-click="eventEdit(room, event)"> <i class="fa fa-lg fa-fw fa-pencil "></i></a>
        <a class="link-unstyled" title="Delete {{event.display_text}}" system="system" room="room" event="event" event-delete> <i class="fa fa-lg fa-fw fa-trash-o "></i></a>
      </span>
    </p>
  </div>
</div>
