<div class="adf-pagination__block adf-pagination__range-block">
    <span class="adf-pagination__range">
        {{
            'CORE.PAGINATION.ITEMS_RANGE' | translate: {
                range: range.join('-'),
                total: pagination.totalItems
            }
        }}
    </span>
</div>

<div class="adf-pagination__block adf-pagination__perpage-block">
    <span>
        {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}
    </span>

    <span class="adf-pagination__max-items">
        {{ pagination.maxItems }}
    </span>

    <button mat-icon-button [matMenuTriggerFor]="pageSizeMenu">
        <mat-icon>arrow_drop_down</mat-icon>
    </button>

    <mat-menu #pageSizeMenu="matMenu">
        <button
            mat-menu-item
            *ngFor="let pageSize of supportedPageSizes"
            (click)="onChangePageSize(pageSize)">
            {{ pageSize }}
        </button>
    </mat-menu>
</div>

<div class="adf-pagination__block adf-pagination__actualinfo-block">
    <span class="adf-pagination__current-page">
        {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }}
    </span>

    <button
        mat-icon-button
        [matMenuTriggerFor]="pagesMenu"
        *ngIf="pages.length > 1">
        <mat-icon>arrow_drop_down</mat-icon>
    </button>

    <span class="adf-pagination__total-pages">
        {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
    </span>

    <mat-menu #pagesMenu="matMenu" class="adf-pagination__page-selector">
        <button
            mat-menu-item
            *ngFor="let pageNumber of pages"
            (click)="onChangePageNumber(pageNumber)">
            {{ pageNumber }}
        </button>
    </mat-menu>
</div>

<div class="adf-pagination__block adf-pagination__controls-block">
    <button
        class="adf-pagination__previous-button"
        mat-icon-button
        [disabled]="isFirstPage"
        (click)="goPrevious()">
        <mat-icon>keyboard_arrow_left</mat-icon>
    </button>

    <button
        class="adf-pagination__next-button"
        mat-icon-button
        [disabled]="isLastPage"
        (click)="goNext()">
        <mat-icon>keyboard_arrow_right</mat-icon>
    </button>
</div>