<ion-menu contentId="menu-content" menuId="deviceMenu" swipeGesture type="reveal">
    <ion-header>
        <ion-toolbar color="primary">
            <ion-item color="primary" lines="none">
                <img slot="start" src="/assets/icons/logo-48x48.png" style="width: 32px; height: 32px;"/>
                <ion-title>{{appTitle}}</ion-title>
            </ion-item>
        </ion-toolbar>
    </ion-header>
    <ion-content> 
      <app-side-menu [pages]="pages"></app-side-menu>
    </ion-content>
    <ion-footer padding *ngIf="hasTap()">
        <h3 style="text-align: center">
            <span style="font-weight: bold;">{{ appName | async }}</span><br/>
            <span style="font-size: 0.8em" (click)="clickProfileName()">
              <ion-icon name="person"></ion-icon>
                {{(tapService.sessionState | async).name}}
            </span><br/>
            <ion-select [value]="protocolMeta | async" (ionChange)="selectProtocolChange($event)">
                <ion-select-option *ngFor="let connectionInfo of (availableProtocols | async)" [value]="connectionInfo">
                    <div style="font-size: 0.8em" *ngIf="connectionInfo?.type === 'ble'">
                        <ion-icon name="bluetooth"></ion-icon>&nbsp; BLE {{connectionInfo?.info.mac}}
                    </div>
                    <div *ngIf="connectionInfo?.type === 'nfc'">
                        <ion-icon src="assets/svg/nfc.svg"></ion-icon>&nbsp; NFC
                    </div>
                    <div *ngIf="connectionInfo?.type === 'mqtt'">
                        <ion-icon name="wifi"></ion-icon>&nbsp; MQTT {{connectionInfo?.info.endpoint}}
                    </div>
                    <div *ngIf="connectionInfo?.type === 'socket'">
                        <ion-icon name="wifi"></ion-icon>&nbsp; TCP/IP {{connectionInfo?.info.url}}
                    </div>
                    <div *ngIf="connectionInfo?.type === 'iframe'">
                        Iframe
                    </div>
                </ion-select-option>
              </ion-select>
        </h3>
        <ion-segment>
            <ion-segment-button (click)="tapConnect()" *ngIf="tap && !tap.isConnected()" [disabled]="isConnecting | async">
                <ion-icon name="wifi"></ion-icon>
                Connect
            </ion-segment-button>
            <ion-segment-button (click)="login()" *ngIf="tap?.isConnected() && (tapService.isLoggedInAs$('anonymous') | async)">
                <ion-icon name="log-in"></ion-icon>
                Login
            </ion-segment-button>
            <ion-segment-button (click)="tap && tapService.logout()" *ngIf="tap?.isConnected() && !(tapService.isLoggedInAs$('anonymous') | async)">
                <ion-icon name="log-out"></ion-icon>
                Logout
            </ion-segment-button>
            <ion-segment-button (click)="tap && tapService.disconnect()" *ngIf="tap?.isConnected()" [disabled]="isDisconnecting | async">
                <ion-icon name="close-circle"></ion-icon>
                Disconnect
            </ion-segment-button>
            <ion-segment-button (click)="changeDevice()">
                <ion-icon name="arrow-back"></ion-icon>
                Scan</ion-segment-button>
        </ion-segment>
    </ion-footer>
    <ion-footer padding *ngIf="!hasTap()">
        <ion-segment-button (click)="changeDevice()">
            <ion-icon name="wifi"></ion-icon>
            Select device</ion-segment-button>
    </ion-footer>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>