<collapsible
  [isExpanded]="false"
  [isIconBefore]="true"
  [title]="title | translate"
  [formGroup]="soundForm"
>
  <div class="form-wrapper">
    <mat-form-field
      class="width100"
      [hideRequiredMarker]="true"
    >
      <mat-label>{{ T.GCF.SOUND.VOLUME | translate }}</mat-label>
      <mat-slider
        class="width100"
        [min]="0"
        [max]="100"
        [step]="1"
        [discrete]="true"
      >
        <input
          style="height: 100%"
          matInput
          matSliderThumb
          formControlName="volume"
        />
      </mat-slider>
    </mat-form-field>
    <mat-form-field class="width100">
      <mat-label>{{ T.GCF.SOUND.DONE_SOUND | translate }}</mat-label>
      <mat-select formControlName="doneSound">
        @for (sound of soundOpts; track sound) {
          <mat-option [value]="sound.value">{{ sound.label }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-slide-toggle
      class="width100"
      [checked]="this.config?.isIncreaseDoneSoundPitch"
      formControlName="isIncreaseDoneSoundPitch"
      >{{ T.GCF.SOUND.IS_INCREASE_DONE_PITCH | translate }}</mat-slide-toggle
    >
    <mat-form-field class="width100">
      <mat-label>{{ T.GCF.SOUND.BREAK_REMINDER_SOUND | translate }}</mat-label>
      <mat-select formControlName="breakReminderSound">
        @for (sound of soundOpts; track sound) {
          <mat-option [value]="sound.value">{{ sound.label }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field class="width100">
      <mat-label>{{ T.GCF.SOUND.TRACK_TIME_SOUND | translate }}</mat-label>
      <mat-select formControlName="trackTimeSound">
        @for (sound of soundOpts; track sound) {
          <mat-option [value]="sound.value">{{ sound.label }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
</collapsible>
