@if (activeFieldVersion == true) {
    <w-input-label [label]="label" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [required]="required" [validated]="isValid()"></w-input-label>
    @if (label != undefined && label.length > 0) {
        <div class="input-label-gap-divider"></div>
    }
}
@if (allowMultipleImages == false) {
    <p-fileUpload #fileUploadOnlyImage class="w-image-file-button"
        [ngClass]="{'w-image-file-uploader' : activeFieldVersion == false, 
                    'w-image-file-uploader-no-image' : (onlyCroppedImageSelected == null || undefined ) && (imageSingleMode == null || undefined), 
                    'w-image-file-uploader-field' : activeFieldVersion == true,
                    'w-image-file-uploader-field-no-image' : activeFieldVersion == true && (onlyCroppedImageSelected == null || undefined ) && (imageSingleMode == null || undefined)}"
        mode="advanced" [accept]="imageUploadConfig.acceptImageTypes" [multiple]="false"
        [invalidFileSizeMessageSummary]="imageUploadConfig.invalidFileSizeMessageSummary + ':'"
        [invalidFileSizeMessageDetail]="imageUploadConfig.invalidFileSizeMessageDetail + ' ' + fileSizeService.formatSizeMessage() + '.'"
        [invalidFileTypeMessageSummary]="imageUploadConfig.invalidFileTypeMessageSummary + ':'"
        [invalidFileTypeMessageDetail]="imageUploadConfig.invalidFileTypeMessageDetail + ': {0}.'"
        (onSelect)="onCustomUploadSingleMode($event)"
        [uploadLabel]="onlyCroppedImageSelected ? (onlyCroppedImageSelected.name.length>6)? (onlyCroppedImageSelected.name | slice:0:6)+'...':(onlyCroppedImageSelected.name) : ''"
        [customUpload]="true" (uploadHandler)="onCustomizeUploadFunctionSingleMode($event)"
        [maxFileSize]="actualMaxSize" 
        [styleClass]="activeMessagesOverlay ? 'w-image-file-message' : ''">
        <ng-template pTemplate="content" let-messages="messages">
            @if (false) {
                <p-progressbar></p-progressbar>
            }
            @for (message of messages; track message) {
                <p-message [severity]="message.severity" closable [life]="timelife" (onClose)="onMessagesClosed($event)">{{message.text}}</p-message>
            }
            @if ((onlyCroppedImageSelected != null || undefined) || (imageSingleMode != null || undefined)) {
                <p-galleria [ngClass]="getGalleryClass()"
                            [value]="(onlyCroppedImageSelected !== null) ? [onlyCroppedImageSelected.fileBase64] : (imageUploadConfig.singleModeImageDefault ? [imageUploadConfig.singleModeImageDefault] : (imageSingleMode ? [imageSingleMode] : ['https://wappingstoragedev.blob.core.windows.net/wapping/appresources/ic_image_blue.png']))"
                            [responsiveOptions]="carouselImagesResponsiveOptions"
                            [containerStyle]="{ 'max-width': '100%', 'max-height':'100%'}" [numVisible]="1"
                            [showItemNavigators]="false" [showThumbnails]="false" [showIndicators]="false">
                    <ng-template #item let-item>
                        <div class="w-image-file-uploader-delete-button">
                            @if(allowDeleteImage == true){
                                <w-button buttonClass="w-image-file-uploader-delete-button-icon" icon="pi pi-trash" type="text" (click)="removeImageSingleMode($event, onlyImageSelected)"></w-button>
                            }
                        </div>
                        <div class="image-container"
                            [ngStyle]="{'height': activeFieldVersion ? '280px' : customHeightImg ? customHeightImg + 'px' : 'auto'}">
                            <img [src]="item"/>
                        </div>
                    </ng-template>
                </p-galleria>
            }
            @if (viewSingleMode == false) {
                <div (click)="openSingleImageFileSelector()"
                    class="w-image-file-uploader-space-container flex flex-column justify-content-center align-items-center"
                    style="cursor: pointer; gap: 0px;"
                    [ngClass]="{'w-image-file-uploader-container-height w-image-file-uploader-container-bottom' : (onlyCroppedImageSelected == null || undefined ) && (imageSingleMode == null || undefined) && activeFieldVersion == false, 'w-image-file-uploader-field-container-height' : activeFieldVersion == true && (onlyCroppedImageSelected == null || undefined ) && (imageSingleMode == null || undefined), 'no-reduced': !fieldVersionReduced,  
                                'w-image-file-uploader-container-bottom': onlyCroppedImageSelected != null || fieldVersionReduced}">
                    <span class="pi pi-upload subtitle1 textMainColor"></span>
                    <span class="subtitle1 textMainColor m-0">
                        {{imageUploadConfig.contentHeaderLabel}}
                    </span>
                    <span class="body textMainColor m-0">
                        {{ imageUploadConfig.contentSubheaderLabel }}
                    </span>
                </div>
            } @else {
                @if (imageSingleMode == null || undefined) {
                    <div class="textSoftColor flex justify-content-center align-items-center w-image-file-uploader-container-height">
                        {{imageUploadConfig.viewModecontentLabel}}
                    </div>
                }
            }
        </ng-template>
    </p-fileUpload>
} @else {
    <p-fileupload #fileUpload class="w-image-file-button"
        [ngClass]="{'w-image-file-uploader' : activeFieldVersion == false, 
                    'w-image-file-uploader-no-image' : (imagesAlreadyUploaded.length == 0 || undefined ) || (imagesAlreadyUploaded == null || undefined), 
                    'w-image-file-uploader-field' : activeFieldVersion == true,
                    'w-image-file-uploader-field-no-image' : activeFieldVersion == true && (imagesAlreadyUploaded.length == 0 || undefined ) || (imagesAlreadyUploaded == null || undefined)}"
        name="mediaImages[]"
        [accept]="imageUploadConfig.acceptImageTypes"
        mode="advanced"
        [customUpload]="true"
        (onSelect)="onCustomUploadMultiMode($event)"
        (uploadHandler)="onCustomizeUploadFunctionMultiMode($event)"
        [uploadLabel]="imageUploadConfig.uploadButtonLabel ?? ''"
        [chooseLabel]="imageUploadConfig.chooseButtonLabel ?? ''"
        [cancelLabel]="imageUploadConfig.cancelButtonLabel ?? ''"
        [showUploadButton]="activeImageUpload"
        [showCancelButton]="activeImageUpload"
        [auto]="imageUploadConfig.allowAuto"
        [multiple]="true"
        [maxFileSize]="actualMaxSize"
        [invalidFileSizeMessageSummary]="imageUploadConfig.invalidFileSizeMessageSummary + ':'"
        [invalidFileSizeMessageDetail]="imageUploadConfig.invalidFileSizeMessageDetail + ' ' + fileSizeService.formatSizeMessage() + '.'"
        [invalidFileTypeMessageSummary]="imageUploadConfig.invalidFileTypeMessageSummary + ':'"
        [invalidFileTypeMessageDetail]="imageUploadConfig.invalidFileTypeMessageDetail + ': {0}.'" 
        [styleClass]="activeMessagesOverlay ? 'w-image-file-message' : ''"
        [chooseStyleClass]="'p-button-icon p-button-icon-right'"> 
        <ng-template let-files let-i="index" let-messages="messages" #content>
            @for (message of messages; track message) {
                <p-message [severity]="message.severity" closable [life]="timelife" (onClose)="onMessagesClosed($event)">{{message.text}}</p-message>
            }
            @if (isUploadingMultiMode) {
                <p-progressbar class="p-element ng-star-inserted" [mode]="'indeterminate'">
                    <div role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" data-pc-name="progressbar"
                        data-pc-section="root" class="p-progressbar p-component p-progressbar-determinate">
                        <div class="p-progressbar-value p-progressbar-value-animate ng-star-inserted"
                            style="display: flex; width: 0%;" data-pc-section="value"></div>
                    </div>
                </p-progressbar>
            }

            @if (activeImageUpload && cropperImages.length > 0) {
                <div class="w-image-file-loader">
                    @for (file of files; track file.name; let i = $index) {
                        <div class="container">
                            <div class="image">
                                <img role="presentation" [alt]="file.name" [src]="file.objectURL" width="50"/>
                            </div>
                            <span class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden">{{ file.name }}</span>
                            <div>{{ file.size }}</div>
                            <w-button icon="pi pi-times" type="text" buttonClass="w-table-button w-table-button-delete" (onClick)="onDeleteFileMultiMode($event, file, fileUpload)"></w-button>
                        </div>
                    }
                </div>
            }

            @if (imagesAlreadyUploaded.length > 0) {
                <p-galleria [ngClass]="getGalleryClass()"
                    [value]="imagesAlreadyUploaded" 
                    [(activeIndex)]="activeIndexGallery"
                    [responsiveOptions]="carouselImagesResponsiveOptions" 
                    [containerStyle]="{ 'max-width': '100%', 'max-height':'100%'}"
                    [numVisible]="1" 
                    [showThumbnailNavigators]="false" 
                    [showItemNavigators]="true">
                    <ng-template #item let-item>
                        <div class="w-image-file-uploader-delete-button">
                            @if(allowDeleteImage == true){
                                <w-button buttonClass="w-image-file-uploader-delete-button-icon" icon="pi pi-trash" type="text" (onClick)="confirmDeleteImageMultiMode($event, item)" [loading]="isDeletingMultiMode"></w-button>
                            }
                        </div>
                        <div class="image-container"
                            [ngStyle]="{'height': activeFieldVersion ? '280px' : customHeightImg ? customHeightImg + 'px' : 'auto'}">
                            <img [src]="readProperty(item, imageUploadConfig.imagePropertyNames[0]) ?? item.fileBase64"/>
                        </div>
                        <div class="w-image-file-uploader-move-buttons">
                            @if (viewMultiMode == false && activePositionProperty == true) {
                                <div class="w-image-file-uploader-multi-action-button"
                                    [ngClass]="{'w-image-file-uploader-hide-move-button' : findIndex(item) == 0 || disableMoveButtons}"
                                    (click)="moveImageToLeft(item)">
                                    <w-icons name="doubleArrowLeft" class="w-image-file-uploader-arrow" [height]="10" [width]="10"
                                        [color]="'white'"></w-icons>
                                </div>
                            }
                            @if (isDeletingMultiMode == false) {
                                <div class="w-image-file-uploader-multi-images-index flex align-items-center justify-content-center">
                                    {{ findIndex(item) + 1 }} / {{ imagesAlreadyUploaded.length }}
                                </div>
                            } @else {
                                <div class="w-image-file-uploader-multi-images-index flex align-items-center justify-content-center"> - / - </div>
                            }
                            @if (viewMultiMode == false && activePositionProperty == true) {
                                <div class="w-image-file-uploader-multi-action-button"
                                    [ngClass]="{'w-image-file-uploader-hide-move-button' : (findIndex(item) == imagesAlreadyUploaded.length-1) || disableMoveButtons}"
                                    (click)="moveImageToRight(item)">
                                    <w-icons name="doubleArrowRight" class="w-image-file-uploader-arrow" [height]="10" [width]="10"
                                        [color]="'white'"></w-icons>
                                </div>
                            }
                        </div>
                    </ng-template>
                </p-galleria>
            }

            @if (viewMultiMode == false) {
                <div (click)="openImageFileSelector()"
                    class="w-image-file-uploader-space-container flex flex-column justify-content-center align-items-center"
                    style="cursor: pointer; gap: 0px;"
                    [ngClass]="{'w-image-file-uploader-container-height' : (imagesAlreadyUploaded.length == 0 || undefined ) || (imagesAlreadyUploaded == null || undefined) && activeFieldVersion == false, 'w-image-file-uploader-field-container-height' : activeFieldVersion == true && (imagesAlreadyUploaded.length == 0 || undefined ) || (imagesAlreadyUploaded == null || undefined), 'no-reduced': !fieldVersionReduced, 
                                            'w-image-file-uploader-container-bottom' : imagesAlreadyUploaded.length > 0 || fieldVersionReduced}">
                    <span class="pi pi-upload subtitle1 textMainColor"></span>
                    <span class="subtitle1 textMainColor m-0">
                        {{imageUploadConfig.contentHeaderLabel}}
                    </span>
                    <span class="body textMainColor m-0">
                        {{ imageUploadConfig.contentSubheaderLabel }}
                    </span>
                </div>
            } @else {
                @if (imagesAlreadyUploaded.length == 0) {
                    <div class="w-image-file-uploader-view-mode-no-content textSoftColor">
                        {{imageUploadConfig.viewModecontentLabel}}
                    </div>
                }
            }
        </ng-template>
    </p-fileupload>
}

<p-confirmpopup></p-confirmpopup>