<c8y-ui-title-set title="vm.connector.name"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#/connectors/"
    label="{{ 'Data connectors' | translate }}"
    icon="c8y-connector-out"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Data broker' | translate }}"
    icon="c8y-data-broker"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div class="col-md-12">
  <c8y-ui-action-bar-set>
    <c8y-realtime-switch state="vm.realtime"></c8y-realtime-switch>
    <a
      href=""
      class="btn btn-link"
      title="{{ 'Refresh alarm list contents' | translate }}"
      ng-click="vm.refresh()"
    >
      <i c8y-icon="refresh" ng-class="{ 'icon-spin': vm.isRefreshing() }"></i>
      <span translate>Reload</span>
    </a>
  </c8y-ui-action-bar-set>

  <div ng-repeat="severity in vm.severities">
    <c8y-alarm-list
      ng-if="vm.options"
      filter="severity.filters"
      realtime="vm.realtime"
      hide-header-actions="true"
      data-title="{text:(severity.name | lowercase | humanize | translate), icon:vm.icon(severity.name), class:(severity.name | lowercase)}"
      refresh-loading="severity.refreshing"
    ></c8y-alarm-list>

    <div class="card" ng-if="!vm.options">
      <div class="card-block">
        <c8y-rectangle-spinner
          class="spinner-inline m-t-4 m-b-4"
          message="'Initializing…' | translate"
        ></c8y-rectangle-spinner>
      </div>
    </div>
  </div>
</div>
