<ion-app>
  <ion-split-pane contentId="main">
    <!--  the side menu  -->
    <ion-menu #menu contentId="main">
      <ion-content *ngIf="authService.isLoggedIn()">
        <ion-item>
          <ion-avatar slot="start">
            <img [src]="authService.getProfilePic()" #avatar (error)="avatar.src = placeholder" alt="avatar">
          </ion-avatar>
          <ion-label>
            <ion-list-header>
              {{authService.getDisplayName()}}
            </ion-list-header>
            <ion-note class="ion-margin-start">
              {{authService.getEmail()}}
            </ion-note>
          </ion-label>
        </ion-item>

        <ion-list lines="none">
          <ion-item (click)="authService.signOut()">
            Logout
          </ion-item>

          <app-menu-channel-group [channels]="publicChannels" groupName="Public Channels" [menu]="menu">
          </app-menu-channel-group>

          <app-menu-channel-group [channels]="privateChannels" groupName="My Channels" [menu]="menu">
          </app-menu-channel-group>

          <ion-item-group>
            <ion-item-divider>
              <ion-label>Options</ion-label>
            </ion-item-divider>

            <ion-item [routerLink]="['new-channel']" (click)="menu.toggle(true)">
              <ion-label>New channel</ion-label>
              <ion-icon name="add"></ion-icon>
            </ion-item>
          </ion-item-group>
        </ion-list>
      </ion-content>

    </ion-menu>
    <!-- the main content -->
    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</ion-app>
