<div class="neos-inspector-image">
	<div class="typo3-fileupload-dropzone" id="{{unbound view._fileDropZoneId}}">
		<div class="neos-inspector-image-thumbnail">
			<div class="neos-inspector-image-thumbnail-inner">
				{{#if view._inspectorImageUri}}
					<img {{bindAttr src="view._inspectorImageUri"}} alt="" />
				{{else}}
					{{#unless view._uploadInProgress}}
						<img {{bindAttr src="view._defaultUploadPreviewImageSource"}} alt="" class="neos-inspector-image-thumbnail-dummy" />
					{{/unless}}
				{{/if}}
			</div>
		</div>
	</div>

	<div class="neos-inspector-image-upload" id="{{unbound view._containerId}}">
		{{#if view.shouldRenderMediaBrowser}}
			{{view view.SecondaryInspectorButton viewClassBinding="view._mediaBrowserView" class="neos-button-icon" titleBinding="view.mediaLabel" icon="camera" action="_beforeMediaBrowserIsShown" target="view" data-neos-tooltip=""}}
		{{/if}}
		{{#if view.shouldRenderUpload}}
			<button id="{{unbound view._browseButtonId}}" class="neos-button neos-button-icon neos-inspector-image-upload-files" {{bindAttr disabled="view._uploadInProgress:neos-disabled" title="view._fileUploadLabel"}} data-neos-tooltip>
				<i class="fas fa-upload"></i>
			</button>
		{{/if}}
		{{#if view.value}}
			<button class="neos-button neos-button-icon neos-inspector-image-remove-button" {{bindAttr disabled="view._uploadInProgress" title="view.removeButtonLabel"}} {{action "remove" target="view"}} data-neos-tooltip>
				<i class="fas fa-times"></i>
			</button>
		{{/if}}
		{{#if view.shouldRenderCrop}}
			{{view view.SecondaryInspectorButton viewClassBinding="view._cropView" isVisibleBinding="view._uploadPreviewNotShown" class="neos-button-icon neos-inspector-image-crop-button" titleBinding="view.cropLabel" icon="crop" data-neos-tooltip=""}}
		{{/if}}
	</div>
	{{#if view.shouldRenderResize}}
		<div class="neos-inspector-image-width">
			<label {{bindAttr for="view.imageWidthField.elementId"}}>{{translate id='width' fallback='Width'}}:</label>
			<div class="neos-input-prepend neos-input-append">
				<span class="neos-add-on"><label class="neos-checkbox" for="neos-inspector-image-width-check">{{view view.BooleanEditor checkedBinding="view._imageWidthToggle" elementId="neos-inspector-image-width-check"}}</label></span>
				<span>
					{{view Ember.TextField viewName="imageWidthField" type="number" pattern="\d*" step="1" min="0" name="width" valueBinding="view._finalImageDimensions.width"}}
				</span>
				<span class="neos-add-on">px</span>
			</div>
		</div>
		<div class="neos-inspector-image-height">
			<label {{bindAttr for="view.imageHeightField.elementId"}}>{{translate id='height' fallback='Height'}}:</label>
			<div class="neos-input-prepend neos-input-append">
				<span class="neos-add-on"><label class="neos-checkbox" for="neos-inspector-image-height-check">{{view view.BooleanEditor checkedBinding="view._imageHeightToggle" elementId="neos-inspector-image-height-check"}}</span>
				<span>
					{{view Ember.TextField viewName="imageHeightField" type="number" pattern="\d*" step="1" min="0" name="height" valueBinding="view._finalImageDimensions.computedHeight"}}
				</span>
				<span class="neos-add-on">px</span>
			</div>
		</div>
	{{/if}}
</div>
