<div id="addresses" ng-controller="ViewCtrl" class="row example-container">
  <div class="row card-pf col-md-12" style="height: 15px;"></div>
  <div class="row col-md-12">

    <div class="alert alert-danger alert-dismissable" ng-show="notification.show_alert" style="margin-top: 5px;">
      <button type="button" class="close" ng-click="removeNotification()">
        <span class="pficon pficon-close"></span>
      </button>
      <span class="pficon pficon-error-circle-o"></span> 
        <strong>Error:</strong> {{notification.alert_msg}}
    </div>
    <div pf-toolbar id="exampleToolbar" config="toolbarConfig">
      <actions>
        <button class="btn btn-default primary-action" type="button" ng-disabled=admin_disabled ng-controller="WizardModalController" ng-click="openWizardModel()">
          <span class="fa fa-plus"></span> Create
        </button>
        <button class="btn btn-default primary-action" ng-disabled=admin_disabled type="button" ng-click="delete_address()">
          Delete
        </button>
      </actions>
    </div>
  </div>

  <div class="col-md-12 list-view-container">
    <div pf-list-view id="exampleListView"
         items="items" config="listConfig">
      <div class="list-view-pf-description">
        <div class="list-view-pf-left">
          <span  data-toggle="tooltip" title="{{item.status.phase}}">
            <span class="fa fa-spinner fa-spin" ng-if="(!item.status.isReady || (item.status.isReady && item.status.phase !== 'Active')) && item.status.phase !== 'Fail'"></span>
            <span class="fa pficon-ok" ng-if="item.status.isReady && item.status.phase === 'Active'"></span>
            <span class="fa pficon-error-circle-o" ng-if="item.status.phase === 'Fail'"></span>
          </span>
        </div>
        <div class="list-group-item-heading">
          {{item.address}}
        </div>
        <div class="list-group-item-text">
          {{item.type}} &nbsp &nbsp
          {{$parent.$parent.get_plan_display_name(item.type, item.plan)}}
          <span ng-if="item.status.message">
            &nbsp &nbsp
            <span class="fa pficon-warning-triangle-o"></span>
            {{item.status.message}}
          </span>
        </div>
      </div>
      <div class="list-view-pf-additional-info">
        <div class="list-view-pf-additional-info-item-stacked">
          <div class="list-view-pf-additional-info-item" title="Messages sent to this address in last 5 minutes">
            <span class="fa fa-sign-in"></span>
            <strong>{{item.messages_in_delta}}</strong>  Messages In
          </div>
          <div class="list-view-pf-additional-info-item" title="Messages sent from this address in last 5 minutes">
            <span class="fa fa-sign-out"></span>
            <strong>{{item.messages_out_delta}}</strong>  Messages Out
          </div>
          <div class="legend-pf-text">
            <em>(values over the last 5 minutes)</em>
          </div>
        </div>
        <div class="list-view-pf-additional-info-item" ng-if="item.type !== 'subscription'">
          <span class="fa pficon-import"></span> <strong>{{item.senders}}</strong> Senders
        </div>
        <div class="list-view-pf-additional-info-item" ng-if="item.type !== 'subscription'">
          <span class="fa pficon-export"></span><strong>{{item.receivers}}</strong> Receivers
        </div>
        <div class="list-view-pf-additional-info-item" ng-if="item.type === 'subscription'">
          <span class="fa pficon-export"></span><strong>{{item.shards[0].consumers}}</strong> Receivers
        </div>
        <div class="list-view-pf-additional-info-item"  ng-if="item.type === 'queue' || item.type === 'topic' || item.type === 'subscription'">
          <span class="fa fa-envelope-o"></span><strong>{{item.depth}}</strong> Stored
        </div>
        <div class="list-view-pf-additional-info-item"  ng-if="item.type === 'queue' || item.type === 'topic'">
          <span class="fa fa-database"></span><strong>{{item.shards.length}}</strong> Shards
        </div>
      </div>
      <list-expanded-content>
        <div class="row" ng-if="$parent.item.type === 'queue' || $parent.item.type === 'topic'">
          <div class="col-md-2" ng-if="$parent.item.type === 'topic'">
            <div pf-c3-chart id="{{'subscribers-' + $parent.$parent.item.address}}" config="get_subscribers_chart_config($parent.$parent.item)"></div>
          </div>
          <div class="col-md-2">
            <div pf-c3-chart id="{{$parent.$parent.item.address}}" config="get_stored_chart_config($parent.$parent.item)"></div>
            <!-- div style="text-align: center; width: 220px;"><strong>{{$parent.$parent.item.depth}}</strong> Messages Stored</div -->
          </div>
          <div class="col-md-4">
            <div pf-sparkline-chart config="$parent.$parent.item.depth_series_config" chart-data="$parent.$parent.item.depth_series" chart-height="115" show-x-axis="false" show-y-axis="false"></div>
          </div>
        </div>
        <div class="row" ng-if="$parent.item.senders + $parent.item.receivers > 0 && get_address_space_type() !== 'brokered'">
          <div class="col-md-4">
            <span>Senders</span>
            <div ui-grid="$parent.$parent.item.ingress_outcomes_link_table" class="link-grid" ui-grid-auto-resize ui-grid-resize-columns ng-style="getTableHeight($parent.$parent.item, 'ingress')"></div>
          </div>
          <div class="col-md-4">
            <span>Receivers</span>
            <div ui-grid="$parent.$parent.item.egress_outcomes_link_table" class="link-grid" ui-grid-auto-resize ui-grid-resize-columns ng-style="getTableHeight($parent.$parent.item, 'egress')"></div>
          </div>
        </div>
      </list-expanded-content>
    </div>
  </div>
</div>

<script type="text/ng-template" id="link-grid-row.html">
  <div uib-tooltip-html="grid.appScope.linkTooltip(row.entity)" tooltip-append-to-body="true" tooltip-placement="auto top" tooltip-class="link-tip"
       ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
       ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
       class="ui-grid-cell"
       ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
       role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
       ui-grid-cell>
  </div>
</script>
