@if(files && files.length > 0 && !multipleFiles){
    @for (file of files; track file; let idx = $index) {
        <kit-upload-files-file class="" [fileUpload]="file" (validFile)="handleValidFile(idx)" (removeFile)="onRemoveFile(idx)"></kit-upload-files-file>                                
    }  
} @else {
    @if (!invalidFileView || multipleFiles) {
        <div 
            class="p-2 mb-4 border-dashed rounded d-flex flex-column justify-content-center align-items-center gap-2"
            (click)="inputFile.click()"
            (keydown.enter)="inputFile.click()"
            (keydown.space)="$event.preventDefault(); inputFile.click()"
            (dragover)="$event.preventDefault(); $event.stopPropagation(); dragOverActive=true"
            (dragleave)="$event.preventDefault(); $event.stopPropagation(); dragOverActive=false"
            (drop)="handleDrop($event)"
            [ngClass]="{'bg-light-hover': dragOverActive}"
            tabindex="0"
            role="button"
            aria-label="Subir archivo"
            style="cursor: pointer; transition: all 0.3s ease;">
            <lucide-angular [size]="24" [color]="dragOverActive ? '#3048DA' : '#5B62DA'" [img]="iconUpload"></lucide-angular>
            <div [innerHTML]="description"></div>
            <p class="subtitle-download mb-0">{{sizeFile?sizeFile:'10 MB'}} tamaño máximo del archivo Soporta archivos tipo: {{getAllowedFormats()}}</p>
            <!-- Input file con atributo multiple explícito -->
            <input 
                (change)="handleUploadFile($event)"
                type="file"
                hidden
                #inputFile
                [accept]="getAllowedFormats()"
                [multiple]="multipleFiles" />
        </div>
    } @else {
        <div 
            class="p-2 mb-4 border-dashed rounded d-flex flex-column align-items-center gap-2" 
            [class.error]="invalidFileView">
            <div class="d-flex justify-content-end w-100">
                <lucide-angular 
                    [size]="20" 
                    [color]="'#2A323C'" 
                    [img]="iconX" 
                    (click)="onRemoveInvalidFile()">
                </lucide-angular>
            </div>
            <lucide-angular [size]="32" [color]="'#B4271F'" [img]="iconOctagon"></lucide-angular>
            <div>{{fileNameInvalid}}</div>
            <p class="mb-0 subtitle-download--error" >{{message}}</p>
            <p class="subtitle-download--error mb-0 fw-bold">Reintente nuevamente</p>
        </div>
    }
}