<div class="multi-select-container" [class.disabled]="disabled">
  
  <!-- Select Trigger -->
  <div 
    class="multi-select-trigger"
    [class.open]="isOpen"
    [class.disabled]="disabled"
    [class.has-value]="hasSelections"
    (click)="toggleDropdown()"
    [attr.tabindex]="disabled ? -1 : 0"
    (keydown.enter)="toggleDropdown()"
    (keydown.space)="toggleDropdown()"
    (focus)="onFocus()"
    (blur)="onBlur()"
  >
    <!-- Label flutuante -->
    <label *ngIf="label" 
           class="multi-select-label" 
           [class.required]="required"
           [class.has-value]="hasSelections || isOpen"
           [class.focused]="isOpen">
      {{ label }}
      <span *ngIf="required" class="required-asterisk">*</span>
    </label>
    <div class="selected-display">
      {{ getSelectedLabels() }}
    </div>
    
    <div class="actions">
      <!-- Clear button -->
      <button 
        *ngIf="hasSelections && !disabled"
        type="button"
        class="clear-btn"
        (click)="clearAll(); $event.stopPropagation()"
        title="Limpar seleção"
      >
        <i class="fas fa-times"></i>
      </button>
      
      <!-- Dropdown arrow -->
      <div class="dropdown-arrow" [class.rotated]="isOpen">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
  </div>

  <!-- Dropdown -->
  <div 
    *ngIf="isOpen" 
    class="multi-select-dropdown"
    #dropdown
    (clickOutside)="closeDropdown()"
  >
    <!-- Header with actions -->
    <div class="dropdown-header" *ngIf="options.length > 1">
      <button 
        type="button"
        class="action-btn"
        (click)="selectAll()"
        [disabled]="!canSelectAll"
        title="Selecionar todos"
      >
        <i class="fas fa-check-square"></i>
        Todos
      </button>
      
      <button 
        type="button"
        class="action-btn"
        (click)="clearAll()"
        [disabled]="!hasSelections"
        title="Limpar seleção"
      >
        <i class="fas fa-times"></i>
        Limpar
      </button>
    </div>

    <!-- Options list -->
    <div class="options-list">
      <div 
        *ngFor="let option of options; trackBy: trackByValue"
        class="option-item"
        [class.selected]="isSelected(option)"
        [class.disabled]="option.disabled"
        (click)="onOptionClick(option, $event)"
      >
        <div class="option-checkbox">
          <i 
            class="fas"
            [class.fa-check-square]="isSelected(option)"
            [class.fa-square]="!isSelected(option)"
          ></i>
        </div>
        
        <div class="option-label">
          {{ option.label }}
        </div>
      </div>
      
      <!-- Empty state -->
      <div *ngIf="options.length === 0" class="empty-state">
        Nenhuma opção disponível
      </div>
    </div>

    <!-- Footer with selection count -->
    <div class="dropdown-footer" *ngIf="hasSelections">
      <span class="selection-count">
        {{ selectedValues.length }} 
        {{ selectedValues.length === 1 ? 'item selecionado' : 'itens selecionados' }}
        <span *ngIf="maxSelections"> / {{ maxSelections }}</span>
      </span>
    </div>
  </div>

  <!-- Backdrop for mobile -->
  <div 
    *ngIf="isOpen" 
    class="backdrop"
    (click)="closeDropdown()"
  ></div>
</div> 