<div class="config-field-wrapper">
    <div class="form-item">
        <form class="config-form-group" [formGroup]="form">
            <mat-form-field *ngIf="!isExcludedType(configItem.inputType)">
                <!-- Decides which input-type to take (i.e) date, select, input) -->
                <ng-container [ngSwitch]="configItem.inputType">
                    <ng-container *ngSwitchCase="'choice'">
                        <ng-container *ngTemplateOutlet="select"></ng-container>
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                        <ng-container *ngTemplateOutlet="input"></ng-container>
                    </ng-container>
                </ng-container>

                <!-- required for all kinds of input -->
                <mat-label>{{ configItem.label | translate }}</mat-label>
                <span matSuffix>
                    <mat-icon pull="right" class="red-warning-text" *ngIf="error">error</mat-icon>
                </span>
                <mat-error *ngIf="error"> {{ error }} </mat-error>

                <!-- templates for exchangeable inputs. Add more here if necessary -->

                <ng-template #select ngProjectAs="mat-select">
                    <mat-select formControlName="value" [errorStateMatcher]="matcher">
                        <mat-option *ngFor="let choice of configItem.choices" [value]="choice.value">
                            {{ choice.display_name | translate }}
                        </mat-option>
                    </mat-select>
                </ng-template>

                <ng-template #input ngProjectAs="[matInput]">
                    <input
                        matInput
                        formControlName="value"
                        [value]="translatedValue"
                        [errorStateMatcher]="matcher"
                        [type]="formType(configItem.inputType)"
                    />
                </ng-template>

                <mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
            </mat-form-field>

            <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
                <div *ngIf="configItem.inputType === 'boolean'">
                    <mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox>
                    <div class="hint" *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</div>
                    <div class="error" *ngIf="error">{{ error }}</div>
                </div>

                <!-- textarea -->
                <div *ngIf="configItem.inputType === 'text'">
                    <mat-form-field>
                        <textarea
                            formControlName="value"
                            rows="10"
                            matInput
                            placeholder="{{ configItem.label | translate }}"
                            [value]="translatedValue"
                        ></textarea>
                        <span matSuffix>
                            <mat-icon pull="right" class="red-warning-text" *ngIf="updateSuccessIcon">
                                check_circle
                            </mat-icon>
                        </span>
                    </mat-form-field>
                </div>

                <!-- datetimepicker -->
                <div *ngIf="configItem.inputType === 'datetimepicker'">
                    <div class="datetimepicker-container">
                        <mat-form-field>
                            <mat-label>{{ configItem.label | translate }}</mat-label>
                            <input
                                matInput
                                formControlName="date"
                                [matDatepicker]="datepicker"
                                (click)="datepicker.open()"
                            />
                            <mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
                            <div class="suffix-wrapper" matSuffix>
                                <mat-icon class="red-warning-text" *ngIf="updateSuccessIcon">check_circle</mat-icon>
                                <mat-datepicker-toggle
                                    [for]="datepicker"
                                    (click)="$event.preventDefault()"
                                ></mat-datepicker-toggle>
                            </div>
                            <mat-error *ngIf="error"> {{ error }} </mat-error>
                            <mat-datepicker #datepicker></mat-datepicker>
                        </mat-form-field>
                        <mat-form-field>
                            <input matInput [format]="24" formControlName="time" [ngxTimepicker]="timepicker" />
                            <div class="suffix-wrapper" matSuffix>
                                <mat-icon class="red-warning-text" *ngIf="updateSuccessIcon">error</mat-icon>
                                <ngx-material-timepicker-toggle [for]="timepicker">
                                    <mat-icon ngxMaterialTimepickerToggleIcon>access_time</mat-icon>
                                </ngx-material-timepicker-toggle>
                            </div>
                            <mat-error *ngIf="error"> {{ error }} </mat-error>
                            <ngx-material-timepicker #timepicker></ngx-material-timepicker>
                        </mat-form-field>
                    </div>
                </div>

                <!-- The editor -->
                <div *ngIf="configItem.inputType === 'markupText'">
                    <h4>{{ configItem.label | translate }}</h4>
                    <editor formControlName="value" [init]="getTinyMceSettings()"></editor>
                    <span matSuffix>
                        <mat-icon pull="right" class="red-warning-text" *ngIf="updateSuccessIcon">error</mat-icon>
                    </span>
                </div>

                <!-- Custom Translations -->
                <div *ngIf="configItem.inputType === 'translations'">
                    <os-custom-translation formControlName="value"></os-custom-translation>
                </div>
            </div>
        </form>
    </div>
</div>
