<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">history</span>
        Storico
      </h2>
    </mat-card-header>
    <mat-card-content>
      <div class="div-center">
        <button mat-flat-button (click)="loadCallHistory()" id="my-button">
          Visualizza storico chiamate
        </button>
      </div>
      <div *ngIf="tableVisible()">
        <table mat-table [dataSource]="callHistoryArray()">
          <!-- Contact Column -->
          <ng-container matColumnDef="contact">
            <th mat-header-cell *matHeaderCellDef>Contatto</th>
            <td mat-cell *matCellDef="let element">
              {{ element.callContactName }} {{ element.callContactSurname }}
            </td>
          </ng-container>

          <!-- Type Column -->
          <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef>Tipo</th>
            <td mat-cell *matCellDef="let element">{{ element.type }}</td>
          </ng-container>

          <!-- Phone Column -->
          <ng-container matColumnDef="phone">
            <th mat-header-cell *matHeaderCellDef>Numero</th>
            <td mat-cell *matCellDef="let element">
              {{ element.callContactPhone }}
            </td>
          </ng-container>

          <!-- Duration Colum -->
          <ng-container matColumnDef="duration">
            <th mat-header-cell *matHeaderCellDef>Durata</th>
            <td mat-cell *matCellDef="let element">
              {{ element.duration }} secondi
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </div>
    </mat-card-content>
  </mat-card>
</div>
