<!-- 🔐 Password Input Component Template -->
<div [class]="containerClasses">
  
  <!-- 📝 Label -->
  <label 
    class="password-label" 
    [class.required]="isRequired">
    {{ label }}
    <span *ngIf="isRequired" class="required-asterisk">*</span>
  </label>

  <!-- 🎯 Input Container -->
  <div class="input-wrapper">
    
    <!-- 🔒 Password Input -->
    <input
      [type]="inputType"
      [value]="currentValue"
      [placeholder]="placeholder"
      [disabled]="isDisabled"
      [class]="inputClasses"
      [attr.aria-label]="label"
      [attr.aria-required]="isRequired"
      [attr.aria-describedby]="field.key + '-help'"
      (input)="onInput($event)"
      (focus)="onFocus()"
      (blur)="onBlur()"
      autocomplete="new-password"
    />

    <!-- 👁️ Toggle Visibility Button -->
    <button
      *ngIf="shouldShowToggleButton"
      type="button"
      class="toggle-visibility-btn"
      [disabled]="isDisabled"
      [attr.aria-label]="isPasswordVisible ? 'Ocultar senha' : 'Mostrar senha'"
      [title]="isPasswordVisible ? 'Ocultar senha' : 'Mostrar senha'"
      (click)="togglePasswordVisibility()">
      <i [class]="toggleIcon" aria-hidden="true"></i>
    </button>

    <!-- 🔒 Lock Icon (when no toggle) -->
    <div 
      *ngIf="!shouldShowToggleButton && currentValue" 
      class="lock-icon">
      <i class="fas fa-lock" aria-hidden="true"></i>
    </div>

  </div>

  <!-- 📊 Password Strength Indicator -->
  <div 
    *ngIf="shouldShowStrengthIndicator" 
    class="strength-indicator"
    [attr.id]="field.key + '-strength'">
    
    <!-- Strength Bar -->
    <div class="strength-bar">
      <div 
        class="strength-fill"
        [class]="passwordStrength.class"
        [style.width.%]="passwordStrength.percentage">
      </div>
    </div>
    
    <!-- Strength Text -->
    <div class="strength-info">
      <span 
        class="strength-text"
        [class]="passwordStrength.class">
        {{ passwordStrength.text }}
      </span>
      
      <!-- Strength Percentage (optional) -->
      <span 
        *ngIf="passwordStrength.percentage > 0"
        class="strength-percentage">
        ({{ passwordStrength.percentage }}%)
      </span>
    </div>

    <!-- Password Requirements (when focused and weak) -->
    <div 
      *ngIf="isFocused && passwordStrength.score < 3 && currentValue"
      class="password-requirements">
      <div class="requirements-title">
        <i class="fas fa-info-circle"></i>
        Sua senha deve conter:
      </div>
      <ul class="requirements-list">
        <li [class.met]="hasMinLength()">
          <i [class]="getRequirementIcon(hasMinLength())"></i>
          Pelo menos 8 caracteres
        </li>
        <li [class.met]="hasLowercase()">
          <i [class]="getRequirementIcon(hasLowercase())"></i>
          Uma letra minúscula
        </li>
        <li [class.met]="hasUppercase()">
          <i [class]="getRequirementIcon(hasUppercase())"></i>
          Uma letra maiúscula
        </li>
        <li [class.met]="hasNumber()">
          <i [class]="getRequirementIcon(hasNumber())"></i>
          Um número
        </li>
        <li [class.met]="hasSpecialChar()">
          <i [class]="getRequirementIcon(hasSpecialChar())"></i>
          Um caractere especial (&#64;$!%*?&amp;)
        </li>
      </ul>
    </div>
  </div>

  <!-- 💡 Help Text -->
  <div 
    *ngIf="field.helpText" 
    class="help-text"
    [attr.id]="field.key + '-help'">
    <i class="fas fa-info-circle"></i>
    {{ field.helpText }}
  </div>

  <!-- ⚠️ Error Messages -->
  <!-- Nota: As mensagens de erro são tratadas pelo GenericTabFormComponent -->
  
</div>

<!-- 🎯 Accessibility: Screen Reader Only Text -->
<div class="sr-only" [attr.id]="field.key + '-description'">
  Campo de senha {{ isRequired ? 'obrigatório' : 'opcional' }}.
  {{ field.showStrengthIndicator ? 'Inclui indicador de força da senha.' : '' }}
  {{ field.allowToggleVisibility ? 'Use o botão para mostrar ou ocultar a senha.' : '' }}
</div>
