<div class="account-payable-items">
  <!-- 📊 Header -->
  <div class="items-header">
    <h3>
      <i class="fas fa-list-ul"></i>
      Itens da Conta a Pagar
    </h3>
    <div class="items-summary" *ngIf="items$ | async as items">
      <span class="badge badge-info">
        {{items.length}} {{items.length === 1 ? 'item' : 'itens'}}
      </span>
      <span class="badge badge-warning" *ngIf="getDiscountValue(items) > 0">
        Desconto: {{getDiscountValue(items) | currency:'BRL':'symbol':'1.2-2'}}
      </span>
      <span class="badge badge-secondary" *ngIf="getTotalValue(items) > 0">
        Total: {{getTotalValue(items) | currency:'BRL':'symbol':'1.2-2'}}
      </span>
    </div>
  </div>

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

  <!-- ⚠️ Estado Vazio -->
  <div class="empty-state" *ngIf="!loading && !(items$ | async)?.length">
    <i class="fas fa-inbox fa-3x"></i>
    <h4>Nenhum item encontrado</h4>
    <p>Esta conta a pagar não possui itens de composição.</p>
  </div>

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