<ng-container>
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-menu-button [menu]="'main-menu'"></ion-menu-button>
            </ion-buttons>
            <ion-title #titleBar>
                <div style="display: flex; flex-direction: row;">
                    <button (click)="openNav()">
                        <i class="fa fa-bars" style="font-size: 1.1em"></i>
                    </button>
                    <ion-input
                        style="flex: 1; font-size: 18pt"
                        [value]="rootPageName"
                        [readonly]="true"
                        class="title-input"
                    ></ion-input>
                </div>
                <div
                    *ngIf="rootPageId && editorService.currentPageId && editorService.currentPageId !== rootPageId"
                    style="font-size: 14pt; padding-top: 10px; padding-bottom: 15px;"
                >
                    <i *ngIf="editorService.currentPageType" [ngClass]="typeIcons[editorService.currentPageType]" style="font-size: 14pt; margin: auto 10px;"></i>
                    {{ editorService.mutablePageName }}
                </div>
            </ion-title>
            <ion-buttons slot="end">
                <button
                    class="save-button"
                    (click)="editorService.triggerSave()"
                    title="Manually save this note"
                    *ngIf="editorService.isEditing && editorService.canEdit()"
                >
                    <i *ngIf="!(editorService.isSaving || editorService.willSave)" class="fa fa-check-circle"></i>
                    {{ (editorService.isSaving || editorService.willSave) ? 'Saving...' : 'Saved!' }}
                </button>
                <button
                        *ngIf="editorService.isEditing && editorService.canEdit() && !isFilloutMode"
                        title="More page options"
                        (click)="onPageMenuClick($event)"
                        class="clear-btn"
                        style="padding: 10px;"
                >
                    <i class="fa fa-ellipsis-v"></i>
                </button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ng-container *ngIf="editorService.notAvailable">
            <div class="editor-root ion-padding" style="text-align: center; padding-top: 100px; color: #494949; font-size: 1.2em;">
                Sorry, this page is not available offline yet.
            </div>
        </ng-container>
        <ion-menu *ngIf="menuTree.length" side="start" [menuId]="'site-' + rootPageId" [contentId]="'site-menu-content-' + rootPageId">
            <ion-header>
                <ion-toolbar>
                    <ion-title>{{ rootPageName }}</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content [id]="'site-menu-content-' + rootPageId">
                <ion-list *ngFor="let item of menuTree">
                    <ng-template *ngTemplateOutlet="navMenuItem; context: {item: item}"></ng-template>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ng-container *ngIf="!editorService.notAvailable">
            <div class="editor-root ion-padding">
                <div
                        class="host-container"
                        style="display: flex; margin-bottom: 20px;"
                        *ngFor="let node of editorService.immutableNodes"
                >
                    <div class="host-icons" *ngIf="!isFilloutMode && editorService.canEdit()">
                        <button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn">
                            <i class="fa fa-ellipsis-v" title="Node options"></i>
                        </button>
                    </div>
                    <ng-container *ngIf="node.isNorm()">
                        <editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-norm>
                    </ng-container>
                    <ng-container *ngIf="node.type === 'markdown'">
                        <editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-markdown>
                    </ng-container>
                    <ng-container *ngIf="node.type === 'database_ref'">
                        <editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-database>
                    </ng-container>
                    <ng-container *ngIf="node.type === 'code_ref'">
                        <editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-code>
                    </ng-container>
                    <ng-container *ngIf="node.type === 'file_ref'">
                        <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-files>
                    </ng-container>
                    <ng-container *ngIf="node.type === 'file_box'">
                        <editor-file-box style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-file-box>
                    </ng-container>
                    <ng-container *ngIf="node.isForm()">
                        <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
                    </ng-container>
                </div>
                <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">
                    <i class="fa fa-plus"></i> Add Node
                </button>
            </div>
        </ng-container>
    </ion-content>
</ng-container>

<ng-template #navMenuItem let-baseItem="item" let-indent="indent">
    <ion-item
        *ngIf="!baseItem.virtual"
        [ngStyle]="{marginLeft: 20 * (indent || 0) + 'px', padding: '3px'}"
        button
        class="ion-activatable custom-menu-item"
        (click)="navigate(baseItem.id)"
    >
        {{ baseItem.name }}
    </ion-item>
    <ng-container *ngIf="baseItem.children && baseItem.children.length">
        <ng-container *ngFor="let item of baseItem.children">
            <ng-template *ngTemplateOutlet="navMenuItem; context: {item: item, indent: (indent || 0) + (baseItem.virtual ? 0 : 1)}"></ng-template>
        </ng-container>
    </ng-container>
</ng-template>
