<div class="mdl-paging">
    <span class="mdl-paging__per-page">
        <span class="mdl-paging__per-page-label">Rows per page:</span>
        <span class="mdl-paging__per-page-value" [attr.data-automation-id]="'rows_per_page_' + pageSize">{{pagination.maxItems}}</span>

        <md-menu #appMenu="mdMenu" for="pageSizePicker">
            <div *ngFor="let size of supportedPageSizes"
                tabindex="-1" [attr.data-value]="size" md-menu-item (click)="setPageSize(size)">
                <span>{{size}}</span>
            </div>
        </md-menu>
        <button  id="pageSizePicker" md-icon-button [mdMenuTriggerFor]="appMenu">
            <md-icon>arrow_drop_down</md-icon>
        </button>
    </span>
    <span class="mdl-paging__count">{{summary}}</span>
    <button (click)="showPrevPage()"
            [disabled]="!prevPageAvail()"
            alfresco-mdl-button class="mdl-button--icon mdl-paging__prev" [attr.data-automation-id]="prev_page">
        <i class="material-icons">keyboard_arrow_left</i>
    </button>
    <button (click)="showNextPage()"
            [disabled]="!nextPageAvail()"
            alfresco-mdl-button class="mdl-button--icon mdl-paging__next" [attr.data-automation-id]="next_page">
        <i class="material-icons">keyboard_arrow_right</i>
    </button>
</div>
