{extends file=$element.methods->getTemplatePath('general')}

{block name=input append}
	
	{if ini_get('post_max_size')<ini_get('upload_max_filesize')}
		{$maxSize=ini_get('post_max_size')}
	{else}
		{$maxSize=ini_get('upload_max_filesize')}
	{/if}
	
	{if !$element.fileExists}
		<div class="input-file">
			<div class="newFile" id="{$element.id}_newFile" >
				<input type="file"
					class="{if $element.style.CSSClass} {$element.style.CSSClass}{/if} {$element.style.extraCSSClass}"
					id="{$element.id}"
					name="{$element.name}"
					value="{$element.value}"
					{if $element.accept}
						accept="{$element.accept}"
					{/if}

					{if $element.disabled}
						disabled="disabled"
					{/if}

					{if $element['multiple']}
						multiple="multiple"
					{/if}

					style="{if $element.style.height} height:{$element.style.height}px;{/if}
						{if $element.style.width} width:{$element.style.width}px;{/if}"

					{if $element.settings.events.onChange}
						onChange="var element = $(this); {$element.settings.events.onChange|join:";"}"
					{/if}

				/>
				<div style="padding:3px;">
					{$_LANG.formRow.file.maxUpload} ~<strong>{$maxSize}</strong>
				</div>
			</div>
		</div>
	{else}
		<input type="hidden" name="{$element.name}" value="{$element.id}"  />
		<input type="hidden" name="{$element.name}_keepFile" id="{$element.id}_keepFile" value="1"  />

		<div class="input-file">
			<div class="newFile" style="display:none;" id="{$element.id}_newFile" >
				<var class="icon-undo"
					 onclick="
						$('{$element.id}_oldFile').toggle();
						$('{$element.id}_newFile').toggle();
						$('{$element.id}').disabled = true;
						$('{$element.id}_keepFile').value='1';
					"
					tooltip="{$_LANG.formRow.file.cancelUpload}"
				></var>

				<input type="file"
					{if $element.style.CSSClass}
						class="{$element.style.CSSClass}"
					{/if}
					id="{$element.id}"
					name="{$element.name}"
					value="{$element.value}"
					{if $element.accept}
						accept="{$element.accept}"
					{/if}

					{if $element.disabled}
						disabled="disabled"
					{/if}

					{if $element['multiple']}
						multiple="multiple"
					{/if}

					style="{if $element.style.height} height:{$element.style.height}px;{/if}
					{if $element.style.width} width:{$element.style.width}px;{/if}"
				/>
				<div class="maxFileSize">
					{$_LANG.formRow.file.maxUpload} ~<strong>{$maxSize}</strong>
				</div>

			</div>
			<div class="oldFile" id="{$element.id}_oldFile">
				<div>
					<var class="icon-delete"
						onclick="
							$('{$element.id}_oldFile').toggle();
							$('{$element.id}_newFile').toggle();
							$('{$element.id}').disabled=false;
							$('{$element.id}_keepFile').value='';
						"
						tooltip="{$_LANG.formRow.file.deleteCurrent}"
					></var>

					{if $element.fileDownloader}
						<a class="file"
							href="{$element.fileDownloader}"
							tooltip="{$_LANG.download}"
							tabindex="-1"
						>
							<strong>{$element.fileName}</strong>
						</a>
					{else}
						<a class="file"
							href="{$element.filePath}{$element.fileName}"
							tooltip="{$_LANG.download}"
							tabindex="-1"
						>
							<strong>{$element.fileName}</strong>
						</a>
					{/if}
				</div>

				<div class="fileSize">
					{$_LANG['formField']['inputs']['inputFile']['labels']['fileSize']}: <strong>{$element.fileSize|formatFilesize}</strong>
				</div>
			</div>
		</div>
	{/if}
{/block}


<script type="text/javascript">
	{block name=script append}{/block}
</script>
