@if(contactService.isContactDetailsView || contactService.isContactNewView) {
<app-contact-details></app-contact-details>
} @else {
<div class="console-app__contacts-controls">
  <button
    mat-flat-button
    color="primary"
    (click)="openNewContact()"
    aria-label="Add new contact"
  >
    <mat-icon>add</mat-icon>
    Add new contact
  </button>
</div>
<div class="console-app__contacts">
  @if (contactService.contacts().length === 0) {
  <div class="console-app__empty-contacts">
    <mat-icon class="console-app__empty-contacts-icon secondary-text"
      >apps_outage</mat-icon
    >
    <h1>No contacts found</h1>
  </div>
  } @else {
  <mat-table [dataSource]="dataSource" class="mat-elevation-z0">
    @for (column of columns; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
      <mat-cell *matCellDef="let row">
        @if (column.columnDef === 'name') {
        <div class="contact__name-column">
          <div class="contact__name-column-title">{{ row.name }}</div>
          <div class="contact__name-column-roles">
            {{ row.userFriendlyTypes.join(" • ") }}
          </div>
        </div>
        } @else {
        {{ column.cell(row) }}
        }
      </mat-cell>
    </ng-container>
    }
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row
      *matRowDef="let row; columns: displayedColumns"
      tabindex="0"
      (click)="openDetails(row)"
      (keyup.enter)="openDetails(row)"
    ></mat-row>
  </mat-table>
  }
</div>
}