<gridster [options]="layoutOptions">
    <gridster-item [item]="textPanelItem">
        <evt-text-panel 
            [pageID]="currentPageID$ | async" 
            [editionLevelID]="currentEditionLevel$ | async"
            (pageChange)="changePage($event)" 
            (editionLevelChange)="changeEditionLevel($event)"
        ></evt-text-panel>
    </gridster-item>
    <gridster-item *ngIf="pinnedBoardOpened" [item]="pinnedBoardItem">
        <evt-pinboard-panel content (hide)="togglePinnedBoard()"></evt-pinboard-panel>
    </gridster-item>
    <gridster-item *ngIf="apparatusesOpened" [item]="apparatusesItem">
        <evt-panel class="apparatuses" [secondary]="true" [hideFooter]="true" [hideHeader]="true">
            <div content>
                <ul ngbNav #apparatuses="ngbNav" class="nav-tabs nav-fill">
                    <li [ngbNavItem]="'critical'">
                        <a ngbNavLink>{{'CriticalApparatus' | translate}}</a>
                        <ng-template ngbNavContent>
                            <div>{{'CriticalApparatus' | translate}}</div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="'sources'">
                        <a ngbNavLink>{{ 'Sources' | translate }}</a>
                        <ng-template ngbNavContent>
                            <div>{{ 'Sources' | translate }}</div>
                        </ng-template>
                    </li>
                    <li [ngbNavItem]="'analogues'">
                        <a ngbNavLink>{{ 'Analogues' | translate }}</a>
                        <ng-template ngbNavContent>
                            <div>{{ 'Analogues' | translate }}</div>
                        </ng-template>
                    </li>
                </ul>  
                <div [ngbNavOutlet]="apparatuses" class="mt-2"></div>
            </div>
        </evt-panel>
    </gridster-item>
</gridster>
<div class="global-tools">
    <evt-button [type]="'button'" [toggler]="true" [active]="apparatusesOpened"
        (btnClick)="toggleApparatuses()" additionalClasses="btn-primary shadow rounded-circle mr-1" 
        [iconLeft]="{icon: 'pen-square'}"></evt-button>
    <evt-button [type]="'button'" [toggler]="true" [active]="pinnedBoardOpened"
        (btnClick)="togglePinnedBoard()" additionalClasses="btn-primary shadow rounded-circle" 
        [iconLeft]="{icon: 'thumbtack'}"></evt-button>
</div>