<div class="table-container show" style="margin-top:16px; border:1px solid #ddd; border-radius:4px; background:#fff;">
  <div style="padding:8px 12px; font-size:12px; color:#666; display:flex; align-items:center; gap:8px;">
    <label style="display:flex; align-items:center; gap:6px;">
      <input type="checkbox" [(ngModel)]="showPastForecast" (ngModelChange)="build()"> 显示历史预报
    </label>
  </div>
  <div style="overflow-x:auto;">
    <table class="min-w-full text-sm text-center" style="width:100%; border-collapse:collapse;">
      <thead>
        <tr>
          <th *ngFor="let h of headers" style="border:1px solid #ddd; padding:12px 8px; background:#f8f9fa; font-weight:bold;">{{h}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let r of rows" [style.background-color]="r.isForecast ? 'rgba(255,165,0,0.08)' : ''">
          <td style="border:1px solid #ddd; padding:12px 8px;">
            <div>
              {{ r.date_time }}
              <span *ngIf="r.isForecast" class="text-xs text-orange-500">[预报]</span>
            </div>
            <div *ngIf="r.isForecast" class="text-xs text-gray-500">（发布: {{ r.issued_hhmm || '-' }}{{ r.lead_hours!=null ? ' +' + r.lead_hours + 'h' : '' }}）</div>
          </td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.temperature}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.humidity}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.pressure}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.wind_speed}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.wind_direction}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.rainfall}}</td>
          <td *ngIf="headers.includes('降水概率 (%)')" style="border:1px solid #ddd; padding:12px 8px;">{{r.precip_prob ?? '-'}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.light}}</td>
          <td style="border:1px solid #ddd; padding:12px 8px;">{{r.uv}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
