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

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

<div aria-label="${input.label}" class="drag-and-drop-upload d-flex flex-column" data-lfr-styles role="group">
	<label class="[#if !input.showLabel || !input.label?has_content]sr-only [/#if]flex-grow-0" id="${fragmentElementId}-drag-and-drop-upload-label">
		${htmlUtil.escape(input.label)}

		<span id="${fragmentElementId}-drag-and-drop-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>

	<div class="overflow-hidden">
		<div class="dropzone h-100 w-100" id="${fragmentElementId}-drag-and-drop-upload-dropzone">
			<div class="dropzone-default-content rounded">
				<img alt="" class="pb-3" role="presentation" src="${themeDisplay.getPortalURL() + themeDisplay.getPathContext() + '/o/fragment-collection-contributor-inputs/drag_drop_illustration.svg'}" />

				<p class="text-4 text-secondary text-weight-semi-bold" id="${fragmentElementId}-drag-and-drop-upload-dropzone-text">
					Drag and Drop or
				</p>

				<div class="position-relative">
					<button aria-describedby="${configuration.showSupportedFileInfo?then(languageUtil.format(locale, "maximum-size-x", input.attributes.maxFileSize!"") + 'MB.', '')} ${input.showHelpText?then(htmlUtil.escape(input.helpText), '' )}" class="btn btn-secondary" id="${fragmentElementId}-drag-and-drop-upload-button" type="button">${htmlUtil.escape(configuration.buttonText)}</button>

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

					<input hidden accept="${(input.attributes.allowedFileExtensions?has_content)?then(input.attributes.allowedFileExtensions, '*')}" class="drag-and-drop-upload-input" formenctype="multipart/form-data" id="${fragmentElementId}-drag-and-drop-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>
			</div>

			<div class="d-none dropzone-no-preview">
				<p class="mb-0 text-4 text-secondary text-weight-semi-bold">
					${languageUtil.get(locale, 'no-preview-available')}
				</p>
			</div>

			<div class="d-none preview-container w-100" id="${fragmentElementId}-drag-and-drop-upload-preview">
				<div id="${fragmentElementId}-drag-and-drop-upload-preview-content"></div>
			</div>
		</div>

		[#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="align-self-start ml-2 mt-0 text-secondary" symbol="question-circle-full" /]
			</div>
		[/#if]
	</div>

	[#if !input.readOnly && ((input.showHelpText && input.helpText?has_content) || (configuration.showSupportedFileInfo && input.attributes.maxFileSize??))]
		<p class="mb-0 mt-1 text-secondary flex-grow-0" id="${fragmentElementId}-drag-and-drop-upload-help-text">${configuration.showSupportedFileInfo?then(languageUtil.format(locale, "maximum-size-x", input.attributes.maxFileSize!"") + '<strong>MB.</strong>', '')} ${input.showHelpText?then(htmlUtil.escape(input.helpText), '' )}</p>
	[/#if]

	<div class="d-none flex-grow-0 py-2" data-change-label="${languageUtil.get(locale, 'change-the-file-the-current-file-is-x')}" data-remove-label="${languageUtil.get(locale, 'remove-the-file-the-current-file-is-x')}" id="${fragmentElementId}-drag-and-drop-upload-preview-buttons">
		<button class="btn btn-monospaced btn-secondary btn-xs lfr-portal-tooltip mr-2" id="${fragmentElementId}-drag-and-drop-upload-change-button" title="${languageUtil.get(locale, 'change-file')}" type="button">
			[@clay["icon"] symbol="change" /]
		</button>

		<button class="btn btn-monospaced btn-secondary btn-xs lfr-portal-tooltip" id="${fragmentElementId}-drag-and-drop-upload-remove-button" title="${languageUtil.get(locale, 'delete-file')}" type="button">
			[@clay["icon"] symbol="trash" /]
		</button>
	</div>

	[#if !input.localizable]
		<label class="d-none text-3 text-secondary text-weight-semi-bold" id="${fragmentElementId}-drag-and-drop-upload-file-name-label" />
	[/#if]
</div>