<div class="vehicle-tollparking">
  <!-- 📊 Header -->
  <div class="tollparking-header">
    <h3>
      <i class="fas fa-gas-pump"></i>
      Pedágios e Estacionamento
    </h3>
    <div class="tollparking-summary" *ngIf="tollparkingRecords$ | async as records">
      <span class="badge badge-info">
        {{getRecordCount(records)}} {{getRecordCount(records) === 1 ? 'registro' : 'registros'}}
      </span>
      <span class="badge badge-success total-badge">
        <i class="fas fa-calculator"></i>
        Total: {{getTotalValue(records) | currency:'BRL':'symbol':'1.2-2'}}
      </span>
      <span class="badge badge-warning" *ngIf="getLastRecord(records) as lastRecord">
        Último: {{lastRecord.date | date:'dd/MM/yyyy'}}
      </span>
    </div>
  </div>

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

  <!-- ⚠️ Estado Vazio -->
  <div class="empty-state" *ngIf="!loading && !(tollparkingRecords$ | async)?.length">
    <i class="fas fa-gas-pump fa-3x"></i>
    <h4>Nenhum registro encontrado</h4>
    <p>Este veículo não possui registros de pedágios ou estacionamento.</p>
  </div>

  <!-- ❌ Estado de Erro -->
  <div class="error-state" *ngIf="hasError">
    <i class="fas fa-exclamation-triangle fa-2x"></i>
    <h4>Erro ao carregar registros</h4>
    <p>Não foi possível carregar os registros 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> 