<div
    *ngIf="excludedPagesService.shown(); else selectAndFilter"
    class="right-title heading"
    translate="file-preview.tabs.exclude-pages.label"
>
    <div>
        <iqser-circle-button
            (action)="excludedPagesService.toggle()"
            [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
            icon="iqser:close"
            tooltipPosition="before"
        ></iqser-circle-button>
    </div>
</div>

<ng-template #selectAndFilter>
    <div class="right-title heading">
        {{ title() | translate }}
        <div>
            <div
                (click)="multiSelectService.activate()"
                *ngIf="multiSelectService.enabled() && multiSelectService.inactive()"
                [attr.help-mode-key]="'workload_bulk_selection'"
                class="all-caps-label primary pointer"
                translate="file-preview.tabs.annotations.select"
            ></div>

            <iqser-popup-filter
                *ngIf="documentInfoService.hidden()"
                [actionsTemplate]="annotationFilterActionTemplate"
                [attr.help-mode-key]="'workload_filter'"
                [fileId]="state.file()?.id"
                [primaryFiltersSlug]="'primaryFilters'"
                [secondaryFiltersSlug]="'secondaryFilters'"
            ></iqser-popup-filter>
        </div>
    </div>
</ng-template>

<div class="right-content">
    <redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>

    <div *ngIf="multiSelectService.active()" class="multi-select">
        <div class="selected-wrapper">
            <iqser-round-checkbox
                (click)="annotationManager.deselect()"
                [indeterminate]="listingService.areSomeSelected$ | async"
                type="with-bg"
            ></iqser-round-checkbox>

            <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>

            <redaction-annotation-actions
                *ngIf="listingService.areSomeSelected$ | async"
                [alwaysVisible]="true"
                [annotations]="listingService.selectedEntities$ | async"
                [canPerformAnnotationActions]="state.isWritable()"
                buttonType="primary"
                tooltipPosition="above"
            ></redaction-annotation-actions>
        </div>

        <iqser-circle-button
            (action)="multiSelectService.deactivate()"
            [type]="circleButtonTypes.primary"
            icon="iqser:close"
        ></iqser-circle-button>
    </div>

    <div class="annotations-wrapper">
        <div
            #quickNavigation
            (keydown)="preventKeyDefault($event)"
            (keyup)="preventKeyDefault($event)"
            [class.active-panel]="pagesPanelActive"
            class="quick-navigation"
            tabindex="0"
        >
            <div
                (click)="scrollQuickNavFirst()"
                [class.disabled]="pdf.currentPage() === 1"
                [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
                class="jump"
                matTooltipPosition="above"
            >
                <mat-icon svgIcon="iqser:nav-first"></mat-icon>
            </div>

            <redaction-pages
                (click)="pagesPanelActive = true"
                [displayedAnnotations]="displayedAnnotations"
                [pages]="displayedPages"
            ></redaction-pages>

            <div
                (click)="scrollQuickNavLast()"
                [class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
                [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
                class="jump"
                matTooltipPosition="above"
            >
                <mat-icon svgIcon="iqser:nav-last"></mat-icon>
            </div>
        </div>

        <div class="content">
            <div
                *ngIf="!viewModeService.isEarmarks()"
                [attr.anotation-page-header]="pdf.currentPage()"
                [hidden]="excludedPagesService.shown()"
                class="workload-separator"
            >
                <span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
                    <iqser-circle-button
                        (action)="excludedPagesService.toggle()"
                        *ngIf="currentPageIsExcluded()"
                        [size]="14"
                        [tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
                        class="mr-10 primary"
                        icon="red:exclude-pages"
                        tooltipPosition="above"
                    ></iqser-circle-button>

                    <span
                        [translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
                        [translate]="'page'"
                        class="all-caps-label"
                    ></span>
                </span>

                <div *ngIf="multiSelectService.active()">
                    <div
                        (click)="selectAllOnActivePage()"
                        class="all-caps-label primary pointer"
                        translate="file-preview.tabs.annotations.select-all"
                    ></div>
                    <div
                        (click)="deselectAllOnActivePage()"
                        class="all-caps-label primary pointer"
                        translate="file-preview.tabs.annotations.select-none"
                    ></div>
                </div>
            </div>

            <div
                #annotationsElement
                (keydown)="preventKeyDefault($event)"
                (keyup)="preventKeyDefault($event)"
                [class.active-panel]="!pagesPanelActive"
                [hidden]="excludedPagesService.shown()"
                class="annotations"
                id="annotations-list"
                tabindex="1"
            >
                <ng-container *ngIf="pdf.currentPage() && !displayedAnnotations.get(pdf.currentPage())?.length">
                    <iqser-empty-state
                        [horizontalPadding]="24"
                        [text]="'file-preview.no-data.title' | translate"
                        [verticalPadding]="40"
                        icon="iqser:document"
                    >
                        <ng-container *ngIf="currentPageIsExcluded() && displayedPages.length">
                            {{ 'file-preview.tabs.annotations.page-is' | translate }}
                            <a
                                (click)="excludedPagesService.toggle()"
                                class="with-underline"
                                translate="file-preview.excluded-from-redaction"
                            ></a
                            >.
                        </ng-container>

                        <ng-container *ngIf="(fileDataService.allLength$ | async) === 0">
                            {{ 'file-preview.tabs.annotations.no-annotations' | translate }}
                        </ng-container>

                        <ng-container *ngIf="(fileDataService.allLength$ | async) > 0 && displayedPages.length === 0"
                            >{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
                            <a (click)="filterService.reset()" class="with-underline" translate="file-preview.tabs.annotations.reset"></a>
                            {{ 'file-preview.tabs.annotations.the-filters' | translate }}
                        </ng-container>
                    </iqser-empty-state>

                    <div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">
                        <iqser-icon-button
                            (action)="jumpToPreviousWithAnnotations()"
                            [disabled]="pdf.currentPage() <= displayedPages[0]"
                            [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
                            [type]="iconButtonTypes.dark"
                            icon="iqser:nav-prev"
                        ></iqser-icon-button>

                        <iqser-icon-button
                            (action)="jumpToNextWithAnnotations()"
                            [disabled]="pdf.currentPage() >= displayedPages[displayedPages.length - 1]"
                            [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
                            [type]="iconButtonTypes.dark"
                            class="mt-8"
                            icon="iqser:nav-next"
                        ></iqser-icon-button>
                    </div>
                </ng-container>

                <redaction-annotations-list
                    (pagesPanelActive)="pagesPanelActive = $event"
                    [annotations]="(displayedAnnotations$ | async)?.get(pdf.currentPage())"
                ></redaction-annotations-list>
            </div>

            <redaction-page-exclusion *ngIf="excludedPagesService.shown()"></redaction-page-exclusion>
        </div>
    </div>
</div>

<ng-template #annotationFilterActionTemplate let-filter="filter">
    <iqser-circle-button
        (action)="skippedService.toggleSkipped()"
        *ngIf="filter.id === 'skipped'"
        [icon]="skippedService.hideSkipped() ? 'red:visibility-off' : 'red:visibility'"
        iqserPreventDefault
    ></iqser-circle-button>
</ng-template>
