<div *ngIf="form()" [formGroup]="form()" class="form-group">
  <label *ngIf="setting().label && setting().type !== 'input-checkbox'" [attr.for]="setting().name" [innerHTML]="setting().label"></label>

  <my-peertube-checkbox
    *ngIf="setting().type === 'input-checkbox'"
    [inputName]="setting().name"
    [formControlName]="setting().name"
    [labelInnerHTML]="setting().label"
  ></my-peertube-checkbox>

  <div *ngIf="setting().descriptionHTML" class="form-group-description" [innerHTML]="setting().descriptionHTML"></div>

  @switch (setting().type) {
    @case ('input') {
      <input type="text" [id]="setting().name" [formControlName]="setting().name" />
    }

    @case ('select') {
      <div class="peertube-select-container">
        <select  [id]="setting().name" [formControlName]="setting().name" class="form-control">
          <option *ngFor="let option of setting().options" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    }

    @case ('input-password') {
      <my-input-text [formError]="formErrors()['settings.name']" [formControlName]="setting().name" [inputId]="setting().name"></my-input-text>
    }

    @case ('input-textarea') {
      <textarea type="text" [id]="setting().name" [formControlName]="setting().name"></textarea>

    }

    @case ('markdown-text') {
      <my-help helpType="markdownText"></my-help>

      <my-markdown-textarea
        markdownType="text" [inputId]="setting().name" [formControlName]="setting().name"
        [formError]="formErrors()['settings.name']"
      ></my-markdown-textarea>
    }

    @case ('markdown-enhanced') {
      <my-help helpType="markdownEnhanced"></my-help>

      <my-markdown-textarea
        markdownType="enhanced" [inputId]="setting().name" [formControlName]="setting().name"
        [formError]="formErrors()['settings.name']"
      ></my-markdown-textarea>

    }

    @case ('html') {
      <div [innerHTML]="setting().html"></div>
    }
  }

  <div *ngIf="hasDedicatedFormError() && formErrors()[setting().name]" class="form-error" role="alert">
    {{ formErrors()[setting().name] }}
  </div>

</div>
