<!-- company-filter.html -->
<div class="company-filter-container">
  <div class="filter-controls">
    <div class="filter-group">
      <label for="industry">行业</label>
      <select id="industry" [(ngModel)]="selectedIndustry" class="glass-select">
        <option *ngFor="let industry of industries" [value]="industry">{{ industry }}</option>
      </select>
    </div>
    
    <div class="filter-group">
      <label for="region">地区</label>
      <select id="region" [(ngModel)]="selectedRegion" class="glass-select">
        <option *ngFor="let region of regions" [value]="region">{{ region }}</option>
      </select>
    </div>
    
    <div class="filter-group">
      <label>距离: {{ radius }} km</label>
      <input type="range" min="1" max="20" [(ngModel)]="radius" class="range-slider">
    </div>
  </div>
  
  <div class="content-area">
    <div class="company-list">
      <div 
        *ngFor="let company of filteredCompanies" 
        class="company-card"
        [class.highlighted]="company.highlighted"
        (click)="highlightCompany(company)">
        <div class="company-logo">
          <img [src]="company.logo" [alt]="company.name + ' logo'">
        </div>
        <div class="company-info">
          <h3>{{ company.name }}</h3>
          <div class="meta">
            <span class="industry">{{ company.industry }}</span>
            <span class="rating">
              <i class="icon-star"></i>
              {{ company.rating }}
            </span>
          </div>
          <p class="location">
            <i class="icon-pin"></i>
            {{ company.location }} ({{ company.region }})
          </p>
          <div class="distance">
            <i class="icon-location"></i>
            {{ company.distance }} km
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
