@if (errorState || errors.length) {
    <ng-content select="nx-error"></ng-content>
}

<ng-content select="nx-label"></ng-content>
<ng-content select="[nxFileUploadHint]"></ng-content>
<ng-content select="nx-file-uploader-drop-zone"></ng-content>
<ng-content select="[nxFileUploadButton]"></ng-content>
<input
    #nativeInputFile
    type="file"
    [attr.multiple]="multiple || null"
    [attr.disabled]="disabled || null"
    [attr.accept]="accept"
    (change)="_onFileChange($event)"
    [id]="_inputId"
/>
@if (value && value.length > 0) {
    <div class="nx-file-uploader--file-list nx-margin-bottom-m" role="list" [attr.aria-label]="_templateContext.uploadedListLabel">
        @for (file of value; track file) {
            <div
                #fileRowElement
                class="nx-file-uploader--file-row"
                [class.nx-file-uploader--file-state-uploading]="file.isUploading"
                [class.nx-file-uploader--default-template]="!_itemTemplate"
                role="listitem"
                (keydown)="_handleKeydownListRow($event)"
            >
                <ng-container
                    *ngTemplateOutlet="_itemTemplate ? _itemTemplate : defaultFileRow; context: { templateContext: _templateContext, file: file }"
                ></ng-container>
            </div>
        }
    </div>
}

<ng-template #defaultFileRow let-templateContext="templateContext" let-file="file">
    <nx-file-upload-name [name]="file?.name"></nx-file-upload-name>

    <nx-file-upload-size [size]="file?.size" [isUploading]="file.isUploading" [uploadingLabel]="templateContext.uploadingLabel"></nx-file-upload-size>

    <div class="nx-file-uploader--file-row-actions">
        <nx-file-upload-status
            [isUploading]="file.isUploading"
            [isUploaded]="file.isUploaded"
            [uploadedLabel]="templateContext.uploadedLabel"
        ></nx-file-upload-status>

        <nx-file-upload-delete [deleteLabel]="templateContext.deleteLabel" [isUploading]="file.isUploading" (click)="removeFile(file)"></nx-file-upload-delete>
    </div>
</ng-template>