<div @verticalInOutRelative class="datav-header">
  <div class="headline">
    <div class="title-font font-pangmen gradient-text select-none">{{ title }}</div>
  </div>
  <div class="flex flex-1">
    @for (screen of screens; track screen) {
      <div class="screen-item" [class.active]="currentScreen === screen.value" (click)="onScreenChange(screen.value)">
        <div [class.gradient-text]="currentScreen === screen.value">
          {{ screen.label }}
        </div>
      </div>
    }
  </div>
  <div class="flex-center pr-8" style="line-height: var(--datav-header-height)">
    @if (now) {
      <span class="text-white text-xl">
        <span>{{ now | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
        <span class="ml-2">星期{{ weekDayText }}</span>
      </span>
      <span class="separator"></span>
    }
    <span class="action-icon text-2xl" nz-icon nzType="icons:datav/notification" nzTheme="outline"></span>

    <span
      nz-dropdown
      [nzDropdownMenu]="menu"
      [nzOverlayStyle]="{ top: '12px' }"
      nzOverlayClassName="datav-dropdown"
      class="text-2xl ml-5 action-icon"
      nz-icon
      nzType="icons:datav/setting"
      nzTheme="outline"
    ></span>
  </div>
</div>

<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu nzSelectable>
    <li nz-menu-item (click)="toManager($event)">管理后台</li>
  </ul>
</nz-dropdown-menu>
