<div class="container-fluid">

  <div class="row" style="margin-top:2vh">
    <div class="col-xs-12 col-md-3">
      <label for="refreshCombo" class="label label-info" translate>jvmMemory.REFRESH_RATE_LABEL</label>
      <select name="refreshCombo" class="combobox form-control" ng-model="$ctrl.refreshRate">
        <option value="-1" translate>jvmMemory.refresh.DISABLED</option>
        <option value="1000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 1 }" translate-interpolation="messageformat"></option>
        <option value="2000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 2, DEFAULT: true }" translate-interpolation="messageformat"></option>
        <option value="5000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 5 }" translate-interpolation="messageformat"></option>
        <option value="10000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 10 }" translate-interpolation="messageformat"></option>
        <option value="30000" translate="jvmMemory.refresh.SECONDS" translate-values="{ SECONDS: 30 }" translate-interpolation="messageformat"></option>
      </select>
    </div>
  </div>

  <div class="row row-cards-pf">
    <div class="container-fluid container-cards-pf">

      <div class="col">
        <div class="card-pf card-pf-view">
          <div class="card-pf-heading">
            <label class="card-pf-title" translate>jvmMemory.METASPACE</label>
            <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-metaspace" get-fn="$ctrl.multichartMetaspace()"></mc-add>
          </div>
          <div class="card-pf-body">
            <pf-line-chart
               id="metaspaceLineChart"
               config="$ctrl.metaspaceLineConfig"
               chart-data="$ctrl.metaspaceSeriesData"
               ></pf-line-chart>
            <pf-utilization-bar-chart
               id="metaspaceBarChart"
               layout="{type: 'inline'}"
               units="$ctrl.metaspaceBarConfig.units"
               chart-data="$ctrl.metaspaceSnapshotData"></pf-utilization-bar-chart>
          </div>
        </div>
      </div>

    </div>

  </div>

  <div class="row row-cards-pf">
    <div class="container-fluid container-cards-pf">

        <div ng-repeat="(index, generation) in $ctrl.generationSnapshotData" class="col">
          <div class="card-pf card-pf-view">
            <div class="card-pf-heading">
              <label class="card-pf-title" translate="jvmMemory.COLLECTOR" translate-values="{ name: generation.name, collector: generation.collector }"></label>
            </div>
            <div ng-repeat="space in generation.spaces">
              <div class="card-pf-body">
                 <mc-add
                    class="pull-right"
                    svc-name="{{$ctrl.jvmId}}-{{$ctrl.sanitize(generation.name)}}-space{{space.index}}"
                    get-fn="$ctrl.multichartSpace(index, space.index)"></mc-add>
                 <pf-line-chart
                    id="line-gen-{{generation.index}}-space-{{space.index}}"
                    config="$ctrl.getLineConfig(generation.index, space.index)"
                    chart-data="$ctrl.generationSeriesData[generation.index + ':' + space.index]"
                   ></pf-line-chart>
                 <pf-utilization-bar-chart
                    id="{{generation.index}}:{{space.index}}"
                    chart-title="$ctrl.spaceBarConfigs[generation.index + ':' + space.index].title"
                    layout="{type: 'inline'}"
                    units="$ctrl.spaceBarConfigs[generation.index + ':' + space.index].units"
                    chart-data="space"></pf-utilization-bar-chart>
                  <hr ng-if="!$last" />
              </div>
            </div>
          </div>
        </div>

    </div>

  </div>
</div>