<div class="page-headline-font pb-2">班组管理</div>

<div class="flex w-full">
  <div class="shift-group-content">
    <div class="type-nav-container">
      <div class="type-nav-box">
        <div class="type-nav">
          <div class="nav-item">
            <div class="nav-item-title">所属部门</div>
            <div class="nav-type">
              @for (department of departments; track department.id) {
                <div
                  class="nav-type-item"
                  [class.active]="department.id === selectedDepartment"
                  (click)="changeDepartment(department.id)"
                >
                  {{ department.name }}
                </div>
              }
            </div>
          </div>
          <div class="nav-item" [style.width]="'75%'">
            <div class="nav-item-title">班组</div>
            <div class="nav-item-content">
              @for (team of teams; track team.id) {
                <div class="nav-category-item" [class.active]="team.id === selectedTeam" (click)="changeTeam(team.id)">
                  <span class="text-block">{{ team.name }} </span>
                </div>
              }
              <div class="nav-category-item">
                <span
                  nz-icon
                  nzType="plus-circle"
                  class="text-xl pr-4 text-primary cursor-pointer hover:opacity-75"
                  (click)="handleAddTeam()"
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-1">
    <div class="flex px-5 justify-between">
      <div class="pt-2 pb-4 text-xl">{{ selectedTeamName }}</div>
      <div class="flex-1 text-right">
        <button class="precaution-secondary ml-2" nz-button nzType="primary" (click)="handleEditTeam()">
          <span nz-icon nzType="edit"></span>
        </button>
        <button class="precaution-danger ml-2" nz-button nzType="primary" (click)="handleDeleteTeam()">
          <span nz-icon nzType="delete"></span>
        </button>
      </div>
    </div>
  </div>
</div>
