<form (submit)="save()" [formGroup]="form">
    <div class="dialog-content">
        <div *ngIf="currentScreen === screens.WARNING_PREFERENCES" class="content-delimiter"></div>
        <div class="dialog-content-left">
            <ng-container *ngIf="currentScreen === screens.PREFERENCES">
                <div class="iqser-input-group">
                    <mat-slide-toggle color="primary" formControlName="autoExpandFiltersOnActions">
                        {{ 'preferences-screen.form.auto-expand-filters-on-action' | translate }}
                    </mat-slide-toggle>
                </div>
                <div class="iqser-input-group">
                    <mat-slide-toggle color="primary" formControlName="displaySuggestionsInPreview">
                        {{ 'preferences-screen.form.show-suggestions-in-preview' | translate }}
                    </mat-slide-toggle>
                </div>
            </ng-container>
            <ng-container *ngIf="currentScreen === screens.WARNING_PREFERENCES">
                <p class="warnings-subtitle">{{ 'preferences-screen.warnings-subtitle' | translate }}</p>
                <p class="warnings-description">{{ 'preferences-screen.warnings-description' | translate }}</p>

                <div class="iqser-input-group">
                    <mat-checkbox color="primary" formControlName="unapprovedSuggestionsWarning">
                        {{ 'preferences-screen.form.unapproved-suggestions-warning' | translate }}
                    </mat-checkbox>
                </div>

                <div class="iqser-input-group">
                    <mat-checkbox color="primary" formControlName="loadAllAnnotationsWarning">
                        {{ 'preferences-screen.form.load-all-annotations-warning' | translate }}
                    </mat-checkbox>
                </div>
            </ng-container>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            (action)="save()"
            [disabled]="!valid || !changed"
            [label]="'preferences-screen.actions.save' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>
    </div>
</form>
