<div class="vehicle-devicetracker">
  <!-- 📊 Header -->
  <div class="devicetracker-header">
    <h3>
      <i class="fas fa-location-dot"></i>
      Rastreadores
    </h3>
    <div class="devicetracker-summary" *ngIf="devicetrackerRecords$ | async as records">
      <span class="badge badge-info">
        {{getRecordCount(records)}} {{getRecordCount(records) === 1 ? 'dispositivo' : 'dispositivos'}}
      </span>
      <span class="badge badge-success" *ngIf="getActiveDevices(records) as activeDevices">
        <i class="fas fa-signal"></i>
        {{activeDevices.length}} {{activeDevices.length === 1 ? 'ativo' : 'ativos'}}
      </span>
      <span class="badge badge-warning" *ngIf="getLastUpdate(records) as lastUpdate">
        Última atualização: {{lastUpdate.lastUpdateAt | date:'dd/MM/yyyy HH:mm'}}
      </span>
    </div>
  </div>

  <!-- 📋 Data Table -->
  <app-data-table
    [config]="{ columns: columns }"
    [data]="(devicetrackerRecords$ | async) || []"
    [loading]="loading"
    [showFilters]="true"
    [serverSidePagination]="false">
  </app-data-table>

  <!-- ⚠️ Estado Vazio -->
  <div class="empty-state" *ngIf="!loading && !(devicetrackerRecords$ | async)?.length">
    <i class="fas fa-location-dot fa-3x"></i>
    <h4>Nenhum rastreador encontrado</h4>
    <p>Este veículo não possui rastreadores instalados.</p>
  </div>

  <!-- ❌ Estado de Erro -->
  <div class="error-state" *ngIf="hasError">
    <i class="fas fa-exclamation-triangle fa-2x"></i>
    <h4>Erro ao carregar rastreadores</h4>
    <p>Não foi possível carregar os rastreadores deste veículo. Tente novamente.</p>
    <button class="btn btn-outline-primary" (click)="retryLoad()">
      <i class="fas fa-sync-alt"></i>
      Tentar Novamente
    </button>
  </div>
</div> 