<nz-page-header>

  <nz-page-header-content>
    <div nz-row [nzGutter]="16">
      <div nz-col>
        <nz-avatar nzIcon="user" [nzText]="_passport?.name?.slice(0, 1)" [nzSrc]="_passport?.avatar" [nzSize]="56"></nz-avatar>
      </div>
      <div nz-col [nzFlex]="1">
        <h4 nz-typography nzEllipsis>{{ _greeting }}，{{ _passport?.name }} ^_^！</h4>
        <div nz-typography nzType="secondary" nzEllipsis>
          <ng-container *ngIf="_passport?.jobTitle">
            <ng-container>{{ _passport?.jobTitle }}</ng-container>
            <nz-divider nzType="vertical"></nz-divider>
          </ng-container>
          <ng-container>{{ _passport?.organizationPath }}</ng-container>
        </div>
      </div>
      <div nz-col><img src="/assets/images/index-header.png"></div>
    </div>
  </nz-page-header-content>

  <nz-page-header-footer>
    <div class="ctx-page-content">
      <div nz-row [nzGutter]="[16, 16]">
        <div nz-col [nzXs]="24" [nzLg]="{ span: 8, push: 16 }" [nzXl]="{ span: 6, push: 18 }">

          <nz-card nzTitle="快速导航">
            <div nz-row [nzGutter]="[8, 8]">
              <div nz-col [nzSpan]="6"><a>新建项目</a></div>
              <div nz-col [nzSpan]="6"><a>操作一</a></div>
              <div nz-col [nzSpan]="6"><a>操作二</a></div>
              <div nz-col [nzSpan]="6"><a>操作三</a></div>
              <div nz-col [nzSpan]="6"><a>操作四</a></div>
              <div nz-col [nzSpan]="6"><a>操作五</a></div>
            </div>
          </nz-card>

          <nz-card nzTitle="动态" [nzBodyStyle]="{ padding: '0' }">
            <nz-list>
              <nz-list-item>
                <nz-list-item-meta>
                  <nz-list-item-meta-title>
                    <div nz-typography nzEllipsis><a>【升级】拖车服务V1.0.20200101版本更新</a></div>
                  </nz-list-item-meta-title>
                  <nz-list-item-meta-description>3 天前</nz-list-item-meta-description>
                </nz-list-item-meta>
              </nz-list-item>
              <nz-list-item>
                <nz-list-item-meta>
                  <nz-list-item-meta-title>
                    <div nz-typography nzEllipsis><a>【其它】一港通调拨监管停止服务</a></div>
                  </nz-list-item-meta-title>
                  <nz-list-item-meta-description>3 天前</nz-list-item-meta-description>
                </nz-list-item-meta>
              </nz-list-item>
              <nz-list-item>
                <nz-list-item-meta>
                  <nz-list-item-meta-title>
                    <div nz-typography nzEllipsis><a>【升级】订舱服务V1.0.20200101版本更新</a></div>
                  </nz-list-item-meta-title>
                  <nz-list-item-meta-description>3 天前</nz-list-item-meta-description>
                </nz-list-item-meta>
              </nz-list-item>
            </nz-list>
          </nz-card>

        </div>
        <div nz-col [nzXs]="24" [nzLg]="{ span: 16, pull: 8 }" [nzXl]="{ span: 18, pull: 6 }">

          <nz-card *ngFor="let applicationGroup of _applicationGroupList" [nzTitle]="applicationGroup.name" [nzBodyStyle]="{ padding: '0' }">
            <div *ngFor="let application of applicationGroup.children" nz-card-grid [nzHoverable]="false">
              <div class="_app-name">
                <i nz-icon nzType="appstore" nzTheme="outline"></i>
                <div nz-typography nzEllipsis><span [title]="application.name">{{ application.name }}</span></div>
              </div>
              <div class="_app-description">
                <div nz-typography nzType="secondary" nzEllipsis [nzEllipsisRows]="2">{{ application.description || '暂无应用描述' }}</div>
              </div>
              <div class="_app-actions">
                <button *ngIf="application.authorized" nz-button nzType="primary" [routerLink]="_routeForApplicationIndex + '/' + application.code">进入</button>
                <button *ngIf="!application.authorized" nz-button nzType="dashed" (click)="_applyApplication(application)">申请使用</button>
              </div>
            </div>
          </nz-card>

        </div>
      </div>
    </div>
  </nz-page-header-footer>

</nz-page-header>

<nz-back-top nzTarget=".ctx-page-content"></nz-back-top>
