<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">search</span>
        Ricerca
      </h2>
    </mat-card-header>
    <mat-card-content>
      <div class="div-center">
        <mat-form-field>
          <mat-label>Cerca contatto o numero</mat-label>
          <input matInput [formControl]="searchInput" />
        </mat-form-field>
      </div>

      <div *ngIf="searchArray().length > 0">
        <table mat-table [dataSource]="searchArray()">
          <!-- Contact Column -->
          <ng-container matColumnDef="contact">
            <th mat-header-cell *matHeaderCellDef>Contatto</th>
            <td mat-cell *matCellDef="let element">
              {{ element.contact }}
            </td>
          </ng-container>

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

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

      <div *ngIf="searchArray().length === 0">
        <p>Nessun risultato trovato</p>
      </div>
    </mat-card-content>
  </mat-card>
</div>
