<div class="dialog-header">
    <div class="heading-l" translate="general-config-screen.system-preferences.title"></div>
</div>
<form (submit)="save()" *ngIf="form" [formGroup]="form">
    <div class="dialog-content">
        <div class="dialog-content-left">
            <div *ngFor="let key of keys" [class.required]="key.type !== 'boolean'" class="iqser-input-group">
                <ng-container *ngIf="key.type !== 'boolean'">
                    <label [translate]="translations.label[key.name]"></label>
                    <input
                        *ngIf="key.type === 'number'"
                        [formControlName]="key.name"
                        [name]="key.name"
                        [placeholder]="translations.placeholder[key.name] | translate"
                        type="number"
                    />
                    <input
                        *ngIf="key.type === 'string'"
                        [formControlName]="key.name"
                        [name]="key.name"
                        [placeholder]="translations.placeholder[key.name] | translate"
                        type="text"
                    />
                </ng-container>
                <mat-slide-toggle *ngIf="key.type === 'boolean'" [formControlName]="key.name" color="primary">
                    {{ translations.label[key.name] | translate }}
                </mat-slide-toggle>
            </div>
        </div>
    </div>
    <div class="dialog-actions">
        <iqser-icon-button
            [disabled]="form.invalid || !changed"
            [label]="'general-config-screen.actions.save' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
            [attr.help-mode-key]="'system_configurations'"
        ></iqser-icon-button>
    </div>
</form>
