<cd-modal>
  <ng-container class="modal-title"
                i18n>Advanced Settings</ng-container>

  <ng-container class="modal-content">
    <form name="settingsForm"
          class="form"
          #formDir="ngForm"
          [formGroup]="settingsForm"
          novalidate>
      <div class="modal-body">
        <p class="alert-warning"
           i18n>Changing these parameters from their default values is usually not necessary.</p>

        <div class="form-group row"
             *ngFor="let setting of settingsForm.controls | keyvalue"
             [ngClass]="{'has-error': settingsForm.showError(setting.key, formDir)}">
          <div class="col-sm-12">
            <label class="control-label"
                   for="{{ setting.key }}">{{ setting.key }}</label>
            <input class="form-control"
                   *ngIf="!isRadio(setting.key)"
                   type="number"
                   [formControlName]="setting.key">

            <ng-container *ngIf="isRadio(setting.key)">
              <br>
              <div class="radio radio-inline">
                <input type="radio"
                       [id]="setting.key + 'Yes'"
                       value="Yes"
                       [formControlName]="setting.key">
                <label [for]="setting.key + 'Yes'">Yes</label>
              </div>
              <div class="radio radio-inline">
                <input type="radio"
                       [id]="setting.key + 'No'"
                       value="No"
                       [formControlName]="setting.key">
                <label [for]="setting.key + 'No'">No</label>
              </div>
            </ng-container>

            <span class="help-block">{{ helpText[setting.key]?.help }}</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="button-group text-right">
          <cd-submit-button i18n
                            [form]="settingsForm"
                            (submitAction)="save()">Confirm</cd-submit-button>
          <cd-back-button [back]="modalRef.hide"
                          name="Cancel"
                          i18n-name>
          </cd-back-button>
        </div>
      </div>
    </form>
  </ng-container>
</cd-modal>
