<button
  type="button"
  class="c8y-step"
  [ngClass]="{
    active: selected,
    'step-done': state === 'done' || state === '_done',
    'step-error': state === 'error',
    'step-warning': state === 'warning'
  }"
  [disabled]="disabled"
  [ngSwitch]="!!(iconOverrides && iconOverrides[state])"
  (click)="stepSelected()"
>
  <ng-container *ngSwitchCase="true" [ngTemplateOutlet]="iconOverrides[state]"></ng-container>
  <ng-container *ngSwitchDefault [ngSwitch]="state">
    <span *ngSwitchCase="'edit'">
      <span [c8yIcon]="'edit'"></span>
    </span>
    <span *ngSwitchCase="'done'">
      <span class="m-t-4" [c8yIcon]="'check'"></span>
    </span>
    <span *ngSwitchCase="'error'">
      <span class="m-t-4" [c8yIcon]="'exclamation'"></span>
    </span>
    <span *ngSwitchDefault>{{ index + 1 }}</span>
  </ng-container>
</button>