<form [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 *ngIf="config.IS_DOCUMINE" class="iqser-input-group">
                    <mat-slide-toggle color="primary" formControlName="openScmDialogByDefault">
                        {{ 'preferences-screen.form.open-structured-view-by-default' | translate }}
                    </mat-slide-toggle>
                </div>

                <div *allow="roles.getTables" class="iqser-input-group">
                    <label [translate]="'preferences-screen.form.table-extraction-type'"></label>
                    <input formControlName="tableExtractionType" />
                </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="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"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>
    </div>
</form>
