<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">
        <mat-form-field style="width: 80%">
          <!-- MICROFONO -->
          <mat-label>Microfono</mat-label>
          <mat-select [formControl]="selectedAudioInputDevice">
            @for (device of audioInputDeviceList(); track device) {
            <mat-option [value]="device.device">{{ device.label }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <!-- ALTOPARLANTI -->
        <mat-form-field style="width: 80%">
          <mat-label>Altoparlanti</mat-label>
          <mat-select [formControl]="selectedAudioOutputDevice">
            @for (device of audioOutputDeviceList(); track device) {
            <mat-option [value]="device">{{ device.label }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <!-- CAMERA -->
        <mat-form-field style="width: 80%">
          <mat-label>Camera</mat-label>
          <mat-select [formControl]="selectedVideoInputDevice">
            @for (device of videoInputDeviceList(); track device) {
            <mat-option [value]="device">{{ device.label }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <button mat-flat-button type="submit" (click)="echoTest()">
          Test dell'eco
        </button>
      </div>
    </mat-card-content>
  </mat-card>
</div>
