<c8y-title>{{ 'Messaging service' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'monitoring'"
    [label]="'Monitoring' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Messaging service' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <li>
    <a
      class="btn btn-link"
      title="{{ 'Reload' | translate }}"
      (click)="reload()"
    >
      <i
        c8yIcon="refresh"
        [ngClass]="{ 'icon-spin': loading }"
      ></i>
      {{ 'Reload' | translate }}
    </a>
  </li>
</c8y-action-bar-item>

<c8y-help src="/docs/standard-tenant/monitoring/#messaging-service"></c8y-help>

<div
  class="interact-grid"
  *ngIf="!loading; else loadingTemplate"
>
  <a
    class="card"
    *ngFor="let namespace of namespacesDetails"
    [routerLink]="['namespace', namespace.id]"
  >
    <app-namespace-item
      [namespaceName]="namespace.id"
      [namespace]="namespace.namespace"
    ></app-namespace-item>
  </a>
</div>

<ng-template #loadingTemplate>
  <c8y-loading></c8y-loading>
</ng-template>