<div *ngIf="canExcludePages()" class="exclude-pages-input-container">
    <iqser-input-with-action
        (action)="excludePagesRange($event)"
        [hint]="'file-preview.tabs.exclude-pages.hint' | translate"
        [placeholder]="'file-preview.tabs.exclude-pages.input-placeholder' | translate"
        autocomplete="off"
        icon="iqser:check"
        width="full"
    ></iqser-input-with-action>
</div>

<div *ngIf="excludedRanges().length" class="all-caps-label-container">
    <div class="all-caps-label" translate="file-preview.tabs.exclude-pages.removed-from-redaction"></div>
</div>

<div *ngIf="excludedRanges() as excludedRanges" class="ranges" iqserHasScrollbar>
    <div *ngFor="let range of excludedRanges" class="range">
        <ng-container *ngIf="range.startPage === range.endPage">
            {{ range.startPage }}
        </ng-container>

        <ng-container *ngIf="range.startPage !== range.endPage"> {{ range.startPage }} - {{ range.endPage }} </ng-container>

        <iqser-circle-button
            (action)="includePagesRange(range)"
            *ngIf="canExcludePages()"
            [tooltip]="'file-preview.tabs.exclude-pages.put-back' | translate"
            icon="red:undo"
        ></iqser-circle-button>
    </div>
</div>

<div *ngIf="noExcludedAndCantExclude()" class="no-excluded heading-l" translate="file-preview.tabs.exclude-pages.no-excluded"></div>
