@if (isVisible) {
<div class="team-assignment-modal">
  <!-- 模态框背景 -->
  <div class="modal-backdrop" (click)="closeModalAction()"></div>
  
  <!-- 弹窗内容 -->
  <div class="modal-content">
    <!-- 头部 -->
    <div class="modal-header">
      <h2>分配设计师</h2>
      <button class="close-btn" (click)="closeModalAction()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    
    <!-- 内容区域 -->
    <div class="modal-body">
      <div class="assignment-section">
        <h3 class="section-title">选择设计师</h3>
        <p class="section-subtitle">为项目分配合适的设计师，查看他们的当前任务状态</p>
        
        <!-- 设计师列表 -->
        <div class="designer-list">
          @for (designer of designers; track designer.id) {
            <div class="designer-card" 
                 [class.selected]="selectedDesigner?.id === designer.id"
                 (click)="selectDesigner(designer)">
              <!-- 设计师头像和基本信息 -->
              <div class="designer-info">
                <div class="designer-avatar">
                  <img [src]="designer.avatar" 
                       [alt]="designer.name" 
                       (error)="onImageError($event, designer)"
                       onerror="this.src='/assets/images/default-avatar.svg'" />
                </div>
                <div class="designer-details">
                  <h4 class="designer-name">{{ designer.name }}</h4>
                  <p class="designer-role">{{ designer.role }}</p>
                  <div class="designer-skills">
                    @for (skill of designer.skills; track skill) {
                      <span class="skill-tag">{{ skill }}</span>
                    }
                  </div>
                </div>
              </div>
              
              <!-- 工作负载状态 -->
              <div class="workload-status">
                <div class="workload-indicator" [class]="getWorkloadClass(designer.workload)">
                  <span class="workload-text">{{ getWorkloadText(designer.workload) }}</span>
                  <div class="workload-bar">
                    <div class="workload-fill" [style.width.%]="designer.workload.percentage"></div>
                  </div>
                </div>
              </div>
              
              <!-- 最近任务状态 -->
              <div class="recent-tasks">
                <h5 class="tasks-title">最近任务</h5>
                @if (designer.recentTasks.length > 0) {
                  <div class="task-list">
                    @for (task of designer.recentTasks.slice(0, 2); track task.id) {
                      <div class="task-item">
                        <span class="task-name">{{ task.projectName }}</span>
                        <span class="task-stage" [class]="getTaskStageClass(task.stage)">{{ getStageText(task.stage) }}</span>
                        <span class="task-deadline">{{ formatDeadline(task.deadline) }}</span>
                      </div>
                    }
                  </div>
                } @else {
                  <p class="no-tasks">暂无进行中的任务</p>
                }
              </div>
              
              <!-- 选择指示器 -->
              @if (selectedDesigner?.id === designer.id) {
                <div class="selection-indicator">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
              }
            </div>
          }
        </div>
      </div>
    </div>
    
    <!-- 底部操作区域 -->
    <div class="modal-footer">
      <button class="btn-cancel" (click)="closeModalAction()">取消</button>
      <button class="btn-confirm" 
              [disabled]="!selectedDesigner" 
              (click)="confirmAssignmentAction()">
        确认分配
      </button>
    </div>
  </div>
</div>
}