<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 class="ion-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" [ngSwitch]="connectionInfo?.type">
                    <div *ngSwitchCase="'ble'">
                        <ion-icon name="bluetooth"></ion-icon>&nbsp; BLE {{connectionInfo?.info.mac}}
                    </div>
                    <div *ngSwitchCase="'nfc'">
                        <ion-icon src="assets/svg/nfc.svg"></ion-icon>&nbsp; NFC
                    </div>
                    <div *ngSwitchCase="'mqtt'">
                        <ion-icon name="wifi"></ion-icon>&nbsp; MQTT {{connectionInfo?.info.endpoint}}
                    </div>
                    <div *ngSwitchCase="'socket'">
                        <ion-icon name="wifi"></ion-icon>&nbsp; Socket {{connectionInfo?.info.url}}
                    </div>
                    <div *ngSwitchCase="'wifi'">
                        <ion-icon name="wifi"></ion-icon>&nbsp; {{ connectionInfo?.info.ssid || connectionInfo?.info.url }}
                    </div>
                    <div *ngSwitchCase="'iframe'">
                        Iframe
                    </div>
                    <div *ngSwitchCase="'webview'">
                        Webview
                    </div>
                    <div *ngSwitchDefault>
                        {{connectionInfo?.type}}
                    </div>
                </ion-select-option>
              </ion-select>
        </h3>
        <ion-segment>
            <ion-segment-button (click)="tapConnect()" *ngIf="(tap && !isNFC && !tap.isConnected())" [disabled]="isConnecting | async">
                <ion-icon name="wifi"></ion-icon>
                Connect
            </ion-segment-button>
            <ion-segment-button (click)="tapService.disconnect()" *ngIf="tap?.isConnected() && !isNFC" [disabled]="isDisconnecting | async">
                <ion-icon name="close-circle"></ion-icon>
                Disconnect
            </ion-segment-button>
            <ion-segment-button (click)="login()" *ngIf="(tap?.isConnected() || isNFC) && (isAnonymous$ | async)">
                <ion-icon name="log-in"></ion-icon>
                Login
            </ion-segment-button>
            <app-task-manager #tapLogoutTaskManager *ngIf="(tap?.isConnected() || isNFC) && !(isAnonymous$ | async)" [task]="tapLogoutTask">
                <app-task-manager-action>
                    <ion-segment-button (click)="tapLogoutTaskManager.execTask()">
                        <ion-icon name="log-out"></ion-icon>
                        Logout
                    </ion-segment-button>
                </app-task-manager-action>
                <app-task-manager-delayed>
                    <ion-segment-button color="warning" app-task-manager-action-cancel>
                        <ion-icon name="close"></ion-icon>
                        Cancel
                    </ion-segment-button>
                </app-task-manager-delayed>
                <app-task-manager-running>
                    <ion-segment-button disabled>
                        <ion-icon name="log-out"></ion-icon>
                        <ion-progress-bar type="indeterminate"></ion-progress-bar>
                    </ion-segment-button>
                </app-task-manager-running>
            </app-task-manager>
            <ion-segment-button (click)="changeDevice()">
                <ion-icon name="arrow-back"></ion-icon>
                Scan</ion-segment-button>
        </ion-segment>
    </ion-footer>
    <ion-footer  class="ion-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>