<section class="cluster-list">
  <section *ngIf="isLoading" fxLayout="row" fxLayoutAlign="center center">
    <mat-spinner>
      Loading all clusters ...
    </mat-spinner>
  </section>
  <mat-nav-list *ngIf="!isLoading && !errorMessage">
    <button mat-button routerLink="/">
      <mat-icon>arrow_back</mat-icon> Back to Index
    </button>
    <button mat-mini-fab *ngIf="can" (click)="createCluster()">
      <mat-icon>add</mat-icon>
    </button>
    <h3 mat-subheader>Clusters in {{ service }} ({{ clusters.length }})</h3>
    <a *ngFor="let cluster of clusters"
      mat-list-item
      [routerLink]="[cluster.name]"
      routerLinkActive="cluster-list-item-selected">
      <mat-icon mat-list-icon>blur_circular</mat-icon>
      <h4 mat-line>{{ cluster.name }}</h4>
    </a>
    <div *ngIf="clusters.length == 0" class="empty">
      There's no cluster here.
      <a mat-button *ngIf="can" (click)="createCluster()">Create one?</a>
    </div>
  </mat-nav-list>
  <section class="error-message" *ngIf="errorMessage">
    {{ errorMessage }}
  </section>
</section>
