<nz-layout>

  <nz-header nz-row nzJustify="space-between">
    <div nz-col nz-row [nzGutter]="8">
      <div nz-col>
        <a class="_logo" [routerLink]="_routeForApplicationIndex">
          <img src="/assets/images/logo.svg">
          <h1><%= getPascalCase(name) %>Dev</h1>
        </a>
      </div>
      <div nz-col>
        <div class="_button _button-icon" [title]="_menuCollapsed ? '展开菜单' : '折叠菜单'" (click)="_menuCollapsed = !_menuCollapsed">
          <i nz-icon [nzType]="_menuCollapsed ? 'menu-unfold' : 'menu-fold'" nzTheme="outline"></i>
        </div>
      </div>
    </div>
    <div nz-col nz-row [nzGutter]="8">
      <div nz-col>
        <div class="_button"
             [class._button-active]="_userDropdownVisible"
             nz-dropdown
             [(nzVisible)]="_userDropdownVisible"
             [nzDropdownMenu]="userDropdownMenu"
             nzPlacement="bottomRight">
          <nz-avatar nzIcon="user" [nzText]="_passport?.name?.slice(0, 1)" [nzSrc]="_passport?.avatar" [nzSize]="24"></nz-avatar>
          <span>{{ _passport?.name }}</span>
        </div>
        <nz-dropdown-menu #userDropdownMenu>
          <ul nz-menu>
            <li nz-menu-item [routerLink]="_routeForApplicationIndex + '/passport'" [queryParams]="{ showContent: '基本设置' }">
              <i nz-icon nzType="user" nzTheme="outline"></i>
              <span>个人中心</span>
            </li>
            <li nz-menu-item [routerLink]="_routeForApplicationIndex + '/passport'" [queryParams]="{ showContent: '修改密码' }">
              <i nz-icon nzType="key" nzTheme="outline"></i>
              <span>修改密码</span>
            </li>
            <li nz-menu-divider></li>
            <li nz-menu-item (click)="_logout()">
              <i nz-icon nzType="logout" nzTheme="outline"></i>
              <span>退出登录</span>
            </li>
          </ul>
        </nz-dropdown-menu>
      </div>
    </div>
  </nz-header>

  <nz-layout>
    <nz-sider nzTheme="dark"
              nzCollapsible
              [(nzCollapsed)]="_menuCollapsed"
              nzBreakpoint="md"
              [nzTrigger]="null">
      <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="_menuCollapsed">
        <ng-container *ngTemplateOutlet="menuTemplate; context: { menuList: _menuList }"></ng-container>
        <ng-template #menuTemplate let-menuList="menuList">
          <ng-container *ngFor="let menu of menuList">
            <ng-container *ngIf="menu.type === '文件夹'">
              <li nz-submenu [nzPaddingLeft]="_menuCollapsed ? null: menu.level * 24">
                <div title>
                  <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                  <span>{{ menu.name }}</span>
                </div>
                <ul>
                  <ng-container *ngTemplateOutlet="menuTemplate; context: { menuList: menu.children }"></ng-container>
                </ul>
              </li>
            </ng-container>
            <ng-container *ngIf="menu.type === '菜单'">
              <li nz-menu-item [nzPaddingLeft]="_menuCollapsed ? undefined: menu.level * 24" nzMatchRouter>
                <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                <a [routerLink]="menu.url" nzMatchRouter [title]="menu.name">{{ menu.name }}</a>
              </li>
            </ng-container>
            <ng-container *ngIf="menu.type === '链接'">
              <li nz-menu-item [nzPaddingLeft]="_menuCollapsed ? undefined: menu.level * 24">
                <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                <a [href]="menu.url" [title]="menu.name">{{ menu.name }}</a>
              </li>
            </ng-container>
          </ng-container>
        </ng-template>
      </ul>
    </nz-sider>

    <nz-layout>
      <nz-tabset [nzSelectedIndex]="_currentRouteRecordIndex">
        <nz-tab *ngFor="let routeRecord of _routeRecordList"
                [nzTitle]="tabTitleTemplate"
                nzClosable
                (nzClick)="_navigateTo(routeRecord.route)"
                (nzContextmenu)="_openTabDropdownMenu($event, tabDropdownMenu)">
          <ng-template #tabTitleTemplate>
            <i nz-icon nzType="loading" nzTheme="outline" *ngIf="routeRecord.loading"></i>
            <span [title]="routeRecord.component?.title || routeRecord.data?.name || '新标签页'">{{ routeRecord.component?.title || routeRecord.data?.name || '新标签页' }}</span>
            <i nz-icon nzType="close" nzTheme="outline" title="关闭" (click)="$event.stopPropagation(); _closeRoute(routeRecord.route)"></i>
          </ng-template>
          <nz-dropdown-menu #tabDropdownMenu>
            <ul nz-menu>
              <li nz-menu-item (click)="_closeRoute(routeRecord.route)">关闭当前</li>
              <li nz-menu-item (click)="_closeOtherRoutes(routeRecord.route)">关闭其它</li>
              <li nz-menu-item (click)="_closeRightRoutes(routeRecord.route)">关闭右侧</li>
              <li nz-menu-item (click)="_closeAllRoutes()">关闭全部</li>
            </ul>
          </nz-dropdown-menu>
        </nz-tab>
      </nz-tabset>
      <nz-content>
        <router-outlet></router-outlet>
        <nz-back-top nzTarget="nz-content"></nz-back-top>
      </nz-content>
    </nz-layout>

  </nz-layout>
</nz-layout>
