<div ng-controller="Fabric.FabricBrokersController">
  <div>
    <div class="mq-titles section-header">
      <div class="mq-filter">
        <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>

      <div class="section-controls">
        <a href="" title="Create a new container" ng-click="createContainer()">
          <i class="icon-plus"></i> Create Container
        </a>
        <a href="" ng-click="editRequirements.dialogOpen(null)"
           title="Configure the minimum number of required instances for each profile. If you are on OpenShift or using an Auto Scaler they are then created automatically; otherwise click on the count button to manually provision required containers">
          <i class="icon-resize-vertical"></i>
          Scale
        </a>
      </div>
    </div>
    <div class="mq-group-list" ng-repeat="group in groups" ng-show="groupMatchesFilter(group)">
      <div class="expandable" model="group">
        <div class="mq-group-row"
             title="A group of message brokers; used by messaging clients to connect to one of a cluster of message brokers">
          <span class="title mq-group-expander">
            <i class="expandable-indicator" ng-show="group.profiles.length"></i>
          </span>
          <span class="title mq-group-icon">
            <i class="icon-group"></i>
          </span>
          <span class="title mq-group-name">
            {{group.id}}
          </span>
        </div>
        <div class="expandable-body">
          <div class="mq-profile-list" ng-repeat="profile in group.profiles"
               ng-show="profileMatchesFilter(profile)">
            <div class="expandable" model="profile">
              <div class="mq-profile-row" title="Profile for running one or more logical brokers">
                  <span class="title mq-profile-expander">
                    <i class="expandable-indicator" ng-show="profile.brokers.length"></i>
                  </span>
                  <span class="title mq-profile-icon">
                    <i class="icon-book"></i>
                  </span>
                  <span class="title mq-profile-name">
                    <a href="" ng-click="showProfile(profile)">{{profile.id}}</a> / {{profile.version}}
                  </span>
              </div>
              <div class="expandable-body">
                <div class="mq-broker-list" ng-repeat="broker in profile.brokers"
                     ng-show="brokerMatchesFilter(broker)">
                  <div class="expandable" model="broker">
                    <div class="mq-broker-row" title="Logical broker inside this profile">
                        <span class="title mq-broker-expander">
                          <i class="expandable-indicator" ng-show="broker.containers.length"></i>
                        </span>
                        <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 class="expandable-body">
                      <ul>
                        <li class="no-list" ng-repeat="container in broker.containers"
                            ng-show="containerMatchesFilter(container)">
                          <div class="mq-container-row"
                               title="A container (JVM) which implements one or more logical brokers within this profile">
                            <i ng-show="!container.selected && showSelect" class="icon-circle-blank clickable"
                               title="Not selected"
                               ng-click="container.selected = true"></i>
                            <i ng-show="container.selected && showSelect" class="icon-circle clickable"
                               title="Status of the container" ng-click="container.selected = false"></i>

                            <i class="clickable" title="{{getStatusTitle(container)}}"
                               ng-class='statusIcon(container)'
                               ng-click="container.selected = !container.selected"></i>

                            <span ng-click="container.selected = !container.selected">
                              <a ng-click="showContainer(container)">{{container.id}}</a> /
                              {{container.version}}
                            </span>

                            <i class="icon-cloud clickable" title="Ensemble member"
                               ng-click="showContainer(container)"
                               ng-show="isEnsembleContainer(container.id)"></i>

                            <i class="icon-plus clickable" ng-show="container.root && container.alive"
                               title="Create a new child container"
                               ng-click="createChildContainer(container)"></i>

                            <i class="icon-signin clickable" ng-show="container.jolokiaUrl && container.alive"
                               title="Open a new window and connect to this broker"
                               ng-click="doConnect(container)"></i>

                            <i class="icon-star mq-master" title="Master broker" ng-show="container.master"></i>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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