<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">headset</span>
        Dispositivi
      </h2>
    </mat-card-header>
    <mat-card-content>
      <div class="div-center" style="flex-direction: column">
        <span style="margin: 20px 0px"
          >Dispositivo in uso:
          <span class="highlight">{{ deviceInUse() }}</span></span
        >
        <mat-form-field style="width: 80%">
          <mat-label>Dispositivi</mat-label>
          <mat-select [formControl]="selectedDevice">
            @for (device of availableDeviceList(); track device) {
            <mat-option [value]="device">{{
              device.label + " - " + device.exten
            }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
    </mat-card-content>
  </mat-card>
</div>
