[#assign
	disabled = input.attributes.disabled?? && input.attributes.disabled,
	localFileUploaded = false,
	showDocumentLibrarySelector = input.attributes.selectFromDocumentLibrary?? && input.attributes.selectFromDocumentLibrary
]

[#if input.value?? && !showDocumentLibrarySelector]
	[#assign localFileUploaded = true]
[/#if]

<div class="file-upload">
	<div class="form-group [#if input.errorMessage?has_content]has-error[/#if] mb-0">
		<label class="[#if !input.showLabel || !input.label?has_content]sr-only[/#if]" id="${fragmentElementId}-file-upload-label">
			${htmlUtil.escape(input.label)}

			<span id="${fragmentElementId}-file-upload-read-only" class="[#if !input.readOnly]d-none[/#if]">(${languageUtil.get(locale, "read-only")})</span>

			[#if input.required][@clay["icon"] className="reference-mark" symbol="asterisk" /][/#if]
		</label>

		[#if input.readOnly]
			<input class="form-control" aria-labelledby="${fragmentElementId}-file-upload-label" class="form-control" id="${fragmentElementId}-file-upload" name="${input.name}" placeholder="${languageUtil.get(locale, "no-file-selected")}" readonly type="text" [#if input.attributes.fileName??]value="${htmlUtil.escape(input.attributes.fileName)}"[/#if] />
		[#else]
			<div class="align-items-center d-flex">
				<div class="position-relative">
					<button class="btn btn-secondary" id="${fragmentElementId}-file-upload-button-label" type="button">[@clay["icon"] className="inline-item-before" symbol="upload" /] ${htmlUtil.escape(configuration.buttonText)}</button>

					<input id="${fragmentElementId}-file-upload-hidden" [#if localFileUploaded]name="${input.name}"[/#if] type="hidden" value="${input.value?has_content?then(input.value, '')}" />

					<input accept="${(input.attributes.allowedFileExtensions?has_content)?then(input.attributes.allowedFileExtensions, '*')}" aria-describedby="${fragmentElementId}-file-upload-help-text" aria-labelledby="${fragmentElementId}-file-upload-label ${fragmentElementId}-file-upload-button-label [#if  input.errorMessage?has_content]${fragmentElementId}-file-upload-error-message[/#if]" class="file-upload-input sr-only" formenctype="multipart/form-data" id="${fragmentElementId}-file-upload" [#if !localFileUploaded]name="${input.name}"[/#if] ${input.required?then('required', '' )} type="${showDocumentLibrarySelector?then('text', 'file')}" [#if input.value??]value="${input.value}"[/#if] tabIndex="-1" />
				</div>

				<strong aria-label="${htmlUtil.escape(input.label)}" class="forms-file-upload-file-name pl-2" data-placeholder="${languageUtil.get(locale, "no-file-selected")}" role="textbox" value="">
					[#if input.attributes.fileName??]${htmlUtil.escape(input.attributes.fileName)}[/#if]
				</strong>

				<button class="btn btn-monospaced btn-outline-borderless btn-outline-secondary d-none lfr-portal-tooltip" [#if disabled]disabled[/#if] id="${fragmentElementId}-file-upload-remove-button" title="${languageUtil.get(locale, 'remove-item')}" type="button">
					[@clay["icon"] symbol="times-circle-full" /]
				</button>

				[#if !input.localizable && input.attributes.unlocalizedFieldsMessage??]
					<div aria-label="${input.attributes.unlocalizedFieldsMessage}" class="d-none lfr-portal-tooltip" data-title="${input.attributes.unlocalizedFieldsMessage}" id="${fragmentElementId}-unlocalized-info" role="dialog" tabindex="0">
						[@clay["icon"] className="ml-2 mt-0 text-secondary" symbol="question-circle-full" /]
					</div>
				[/#if]
			</div>
		[/#if]

		<p class="font-weight-semi-bold mt-1 text-danger[#if !input.errorMessage?has_content] sr-only[/#if]" id="${fragmentElementId}-file-upload-error">
			[@clay["icon"] symbol="info-circle" /]

			<span data-file-size-feedback="${languageUtil.format(locale, "please-enter-a-file-with-a-valid-file-size-no-larger-than-x-mb", input.attributes.maxFileSize!"")}" id="${fragmentElementId}-file-upload-error-message" role="alert">
				[#if input.errorMessage?has_content]
					${input.errorMessage}
				[/#if]
			</span>
		</p>

		[#if !input.readOnly && ((input.showHelpText && input.helpText?has_content) || (configuration.showSupportedFileInfo && input.attributes.allowedFileExtensions?? && input.attributes.maxFileSize??))]
			<p class="mb-0 mt-1 text-secondary" id="${fragmentElementId}-file-upload-help-text">
				[#if configuration.showSupportedFileInfo ]
					[#if input.attributes.allowedFileExtensions?? && input.attributes.allowedFileExtensions == "*" ]
						${languageUtil.format(locale, "upload-a-file-no-larger-than-x-mb", [input.attributes.maxFileSize!""])}
					[#else]
						${languageUtil.format(locale, "upload-a-x-no-larger-than-x-mb", [input.attributes.allowedFileExtensions!"", input.attributes.maxFileSize!""])}
					[/#if]
				[/#if]

				${input.showHelpText?then(htmlUtil.escape(input.helpText), '' )}
			</p>
		[/#if]
	</div>
</div>