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

    @if (setting().type === 'input-checkbox') {
      <my-peertube-checkbox
        [inputName]="setting().name"
        [formControlName]="setting().name"
        [labelInnerHTML]="setting().label"
      ></my-peertube-checkbox>
    }

    @if (setting().descriptionHTML) {
      <div 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">
            @for (option of setting().options; track option) {
              <option [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>
      }
    }

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