<div class="row-fluid mq-page" ng-controller="Fabric.FabricBrokersController">

  <div class="span12 page-padded">
    <div class="section-header">

      <div class="section-filter">
        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
        <i class="icon-remove clickable" title="Clear filter" ng-click="searchFilter = ''"></i>
      </div>

      <div class="section-controls">
        <a ng-href="#/fabric/mq/brokers{{hash}}" title="View the broker and container diagram">
          <i class="icon-plus"></i> Diagram
        </a>
        <a href="" title="Create a new broker configuration" ng-click="createBroker(null)">
          <i class="icon-plus"></i> Broker
        </a>
        <a href="" title="Create a new container" ng-click="createContainer()">
          <i class="icon-plus"></i> Container
        </a>
      </div>

    </div>
  </div>


  <div class="mq-networks ex-node-container" hawtio-jsplumb>

    <div class="mq-network-group-rectangle" ng-repeat="group in groups" ng-show="groupMatchesFilter(group)"
         title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">

      <div class="jsplumb-node mq-network-group-rectangle-label"
           anchors="AutoDefault" id="{{group.id}}">
        <span class="mq-group-name" title="Group: {{group.id}}">
          <i class="icon-group"></i> {{group.id}}
        </span>
        <a ng-click="createBroker(group)" title="Create a new broker configuration in this group">
          <i class="icon-plus"></i>
        </a>
      </div>

      <div class="mq-network-profile-rectangle" ng-repeat="profile in group.profiles"
           title="profile: {{profile.id}} version: {{ profile.version}}" ng-show="profileMatchesFilter(profile)">

        <div class="mq-network-broker-rectangle" ng-repeat="broker in profile.brokers"
             ng-show="brokerMatchesFilter(broker)"
             title="Logical broker inside this profile">

          <div class="mq-network-broker-rectangle-label jsplumb-node"
               id="broker-{{broker.id}}"
               anchors="AutoDefault"
               connect-to="{{broker.connectTo}}">
                  <span class="title mq-broker-icon">
                    <img title="Apache ActiveMQ" src="img/icons/messagebroker.svg">
                  </span>
                  <span class="title mq-broker-name">
                    <a href="" ng-click="showBroker(broker)">{{broker.id}}</a>
                  </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>

</div>


