<section class="dialog">
    <div class="dialog-header heading-l" [translate]="'import-redactions-dialog.title'"></div>

    <div class="dialog-content">
        <div class="mb-24" [translate]="'import-redactions-dialog.details'"></div>
        <iqser-upload-file (fileChanged)="fileChanged($event)"></iqser-upload-file>

        <div class="only-for-pages">
            <mat-checkbox (change)="onlyForSpecificPages = $event.checked" [checked]="onlyForSpecificPages" color="primary">
                {{ 'import-redactions-dialog.import-only-for-pages' | translate }}
            </mat-checkbox>
            <div class="iqser-input-group">
                <input
                    [(ngModel)]="rangesValue"
                    [disabled]="!onlyForSpecificPages"
                    [placeholder]="'import-redactions-dialog.range.placeholder' | translate"
                    type="text"
                />
                <label [translate]="'import-redactions-dialog.range.label'"></label>
            </div>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            (action)="save()"
            [disabled]="disabled"
            [label]="'import-redactions-dialog.actions.import' | translate"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>

        <div class="all-caps-label cancel" mat-dialog-close [translate]="'import-redactions-dialog.actions.cancel'"></div>
    </div>

    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>
