<% if (page.header !== false) { %><ion-header>
    <ion-toolbar color="<%= headerColor %>">
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            <%= pageTitle %>
        </ion-title>
        <ion-buttons slot="end" *ngIf="data">
            <ion-button (click)="startMonitor()" *ngIf="!isMonitoringRunning">
                <ion-icon name="play"></ion-icon>
            </ion-button>
            <ion-button (click)="stopMonitor()" *ngIf="isMonitoringRunning">
                <ion-icon name="pause"></ion-icon>
            </ion-button>
            <!--<ion-button (click)="openSettings()">
                <ion-icon name="settings"></ion-icon>
            </ion-button>-->
        </ion-buttons>
    </ion-toolbar>
</ion-header><% } %>
<ion-content *ngIf="data">
    <app-navigation-progress-bar></app-navigation-progress-bar>

    <%= renderEngine.renderHTML(content) %>

</ion-content>
<% if (page.footer !== false) { %>
<ion-footer>
    <% if (monitoringNotRunningWarning) { %>
    <ion-item *ngIf="tapService.protocolMeta && !isMonitoringRunning" lines="none" [color]="'warning'">
        <ion-icon name="alert"></ion-icon> 
        <ion-label class="ion-text-wrap">Monitoring is paused</ion-label>
        <ion-buttons slot="end">
            <ion-button (click)="startMonitor()">
                <ion-icon name="play"></ion-icon> Start
            </ion-button>
        </ion-buttons>
    </ion-item>
    <% } %>
    <ion-item *ngIf="tapService.protocolMeta && waitForSubmit" lines="none" [color]="'warning'">
        <ion-icon name="alert"></ion-icon> 
        <ion-label class="ion-text-wrap">Device is not connected. Changes will be sent when device is connected.</ion-label>
    </ion-item>
    <ion-item *ngIf="!tapService.protocolMeta" lines="none" [color]="'danger'">
        <ion-icon name="alert"></ion-icon> 
        <ion-label class="ion-text-wrap">No device selected</ion-label>
        <ion-buttons slot="end">
            <ion-button (click)="changeDevice()">
                <ion-icon name="wifi"></ion-icon> Select
            </ion-button>
        </ion-buttons>
    </ion-item>
</ion-footer><% } %>