@if (visible) {
  <div class="modal-overlay" (click)="close()">
    <div class="modal-container" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>新建项目</h2>
        <button mat-icon-button (click)="close()">
          <mat-icon>close</mat-icon>
        </button>
      </div>
      
      <div class="modal-content">
        <form #projectForm="ngForm" (ngSubmit)="createProject()">
          <!-- 智能体选择 -->
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>选择智能体</mat-label>
            <mat-select [(ngModel)]="projectData.agent_name" name="agent_name" required>
              @for (agent of agents; track agent.value) {
                <mat-option [value]="agent.value">{{ agent.label }}</mat-option>
              }
            </mat-select>
            <mat-hint>选择处理项目的智能体</mat-hint>
          </mat-form-field>
          
          <!-- 项目标题 -->
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>项目标题</mat-label>
            <input matInput [(ngModel)]="projectData.title" name="title" required maxlength="100">
            <mat-hint>输入项目标题，最多100个字符</mat-hint>
          </mat-form-field>
          
          <!-- 项目描述 -->
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>项目描述</mat-label>
            <textarea matInput [(ngModel)]="projectData.description" name="description" rows="4"></textarea>
            <mat-hint>详细描述项目需求和目标</mat-hint>
          </mat-form-field>
          
          <div class="modal-actions">
            <button mat-button type="button" (click)="close()">取消</button>
            <button 
              mat-raised-button 
              color="primary" 
              type="submit"
              [disabled]="!projectForm.valid || isLoading"
            >
              @if (isLoading) {
                <mat-spinner diameter="20"></mat-spinner>
              } @else {
                创建项目
              }
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
}