<a [routerLink]="[interview.id, facCritId]">
  <ng-container [ngSwitch]="interview.status">
    <div
      nbPopoverPlacement="left"
      nbPopover="In Bearbeitung"
      nbPopoverTrigger="hint"
      *ngSwitchCase="interviewStatuses.Active"
      class="banner-status banner-status-in-action"
      data-cy="interview-status"
    ></div>
    <div
      nbPopoverPlacement="left"
      nbPopover="Abgeschlossen"
      nbPopoverTrigger="hint"
      *ngSwitchCase="interviewStatuses.Finished"
      class="banner-status banner-status-is-finished"
      data-cy="interview-status"
    ></div>
  </ng-container>
  <nb-card-header>
    <div class="subtitle-2" data-cy="interview-contact-persons">
      <ng-container *ngIf="interview.contactPersons && interview.contactPersons.length > 0; else noContactPerson">
        <span> {{ interview.contactPersons[0].forename + ' ' + interview.contactPersons[0].surname + ' | ' }} </span>
        <span> {{ interview.contactPersons[0].role }} </span>
        <span *ngIf="interview.contactPersons.length > 1"> (+)</span>
      </ng-container>
      <ng-template #noContactPerson>
        <span class="text-danger">Keine Kontaktperson gewählt</span>
      </ng-template>
      <span class="label" *ngIf="interview.startDate" data-cy="interview-timestamp"> &nbsp;{{ interview.startDate | date: 'dd.MM.yyyy' }} </span>
    </div>
    <br />
  </nb-card-header>
</a>

./interview-card.component.scss

@import '../../../../../sass/utils';
@import '../../../../../../node_modules/@nebular/theme/styles/theming';
@import '../../../../../../node_modules/@nebular/theme/styles/themes/default';

.banner-status {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 12px;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(44, 51, 73, 0.1);
  -moz-box-shadow: 3px 3px 3px 0px rgba(44, 51, 73, 0.1);
  box-shadow: 3px 3px 3px 0px rgba(44, 51, 73, 0.1);
  border-radius: 3px;
}

.banner-status-is-planned {
  background-color: nb-theme(color-basic-100);
}

.banner-status-in-action {
  background-color: nb-theme(color-warning-default);
}

.banner-status-is-finished {
  background-color: nb-theme(color-success-default);
}

.banner-status-is-canceled {
  background-color: nb-theme(color-danger-default);
}

nb-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 10px;
  border: none;
}

a {
  display: grid;
  text-decoration: none;
}