<!-- resume-filter.component.html -->
<div class="resume-filter-container">
  <div class="filter-controls">
    <div class="search-box">
      <input 
        type="text" 
        [(ngModel)]="filters.search" 
        (input)="applyFilters()"
        placeholder="搜索姓名或职位...">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#7C3AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M21 21L16.65 16.65" stroke="#7C3AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>

    <div class="filter-group">
      <select [(ngModel)]="filters.education" (change)="applyFilters()">
        <option value="">所有学历</option>
        <option value="博士">博士</option>
        <option value="硕士">硕士</option>
        <option value="本科">本科</option>
        <option value="大专">大专</option>
      </select>

      <select [(ngModel)]="filters.experience" (change)="applyFilters()">
        <option value="">所有经验</option>
        <option value="1">1年以上</option>
        <option value="3">3年以上</option>
        <option value="5">5年以上</option>
      </select>

      <select [(ngModel)]="filters.status" (change)="applyFilters()">
        <option value="">所有状态</option>
        <option value="pending">待处理</option>
        <option value="approved">已通过</option>
        <option value="rejected">已拒绝</option>
      </select>
    </div>
  </div>

  <div class="resume-list">
    <div *ngFor="let resume of filteredResumes" class="resume-card">
      <div class="resume-header">
        <div class="avatar">{{ resume.name.charAt(0) }}</div>
        <div class="resume-info">
          <h3>{{ resume.name }}</h3>
          <p>{{ resume.position }} · {{ resume.experience }}年经验</p>
        </div>
        <div class="education-badge">{{ resume.education }}</div>
      </div>

      <div class="resume-skills">
        <span *ngFor="let skill of resume.skills" class="skill-tag">{{ skill }}</span>
      </div>

      <div class="resume-actions">
        <button 
          class="approve" 
          (click)="updateStatus(resume, 'approved')"
          [class.active]="resume.status === 'approved'">
          通过
        </button>
        <button 
          class="reject" 
          (click)="updateStatus(resume, 'rejected')"
          [class.active]="resume.status === 'rejected'">
          拒绝
        </button>
      </div>

      <div class="resume-status" [class.pending]="resume.status === 'pending'" 
                               [class.approved]="resume.status === 'approved'" 
                               [class.rejected]="resume.status === 'rejected'">
        {{ resume.status === 'pending' ? '待处理' : 
           resume.status === 'approved' ? '已通过' : '已拒绝' }}
      </div>
    </div>
  </div>
</div>
