<div class="device-modal" *ngIf="modalOpen" (click)="close()" style="position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:2000">
  <div class="device-modal-content" (click)="$event.stopPropagation()" style="background:#fff;width:80%;max-width:640px;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:70vh;">
    <div class="device-list-header" style="padding:12px 16px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;">
      <div class="text-sm">设备列表</div>
      <button (click)="close()" class="text-xl leading-none">×</button>
    </div>
    <div class="device-list" style="flex:1;overflow:auto;">
      <button class="device-item" *ngFor="let s of pageItems" (click)="choose(s)" style="padding:10px 16px;border-bottom:1px solid #f5f5f5;display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;">
        <div>
          <div class="text-sm" *ngIf="s.location">{{s.location}}</div>
          <div class="text-xs text-gray-500">设备编号：{{s.station_id}}</div>
        </div>
        <div class="text-xs" [class.text-green-600]="isOnline(s)" [class.text-gray-500]="!isOnline(s)">{{ isOnline(s) ? '在线' : '离线' }}</div>
      </button>
    </div>
    <div class="device-list-footer" style="padding:10px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;">
      <div class="pagination text-xs text-gray-600">第 {{currentPage}} 页，共 {{totalPages}} 页</div>
      <div class="flex gap-2">
        <button class="px-2 py-1 border rounded" (click)="prev()" [disabled]="currentPage<=1">上一页</button>
        <button class="px-2 py-1 border rounded" (click)="next()" [disabled]="currentPage>=totalPages">下一页</button>
      </div>
    </div>
  </div>
</div>
