<div class="row panel panel-default" style="position: sticky; top: 60px; z-index: 1">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-top: 0px; margin-bottom: 0px;">
      <li><a ui-sref="jvmList({ '#': $ctrl.systemId })" translate>systemInfo.JVM_LIST_BREADCRUMB</a></li>
      <li><a ui-sref="systemInfo({ systemId: $ctrl.systemId })">{{$ctrl.systemInfo.hostname || $ctrl.systemId}}</a></li>
    </ol>
  </div>
</div>
<div class="container-fluid container-cards-pf">
  <customizable-error-message ng-show="$ctrl.showErr" dismissible="true" err-message="errMessage" err-title="errTitle"></customizable-error-message>

  <div ng-show="!$ctrl.showErr">
    <div class="row">
      <div class="col-xs-12 col-lg-12">
        <div class="panel-group" id="accordion-markup">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" translate>systemInfo.infoTable.HEADER</a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <table class="table table-fixed table-striped table-bordered">
                <thead>
                  <tr>
                    <th translate>systemInfo.infoTable.KEY_COLUMN_LABEL</th>
                    <th translate>systemInfo.infoTable.VALUE_COLUMN_LABEL</th>
                  </tr>
                </thead>
                <tbody class="break-word-wrap">
                  <tr>
                    <td translate>systemInfo.infoTable.HOSTNAME</td>
                    <td>{{$ctrl.systemInfo.hostname}}</td>
                  </tr>
                  <tr>
                    <td translate>systemInfo.infoTable.OS</td>
                    <td>{{$ctrl.systemInfo.osName}}</td>
                  </tr>
                  <tr>
                    <td translate>systemInfo.infoTable.KERNEL</td>
                    <td>{{$ctrl.systemInfo.osKernel}}</td>
                  </tr>
                  <tr>
                    <td translate>systemInfo.infoTable.CPU</td>
                    <td translate="systemInfo.infoTable.CPU_MODEL_FMT" translate-values="{ model: $ctrl.systemInfo.cpuModel, coreCount: $ctrl.systemInfo.cpuCount }"></td>
                  </tr>
                  <tr>
                    <td translate>systemInfo.infoTable.MEMORY</td>
                    <td>{{$ctrl.systemInfo.totalMemory | formatBytes}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" translate>systemInfo.networkTable.HEADER</a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <system-network system-id="$ctrl.systemId"></system-network>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row row-cards-pf">
      <div class="container container-cards-pf">
        <system-cpu system-id="$ctrl.systemId"></system-cpu>
        <system-memory system-id="$ctrl.systemId"></system-memory>
      </div>
    </div>

  </div>
</div>
<!-- /container -->