<div class="date-range-filter" [class.disabled]="disabled">
  
  <!-- Label do filtro -->
  <div class="filter-label" *ngIf="label">
    <i class="fas fa-calendar-alt"></i>
    <span>{{ label }}</span>
    <span *ngIf="required" class="required">*</span>
  </div>

  <!-- Container dos inputs de data -->
  <div class="date-range-inputs" [class.invalid]="!isValidRange()">
    
    <!-- Data inicial -->
    <div class="date-input-group">
      <label>{{ startPlaceholder }}</label>
      <input 
        type="date"
        [placeholder]="startPlaceholder"
        [required]="required"
        [disabled]="disabled"
        [(ngModel)]="startDate"
        (ngModelChange)="onTouched()"
        class="date-input">
    </div>

    <!-- Separador -->
    <div class="range-separator">
      <i class="fas fa-arrow-right"></i>
      <span>até</span>
    </div>

    <!-- Data final -->
    <div class="date-input-group">
      <label>{{ endPlaceholder }}</label>
      <input 
        type="date"
        [placeholder]="endPlaceholder"
        [required]="required"
        [disabled]="disabled"
        [(ngModel)]="endDate"
        (ngModelChange)="onTouched()"
        class="date-input">
    </div>
  </div>

  <!-- Validação de erro -->
  <div class="validation-error" *ngIf="!isValidRange()">
    <i class="fas fa-exclamation-triangle"></i>
    <span>A data inicial deve ser anterior à data final</span>
  </div>

  <!-- Ações -->
  <div class="filter-actions" *ngIf="hasValue()">
    <button 
      type="button" 
      class="clear-button"
      (click)="clear()"
      [disabled]="disabled">
      <i class="fas fa-times"></i>
      <span>Limpar</span>
    </button>
  </div>

</div> 