<ion-app>
  <ion-split-pane contentId="main-content" when="false">
    <ion-menu contentId="main-content">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole === 0">
            <ion-item [routerDirection]="'root'" [routerLink]="['/dashboard']">
              <ion-icon slot="start" name="home"></ion-icon>
              <ion-label>{{'menu.home' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole < 2">
            <ion-item [routerDirection]="'root'" [routerLink]="['/postulations']">
              <ion-icon slot="start" name="hammer"></ion-icon>
              <ion-label>{{'menu.postulations' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole === 0">
            <ion-item [routerDirection]="'root'" [routerLink]="['/contracts']">
              <ion-icon slot="start" name="file-tray-full"></ion-icon>
              <ion-label>{{'menu.contracts' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole === 0">
            <ion-item [routerDirection]="'root'" [routerLink]="['/faq']">
              <ion-icon slot="start" name="information-circle"></ion-icon>
              <ion-label>{{'menu.faq' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole < 2">
            <ion-item [routerDirection]="'root'" [routerLink]="['/start']">
              <ion-icon slot="start" name="send"></ion-icon>
              <ion-label>{{'menu.start' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole !== 1">
            <ion-item [routerDirection]="'root'" [routerLink]="['/hero']">
              <ion-icon slot="start" name="ribbon"></ion-icon>
              <ion-label>{{'menu.hero' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle auto-hide="false" [class.ion-hide]="userRole !== 2">
            <ion-item [routerDirection]="'root'" [routerLink]="['/team']">
              <ion-icon slot="start" name="people"></ion-icon>
              <ion-label>{{'menu.team' | translate}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-item (click)="logout()">
            <ion-icon slot="start" name="log-out"></ion-icon>
            <ion-label>
              {{'menu.logout' | translate}}
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content" main></ion-router-outlet>
  </ion-split-pane>
</ion-app>
