<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 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>
        <a ng-href="#/fabric/mq/{{selectedVersion.id}}/brokerDiagram{{hash}}" title="View the network diagram of the brokers and their clients" ng-show="groups.length">
          <i class="icon-picture"></i> Diagram
        </a>
      </div>

      <div class="profile-selection-controls">
        <div fabric-version-selector='selectedVersion'></div>
      </div>

    </div>
  </div>

  <div class="hero-unit" ng-show="groups.length < 1">
    <p>There are no brokers configured in this Fabric.</p>

    <button class="btn btn-primary btn-large" ng-click="createBroker(null)">Create broker configuration</button>
  </div>

  <div class="mq-groups">

    <div class="mq-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="mq-group-rectangle-label">
        <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-profiles" hawtio-horizontal-viewport adjust-parent="true">
        <div class="mq-profile-canvas">
          <div class="mq-profile-rectangle" ng-repeat="profile in group.profiles"
               title="profile: {{profile.id}} version: {{ profile.version}}" ng-show="profileMatchesFilter(profile)">

            <div class="mq-profile-rectangle-label">
              <span class="mq-profile-name">
                <i class="icon-book green"></i>
                <a href="" ng-click="showProfile(profile)">{{profile.id}}</a>
                <a href="" ng-click="createRequiredContainers(profile)" title="{{profile.requiredToolTip}}">
                  <span class="badge {{profile.requireStyle}}">{{profile.count}}</span>
                </a>
              </span>
              <a class="mq-profile-create-broker" href="" ng-click="createBroker(group, profile)" title="Create a new broker configuration in this group and profile">
                <i class="icon-plus"></i>
              </a>
            </div>

            <div class="mq-broker-area">

              <div class="mq-broker-rectangle" ng-repeat="broker in profile.brokers"
                   ng-style="brokerMatchesFilter(broker) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"
                   title="Logical broker inside this profile">

                <div class="mq-broker-rectangle-label">
                  <span class="title mq-broker-icon">
                    <img title="Apache ActiveMQ" src="img/icons/messagebroker.svg" height="45" width="45" style="width: 45px; height: 45px">
                  </span>
                  <span class="title mq-broker-name">
                    <a href="" ng-click="showBroker(broker)">{{broker.id}}</a>
                  </span>
                </div>

                <div ng-hide="broker.containers.length" class="mq-container-row">
                  <div class="mq-container-rectangle" title="No containers, click to create some" ng-click="createRequiredContainers(profile)">
                    <div class="mq-container-rectangle-label">
                      <i class="icon-warning-sign red"></i>
                    </div>
                  </div>
                </div>

                <div ng-show="broker.containers.length" class="mq-container-row">
                  <div class="mq-container-rectangle" ng-class="{master : container.master}"
                       ng-repeat="container in broker.containers"
                       ng-show="containerMatchesFilter(container)"
                       title="Container: {{container.id}}{{container.masterTooltip}}">

                    <div class="mq-container-rectangle-label" ng-class="{master : container.master}">
                      <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="showContainer(container)" title="Container: {{container.id}}"></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="canConnect(container)"
                         title="Connect to the Broker inside Container: {{container.id}}"
                         ng-click="connectToBroker(container, broker)"></i>

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

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

</div>


