<div class="row">
  <div class="col-sm-10">
    <h1>XOS Monitoring Statistics</h1>
  </div>
  <div class="col-xs-2 text-right">
    <a href="" class="btn btn-default" 
      ng-show="vm.selectedSlice && !vm.showStats"
      ng-click="vm.showStats = true">
      <i class="glyphicon glyphicon-transfer"></i>
    </a>
    <a href="" class="btn btn-default" 
      ng-show="vm.selectedSlice && vm.showStats"
      ng-click="vm.showStats = false">
      <i class="glyphicon glyphicon-transfer"></i>
    </a>
  </div>
</div>

<div class="row" ng-show="vm.loader">
  <div class="col-xs-12">
    <div class="loader">Loading</div>
  </div>
</div>

<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">
  <div class="row">
    <div class="col-sm-3 service-list">
        <h3>XOS Service: </h3>
        <uib-accordion close-others="true" template-url="templates/accordion.html">
          <uib-accordion-group
            ng-repeat="service in vm.services | orderBy:'-service'"
            template-url="templates/accordion-group.html"
            is-open="vm.accordion.open[service.service]"
            heading="{{service.service}}">
            <h4>Slices:</h4>
            <a ng-repeat="slice in service.slices" 
              ng-class="{active: slice.slice === vm.selectedSlice}"
              ng-click="vm.loadSliceMeter(slice, service.service)"
              href="#" class="list-group-item" >
              {{slice.slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
            </a>
          </uib-accordion-group>
        </uib-accordion>
    </div>
    <section class="side-container col-sm-9">
      <div class="row">
        <!-- STATS -->
        <article ng-hide="!vm.showStats" class="stats animate-slide-left">
          <div class="col-xs-12">
            <div class="list-group">
              <div class="list-group-item">
                <h3>Stats</h3>
              </div>
              <div class="list-group-item">
                <ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice" tenant="vm.selectedTenant"></ceilometer-stats>
              </div>
            </div>
          </div>
        </article>
        <!-- METERS -->
        <article ng-hide="vm.showStats" class="meters animate-slide-left">
          <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedSlice">
            <div class="list-group">
              <div class="list-group-item">
                <h3>Resources</h3>
              </div>
              <a href="#" 
                ng-click="vm.selectMeters(meters, resource)" 
                class="list-group-item" 
                ng-repeat="(resource, meters) in vm.selectedResources" 
                ng-class="{active: resource === vm.selectedResource}">
                {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
              </a>
            </div>
          </div>
          <div class="col-sm-8 animate-slide-left" ng-hide="!vm.selectedMeters">
            <div class="list-group">
              <div class="list-group-item">
                <h3>Meters</h3>
              </div>
              <div class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">
                    <label>Name:</label>
                  </div>
                  <div class="col-xs-3">
                    <label>Unit:</label>
                  </div>
                  <div class="col-xs-3"></div>
                </div>
                <div class="row" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
                  <div class="col-xs-6">
                    {{meter.name}}
                  </div>
                  <div class="col-xs-3">
                    {{meter.unit}}
                  </div>
                  <div class="col-xs-3">
                    <a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">
                      <i class="glyphicon glyphicon-search"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>
  </div>
</section>
<section ng-if="!vm.loader && vm.error">
  <div class="alert alert-danger">
    {{vm.error}}
  </div>
</section>