@for (field of fields; track $index) {
    @switch (field.type) {
        @case (ConfigurationFilesFieldTypes.float) {
            <div class="mb-3">
                <label cLabel [for]="field.field">
                    {{ field.field }}
                    <oitc-required-icon></oitc-required-icon>
                </label>
                <input cFormControl
                       [attr.id]="field.field"
                       [name]="field.field"
                       type="number"
                       step="0.01"
                       [placeholder]="field.placeholder"
                       [(ngModel)]="field.value"
                       oitcFormError [errors]="errors" errorField="Configfile.{{field.field}}">
                <oitc-form-feedback [errors]="errors" errorField="Configfile.{{field.field}}"></oitc-form-feedback>
                @if (field.help) {
                    <div class="help-block">
                        {{ field.help }}
                    </div>
                }
            </div>
        }
        @case (ConfigurationFilesFieldTypes.int) {
            <div class="mb-3">
                <label cLabel [for]="field.field">
                    {{ field.field }}
                    <oitc-required-icon></oitc-required-icon>
                </label>
                <input cFormControl
                       [attr.id]="field.field"
                       [name]="field.field"
                       type="number"
                       [placeholder]="field.placeholder"
                       [(ngModel)]="field.value"
                       oitcFormError [errors]="errors" errorField="Configfile.{{field.field}}">
                <oitc-form-feedback [errors]="errors" errorField="Configfile.{{field.field}}"></oitc-form-feedback>
                @if (field.help) {
                    <div class="help-block">
                        {{ field.help }}
                    </div>
                }
            </div>
        }
        @case (ConfigurationFilesFieldTypes.bool) {
            <div class="mb-3">
                <c-form-check>
                    <input cFormCheckInput
                           [attr.id]="field.field"
                           [name]="field.field"
                           type="checkbox"
                           trueFalseValue
                           [trueValue]="1"
                           [falseValue]="0"
                           [(ngModel)]="field.value"
                           oitcFormError [errors]="errors" errorField="Configfile.{{field.field}}"
                    />
                    <label cFormCheckLabel [for]="field.field">
                        {{ field.field }}
                    </label>
                </c-form-check>
                <oitc-form-feedback [errors]="errors" errorField="Configfile.{{field.field}}"></oitc-form-feedback>
                @if (field.help) {
                    <div class="help-block">
                        {{ field.help }}
                    </div>
                }
            </div>
        }
        @case (ConfigurationFilesFieldTypes.text) {
            <div class="mb-3">
                <label cLabel [for]="field.field">
                    {{ field.field }}
                    <oitc-required-icon></oitc-required-icon>
                </label>
                <textarea cFormControl
                          [attr.id]="field.field"
                          [name]="field.field"
                          class="code-font"
                          oitcFormError [errors]="errors" errorField="Configfile.{{field.field}}"
                          [(ngModel)]="field.value"
                          rows="6"></textarea>
                <oitc-form-feedback [errors]="errors" errorField="Configfile.{{field.field}}"></oitc-form-feedback>
            </div>
        }
        @case (ConfigurationFilesFieldTypes.string_array) {
            @if (Array.isArray(field.value)) {
                <div class="mb-3">
                    <label cLabel [attr.id]="field.field + '-label'">
                        {{ field.field }}
                    </label>
                    @for (arrayValue of field.value; track $index) {
                        <c-row class="mt-1">
                            <c-col xs="10" class="mb-1">
                                <input cFormControl
                                       [attr.id]="field.field+$index"
                                       [attr.aria-labelledby]="field.field + '-label'"
                                       [attr.aria-label]="field.field + ' ' + ($index + 1)"
                                       [name]="field.field+$index"
                                       type="text"
                                       [(ngModel)]="field.value[$index]"
                                       oitcFormError [errors]="errors"
                                       errorField="{{field.field}}.{{$index}}">
                                <oitc-form-feedback [errors]="errors" errorField="{{field.field}}.{{$index}}"></oitc-form-feedback>
                            </c-col>
                            <c-col xs="2" class="mb-1">
                                <button cButton class="ripple" color="danger" type="button"
                                        [attr.aria-label]="('Remove') + ' ' + field.field + ' ' + ($index + 1)"
                                        (click)="removeRow(field, $index)">
                                    <fa-icon [icon]="['fas', 'trash']"></fa-icon>
                                </button>
                            </c-col>
                        </c-row>
                    }

                    <c-row class="mt-1">
                        <c-col xs="12" lg="9" class="help-block">
                            @if (field.help) {
                                {{ field.help }}
                            }
                        </c-col>
                        <c-col xs="12" lg="3">
                            <button cButton class="ripple" color="success" type="button"
                                    (click)="pushNewRow(field)">
                                <fa-icon [icon]="['fas', 'plus']"></fa-icon>
                                {{ ('Add new Line') }}
                            </button>
                        </c-col>

                    </c-row>
                </div>
            }
        }
        @default {
            <div class="mb-3">
                <label cLabel [for]="field.field">
                    {{ field.field }}
                    <oitc-required-icon></oitc-required-icon>
                </label>
                <input cFormControl
                       [attr.id]="field.field"
                       [name]="field.field"
                       type="text"
                       [placeholder]="field.placeholder"
                       [(ngModel)]="field.value"
                       oitcFormError [errors]="errors" errorField="Configfile.{{field.field}}">
                <oitc-form-feedback [errors]="errors" errorField="Configfile.{{field.field}}"></oitc-form-feedback>
                @if (field.help) {
                    <div class="help-block">
                        {{ field.help }}
                    </div>
                }
            </div>
        }
    }
}