<!-- 🎯 FinesListComponent Template -->
<div class="fines-list-container" [style.max-height]="config.maxHeight">
  
  <!-- 📋 Header com Título e Botão Nova Multa -->
  <div class="fines-header">
    <h3 class="fines-title">
      <i class="fas fa-gavel"></i>
      {{ config.title || getDefaultTitle() }}
    </h3>
    
    <button 
      *ngIf="config.showNewButton && !config.readonly"
      class="btn btn-primary new-fine-btn"
      (click)="onNewFineClick()"
      type="button">
      <i class="fas fa-plus"></i>
      Nova Multa
    </button>
  </div>

  <!-- 🏷️ Abas de Filtro por Organização -->
  <div class="filter-tabs" *ngIf="config.showFilters">
    <button 
      *ngFor="let tab of filterTabs"
      class="filter-tab"
      [class.active]="tab.active"
      (click)="setActiveFilter(tab.id)"
      type="button">
      {{ tab.label }}
      <span class="tab-count" *ngIf="tab.count > 0">{{ tab.count }}</span>
      <span class="tab-total" *ngIf="tab.count > 0">{{ getTotalValue(tab.id) }}</span>
    </button>
  </div>

  <!-- 💰 Resumo de Valores Totais -->
  <div class="totals-summary" *ngIf="!state.loading && !state.error && state.fines.length > 0">
    <div class="total-item total-general">
      <span class="total-label">Total Geral:</span>
      <span class="total-value">{{ getGeneralTotal() }}</span>
    </div>
    <div class="total-item total-filtered" *ngIf="config.showFilters">
      <span class="total-label">{{ getFilterLabel(state.activeFilter) }}:</span>
      <span class="total-value">{{ getCurrentFilterTotal() }}</span>
    </div>
  </div>

  <!-- 📊 Conteúdo Principal -->
  <div class="fines-content">
    
    <!-- ⏳ Estado de Carregamento -->
    <div class="loading-state" *ngIf="state.loading">
      <div class="spinner"></div>
      <h4>Carregando multas...</h4>
      <p>Aguarde enquanto buscamos os dados.</p>
    </div>

    <!-- ❌ Estado de Erro -->
    <div class="error-state" *ngIf="state.error && !state.loading">
      <i class="fas fa-exclamation-triangle fa-3x"></i>
      <h4>Erro ao carregar multas</h4>
      <p>{{ state.error }}</p>
      <button class="btn btn-primary" (click)="loadFines()" type="button">
        <i class="fas fa-refresh"></i>
        Tentar Novamente
      </button>
    </div>

    <!-- 📭 Estado Vazio -->
    <div class="empty-state" *ngIf="!state.loading && !state.error && state.filteredFines.length === 0">
      <i class="fas fa-inbox fa-3x"></i>
      <h4>Nenhuma multa encontrada</h4>
      <p *ngIf="state.activeFilter">
        Não há multas {{ getFilterLabel(state.activeFilter).toLowerCase() }} para exibir.
      </p>
      <p *ngIf="!state.activeFilter">
        Não há multas cadastradas para exibir no momento.
      </p>
      
      <button 
        *ngIf="config.showNewButton && !config.readonly"
        class="btn btn-primary"
        (click)="onNewFineClick()"
        type="button">
        <i class="fas fa-plus"></i>
        Cadastrar Nova Multa
      </button>
    </div>

    <!-- 📋 Tabela de Multas -->
    <div class="fines-table-container" *ngIf="!state.loading && !state.error && state.filteredFines.length > 0">
      
      <!-- 📊 Resumo -->
      <div class="fines-summary">
        <span class="summary-text">
          Exibindo {{ state.filteredFines.length }} de {{ state.totalCount }} multas
        </span>
        <span class="summary-total">
          Total: {{ getCurrentFilterTotal() }}
        </span>
      </div>

      <!-- 📋 Tabela -->
      <div class="table-responsive">
        <table class="fines-table">
          <thead>
            <tr>
              <th (click)="sortBy('fine_date')" class="sortable">
                Data
                <i class="fas fa-sort sort-icon"></i>
              </th>
              <th>Local</th>
              <th>Infração</th>
              <th>Condutor</th>
              <th (click)="sortBy('fine_value')" class="sortable">
                Valor
                <i class="fas fa-sort sort-icon"></i>
              </th>
              <th>Status</th>
              <th *ngIf="!config.readonly">Ações</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let fine of paginatedFines; trackBy: trackByFineId" class="fine-row">
              
              <!-- Data -->
              <td class="fine-date">
                {{ formatDate(fine.fine_date) }}
              </td>
              
              <!-- Local -->
              <td class="fine-location">
                <div class="location-info">
                  <span class="location-main">{{ getLocationDisplay(fine) }}</span>
                  <span class="location-org" *ngIf="fine.organization">
                    {{ getOrganizationLabel(fine.organization) }}
                  </span>
                </div>
              </td>
              
              <!-- Infração -->
              <td class="fine-infraction">
                <div class="infraction-info">
                  <span class="infraction-description">{{ fine.notes || 'Não informado' }}</span>
                  <span class="fine-number" *ngIf="fine.fine_number">
                    Nº {{ fine.fine_number }}
                  </span>
                </div>
              </td>
              
              <!-- Condutor -->
              <td class="fine-driver">
                {{ getDriverName(fine) }}
              </td>
              
              <!-- Valor -->
              <td class="fine-value">
                <span class="value-amount">{{ formatCurrency(fine.fine_value) }}</span>
              </td>
              
              <!-- Status -->
              <td class="fine-status">
                <span 
                  class="status-badge"
                  [ngClass]="getStatusClass(fine.status)"
                  [innerHTML]="getStatusLabel(fine.status)">
                </span>
              </td>
              
              <!-- Ações -->
              <td class="fine-actions" *ngIf="!config.readonly">
                <button 
                  class="btn-link action-btn"
                  (click)="onFineSelected(fine)"
                  type="button"
                  title="Ver detalhes">
                  Detalhes
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 📄 Paginação -->
      <div class="pagination-container" *ngIf="totalPages > 1">
        <div class="pagination-info">
          Página {{ state.currentPage }} de {{ totalPages }}
        </div>
        
        <div class="pagination-controls">
          <button 
            class="btn btn-sm"
            [disabled]="state.currentPage <= 1"
            (click)="goToPage(state.currentPage - 1)"
            type="button">
            <i class="fas fa-chevron-left"></i>
          </button>
          
          <span class="page-numbers">
            <button 
              *ngFor="let page of getVisiblePages()"
              class="btn btn-sm page-btn"
              [class.active]="page === state.currentPage"
              (click)="goToPage(page)"
              type="button">
              {{ page }}
            </button>
          </span>
          
          <button 
            class="btn btn-sm"
            [disabled]="state.currentPage >= totalPages"
            (click)="goToPage(state.currentPage + 1)"
            type="button">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
