From a63f9b9736e0b902380677108b4b8387e761511f Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Thu, 2 Aug 2018 18:07:06 +0200
Subject: [PATCH] Add frontend templates

See #2509
---
 com.woltlab.wcf/templates/__aclFormField.tpl  |  9 +++++
 .../templates/__booleanFormField.tpl          | 14 ++++++++
 com.woltlab.wcf/templates/__dateFormField.tpl | 14 ++++++++
 com.woltlab.wcf/templates/__dialogForm.tpl    | 36 +++++++++++++++++++
 com.woltlab.wcf/templates/__form.tpl          | 26 ++++++++++++++
 com.woltlab.wcf/templates/__formContainer.tpl | 22 ++++++++++++
 .../templates/__formContainerChildren.tpl     |  5 +++
 .../templates/__formContainerDependencies.tpl |  7 ++++
 .../templates/__formFieldDependencies.tpl     |  7 ++++
 .../templates/__formFieldDescription.tpl      |  3 ++
 .../templates/__formFieldError.tpl            |  1 +
 .../templates/__formFieldErrors.tpl           |  3 ++
 .../templates/__formFieldFooter.tpl           |  5 +++
 .../templates/__formFieldHeader.tpl           |  3 ++
 com.woltlab.wcf/templates/__iconFormField.tpl | 28 +++++++++++++++
 .../templates/__itemListFormField.tpl         | 17 +++++++++
 .../templates/__multilineTextFormField.tpl    |  9 +++++
 .../__multipleSelectionFormField.tpl          | 33 +++++++++++++++++
 .../__nonEmptyFormFieldDependency.tpl         |  7 ++++
 .../templates/__numericFormField.tpl          | 26 ++++++++++++++
 .../templates/__radioButtonFormField.tpl      |  7 ++++
 .../templates/__singleSelectionFormField.tpl  | 35 ++++++++++++++++++
 .../templates/__tabFormContainer.tpl          | 11 ++++++
 .../templates/__tabMenuFormContainer.tpl      | 22 ++++++++++++
 .../templates/__tabTabMenuFormContainer.tpl   | 16 +++++++++
 com.woltlab.wcf/templates/__tagFormField.tpl  | 21 +++++++++++
 com.woltlab.wcf/templates/__textFormField.tpl | 20 +++++++++++
 com.woltlab.wcf/templates/__userFormField.tpl | 22 ++++++++++++
 .../templates/__usernameFormField.tpl         | 16 +++++++++
 .../templates/__valueFormFieldDependency.tpl  |  8 +++++
 .../templates/__wysiwygFormField.tpl          | 18 ++++++++++
 31 files changed, 471 insertions(+)
 create mode 100644 com.woltlab.wcf/templates/__aclFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__booleanFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__dateFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__dialogForm.tpl
 create mode 100644 com.woltlab.wcf/templates/__form.tpl
 create mode 100644 com.woltlab.wcf/templates/__formContainer.tpl
 create mode 100644 com.woltlab.wcf/templates/__formContainerChildren.tpl
 create mode 100644 com.woltlab.wcf/templates/__formContainerDependencies.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldDependencies.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldDescription.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldError.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldErrors.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldFooter.tpl
 create mode 100644 com.woltlab.wcf/templates/__formFieldHeader.tpl
 create mode 100644 com.woltlab.wcf/templates/__iconFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__itemListFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__multilineTextFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__multipleSelectionFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl
 create mode 100644 com.woltlab.wcf/templates/__numericFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__radioButtonFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__singleSelectionFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__tabFormContainer.tpl
 create mode 100644 com.woltlab.wcf/templates/__tabMenuFormContainer.tpl
 create mode 100644 com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl
 create mode 100644 com.woltlab.wcf/templates/__tagFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__textFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__userFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__usernameFormField.tpl
 create mode 100644 com.woltlab.wcf/templates/__valueFormFieldDependency.tpl
 create mode 100644 com.woltlab.wcf/templates/__wysiwygFormField.tpl

diff --git a/com.woltlab.wcf/templates/__aclFormField.tpl b/com.woltlab.wcf/templates/__aclFormField.tpl
new file mode 100644
index 0000000000..16b053dcbc
--- /dev/null
+++ b/com.woltlab.wcf/templates/__aclFormField.tpl
@@ -0,0 +1,9 @@
+{include file='__formFieldHeader'}
+
+{if $includeAclJavaScript}
+	{include file='aclPermissions'}
+{/if}
+
+{include file='aclPermissionJavaScript' containerID=$field->getPrefixedId()|concat:'Container' categoryName=$field->getCategoryName() objectID=$field->getObjectID() objectTypeID=$field->getObjectType()->objectTypeID}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__booleanFormField.tpl b/com.woltlab.wcf/templates/__booleanFormField.tpl
new file mode 100644
index 0000000000..da10fb6550
--- /dev/null
+++ b/com.woltlab.wcf/templates/__booleanFormField.tpl
@@ -0,0 +1,14 @@
+{include file='__formFieldHeader'}
+
+<ol class="flexibleButtonGroup">
+	<li>
+		<input type="radio" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="1" data-no-input-id="{@$field->getPrefixedId()}_no"{if $field->isAutofocused()} autofocus{/if}{if $field->isRequired()} required{/if}{if $field->isImmutable()} disabled{/if}{if $field->getValue()} checked{/if}>
+		<label for="{@$field->getPrefixedId()}" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.global.form.boolean.yes{/lang}</label>
+	</li>
+	<li>
+		<input type="radio" id="{@$field->getPrefixedId()}_no" name="{@$field->getPrefixedId()}" value="0" name="{@$field->getPrefixedId()}"{if $field->isImmutable()} disabled{/if}{if !$field->getValue()} checked{/if}>
+		<label for="{@$field->getPrefixedId()}_no" class="red"><span class="icon icon16 fa-times"></span> {lang}wcf.global.form.boolean.no{/lang}</label>
+	</li>
+</ol>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__dateFormField.tpl b/com.woltlab.wcf/templates/__dateFormField.tpl
new file mode 100644
index 0000000000..5d19a58eac
--- /dev/null
+++ b/com.woltlab.wcf/templates/__dateFormField.tpl
@@ -0,0 +1,14 @@
+{include file='__formFieldHeader'}
+
+<input {*
+	*}type="{if $field->supportsTime()}datetime{else}date{/if}"{*
+	*}id="{@$field->getPrefixedId()}" {*
+	*}name="{@$field->getPrefixedId()}" {*
+	*}value="{$field->getValue()}" {*
+	*}class="medium"{*
+	*}{if $field->isAutofocused()} autofocus{/if}{*
+	*}{if $field->isRequired()} required{/if}{*
+	*}{if $field->isImmutable()} disabled{/if}{*
+*}>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__dialogForm.tpl b/com.woltlab.wcf/templates/__dialogForm.tpl
new file mode 100644
index 0000000000..a9e70ba54e
--- /dev/null
+++ b/com.woltlab.wcf/templates/__dialogForm.tpl
@@ -0,0 +1,36 @@
+<script data-relocate="true">
+	{* register form with dependency manager before any form field-related JavaScript code is executed below *}
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+		FormBuilderFieldDependencyManager.register('{@$form->getId()}');
+	});
+</script>
+
+{if $form->getAction()}
+	{capture assign='__formStart'}<form method="{@$form->getMethod()}" action="{@$form->getAction()}"{/capture}
+	{assign var='__formEnd' value='</form>'}
+{else}
+	{assign var='__formStart' value='<section'}
+	{assign var='__formEnd' value='</section>'}
+{/if}
+
+{@$__formStart} id="{@$form->getId()}"{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+	{foreach from=$form item='child'}
+		{if $child->isAvailable()}
+			{@$child->getHtml()}
+		{/if}
+	{/foreach}
+	
+	<div class="formSubmit">
+		<button class="buttonPrimary">{lang}wcf.global.button.submit{/lang}</button>
+		{if $form->isCancelable()}
+			<button data-type="cancel">{lang}wcf.global.button.cancel{/lang}</button>
+		{/if}
+	</div>
+{@$__formEnd}
+
+<script data-relocate="true">
+	{* after all dependencies have been added, check them *}
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+		FormBuilderFieldDependencyManager.checkDependencies();
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__form.tpl b/com.woltlab.wcf/templates/__form.tpl
new file mode 100644
index 0000000000..5f50ac22b6
--- /dev/null
+++ b/com.woltlab.wcf/templates/__form.tpl
@@ -0,0 +1,26 @@
+<script data-relocate="true">
+	{* register form with dependency manager before any form field-related JavaScript code is executed below *}
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+		FormBuilderFieldDependencyManager.register('{@$form->getId()}');
+	});
+</script>
+
+<form method="{@$form->getMethod()}" action="{@$form->getAction()}" id="{@$form->getId()}"{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+	{foreach from=$form item='child'}
+		{if $child->isAvailable()}
+			{@$child->getHtml()}
+		{/if}
+	{/foreach}
+	
+	<div class="formSubmit">
+		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
+		{@SECURITY_TOKEN_INPUT_TAG}
+	</div>
+</form>
+
+<script data-relocate="true">
+	{* after all dependencies have been added, check them *}
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+		FormBuilderFieldDependencyManager.checkDependencies();
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__formContainer.tpl b/com.woltlab.wcf/templates/__formContainer.tpl
new file mode 100644
index 0000000000..9a1a0bee22
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formContainer.tpl
@@ -0,0 +1,22 @@
+<section id="{@$container->getPrefixedId()}Container" class="section{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}>
+	{if $container->getLabel() !== null}
+		{if $container->getDescription() !== null}
+			<header class="sectionHeader">
+				<h2 class="sectionTitle">{@$container->getLabel()}</h2>
+				<p class="sectionDescription">{@$container->getDescription()}</p>
+			</header>
+		{else}
+			<h2 class="sectionTitle">{@$container->getLabel()}</h2>
+		{/if}
+	{/if}
+	
+	{include file='__formContainerChildren'}
+</section>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default'], function(DefaultContainerDependency) {
+		new DefaultContainerDependency('{@$container->getPrefixedId()}Container');
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__formContainerChildren.tpl b/com.woltlab.wcf/templates/__formContainerChildren.tpl
new file mode 100644
index 0000000000..67486e3906
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formContainerChildren.tpl
@@ -0,0 +1,5 @@
+{foreach from=$container item='child'}
+	{if $child->isAvailable()}
+		{@$child->getHtml()}
+	{/if}
+{/foreach}
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/__formContainerDependencies.tpl b/com.woltlab.wcf/templates/__formContainerDependencies.tpl
new file mode 100644
index 0000000000..20b7a7477e
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formContainerDependencies.tpl
@@ -0,0 +1,7 @@
+{if !$container->getDependencies()|empty}
+	<script data-relocate="true">
+		{foreach from=$container->getDependencies() item=dependency}
+			{@$dependency->getHtml()}
+		{/foreach}
+	</script>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldDependencies.tpl b/com.woltlab.wcf/templates/__formFieldDependencies.tpl
new file mode 100644
index 0000000000..c3525c3250
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldDependencies.tpl
@@ -0,0 +1,7 @@
+{if !$field->getDependencies()|empty}
+	<script data-relocate="true">
+		{foreach from=$field->getDependencies() item=dependency}
+			{@$dependency->getHtml()}
+		{/foreach}
+	</script>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldDescription.tpl b/com.woltlab.wcf/templates/__formFieldDescription.tpl
new file mode 100644
index 0000000000..b21aac7563
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldDescription.tpl
@@ -0,0 +1,3 @@
+{if $field->getDescription() !== null}
+	<small>{@$field->getDescription()}</small>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldError.tpl b/com.woltlab.wcf/templates/__formFieldError.tpl
new file mode 100644
index 0000000000..fa9cafc1c6
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldError.tpl
@@ -0,0 +1 @@
+<small class="innerError">{@$error->getMessage()}</small>
diff --git a/com.woltlab.wcf/templates/__formFieldErrors.tpl b/com.woltlab.wcf/templates/__formFieldErrors.tpl
new file mode 100644
index 0000000000..e90727329e
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldErrors.tpl
@@ -0,0 +1,3 @@
+{foreach from=$field->getValidationErrors() item='validationError'}
+	{@$validationError->getHtml()}
+{/foreach}
diff --git a/com.woltlab.wcf/templates/__formFieldFooter.tpl b/com.woltlab.wcf/templates/__formFieldFooter.tpl
new file mode 100644
index 0000000000..bb5c687390
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldFooter.tpl
@@ -0,0 +1,5 @@
+		{include file='__formFieldDescription'}
+		{include file='__formFieldErrors'}
+		{include file='__formFieldDependencies'}
+	</dd>
+</dl>
diff --git a/com.woltlab.wcf/templates/__formFieldHeader.tpl b/com.woltlab.wcf/templates/__formFieldHeader.tpl
new file mode 100644
index 0000000000..cc3438f97c
--- /dev/null
+++ b/com.woltlab.wcf/templates/__formFieldHeader.tpl
@@ -0,0 +1,3 @@
+<dl id="{@$field->getPrefixedId()}Container" {if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$field->checkDependencies()} style="display: none;"{/if}>
+	<dt><label for="{@$field->getPrefixedId()}">{@$field->getLabel()}</label></dt>
+	<dd>
diff --git a/com.woltlab.wcf/templates/__iconFormField.tpl b/com.woltlab.wcf/templates/__iconFormField.tpl
new file mode 100644
index 0000000000..033ea6b609
--- /dev/null
+++ b/com.woltlab.wcf/templates/__iconFormField.tpl
@@ -0,0 +1,28 @@
+{include file='__formFieldHeader'}
+
+<span{if $field->getValue()} class="icon icon64 fa-{$field->getValue()}"{/if} id="{@$field->getPrefixedId()}_icon"></span>
+<a href="#" class="button small" id="{@$field->getPrefixedId()}_openIconDialog">{lang}wcf.global.button.edit{/lang}</a>
+<input type="hidden" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="{$field->getValue()}">
+
+{if $__iconFormFieldIncludeJavaScript}
+	{include file='fontAwesomeJavaScript'}
+{/if}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Ui/Style/FontAwesome'], function(UiStyleFontAwesome) {
+		var button = elById('{@$field->getPrefixedId()}_openIconDialog');
+		var icon = elById('{@$field->getPrefixedId()}_icon');
+		var input = elById('{@$field->getPrefixedId()}');
+		
+		var callback = function(iconName) {
+			icon.className = 'icon icon64 fa-' + iconName;
+			input.value = iconName;
+		};
+		
+		button.addEventListener('click', function() {
+			UiStyleFontAwesome.open(callback);
+		});
+	});
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__itemListFormField.tpl b/com.woltlab.wcf/templates/__itemListFormField.tpl
new file mode 100644
index 0000000000..531e754d40
--- /dev/null
+++ b/com.woltlab.wcf/templates/__itemListFormField.tpl
@@ -0,0 +1,17 @@
+{include file='__formFieldHeader'}
+
+<input type="text" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="{$field->getValue()}" class="long"{if $field->isAutofocused()} autofocus{/if}{if $field->isImmutable()} disabled{/if}>
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Ui/ItemList/Static'], function(UiItemListStatic) {
+		UiItemListStatic.init(
+			'{@$field->getPrefixedId()}',
+			[{if $field->getValue() !== null && !$field->getValue()|empty}{implode from=$field->getValue() item=item}'{@$item|encodeJS}'{/implode}{/if}],
+			{
+				submitFieldName: '{@$field->getPrefixedId()}[]'
+			}
+		);
+	});
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__multilineTextFormField.tpl b/com.woltlab.wcf/templates/__multilineTextFormField.tpl
new file mode 100644
index 0000000000..06f07aea98
--- /dev/null
+++ b/com.woltlab.wcf/templates/__multilineTextFormField.tpl
@@ -0,0 +1,9 @@
+{include file='__formFieldHeader'}
+
+<textarea id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" rows="{@$field->getRows()}"{if $field->isAutofocused()} autofocus{/if}{if $field->isRequired()} required{/if}{if $field->isImmutable()} disabled{/if}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}">{$field->getValue()}</textarea>
+
+{if $field->isI18n()}
+	{include file='multipleLanguageInputJavascript'}
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__multipleSelectionFormField.tpl b/com.woltlab.wcf/templates/__multipleSelectionFormField.tpl
new file mode 100644
index 0000000000..ef57341697
--- /dev/null
+++ b/com.woltlab.wcf/templates/__multipleSelectionFormField.tpl
@@ -0,0 +1,33 @@
+{include file='__formFieldHeader'}
+
+{if $field->isFilterable()}
+	<script data-relocate="true">
+		require(['Language', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function(Language, UiItemListFilter) {
+			Language.addObject({
+				'wcf.global.filter.button.visibility': '{lang}wcf.global.filter.button.visibility{/lang}',
+				'wcf.global.filter.button.clear': '{lang}wcf.global.filter.button.clear{/lang}',
+				'wcf.global.filter.error.noMatches': '{lang}wcf.global.filter.error.noMatches{/lang}',
+				'wcf.global.filter.placeholder': '{lang}wcf.global.filter.placeholder{/lang}',
+				'wcf.global.filter.visibility.activeOnly': '{lang}wcf.global.filter.visibility.activeOnly{/lang}',
+				'wcf.global.filter.visibility.highlightActive': '{lang}wcf.global.filter.visibility.highlightActive{/lang}',
+				'wcf.global.filter.visibility.showAll': '{lang}wcf.global.filter.visibility.showAll{/lang}'
+			});
+			
+			new UiItemListFilter('{@$field->getPrefixedId()}_list');
+		});
+	</script>
+	
+	<ul class="scrollableCheckboxList" id="{@$field->getPrefixedId()}_list">
+		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+			<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
+				<label><input type="checkbox" name="{@$field->getPrefixedId()}[]" value="{$__fieldNestedOption[value]}"{if $field->getValue() !== null && $__fieldNestedOption[value]|in_array:$field->getValue()} checked{/if}> {@$__fieldNestedOption[label]}</label>
+			</li>
+		{/foreach}
+	</ul>
+{else}
+	<select id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}">
+		{htmlOptions options=$field->getOptions() selected=$field->getValue() disableEncoding=true}
+	</select>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl b/com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl
new file mode 100644
index 0000000000..1d119ddb14
--- /dev/null
+++ b/com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl
@@ -0,0 +1,7 @@
+require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/NonEmpty'], function(NonEmptyFieldDependency) {
+	// dependency '{@$dependency->getId()}'
+	new NonEmptyFieldDependency(
+		'{@$dependency->getDependentNode()->getPrefixedId()}Container',
+		'{@$dependency->getField()->getPrefixedId()}'
+	);
+});
diff --git a/com.woltlab.wcf/templates/__numericFormField.tpl b/com.woltlab.wcf/templates/__numericFormField.tpl
new file mode 100644
index 0000000000..685f7fdda6
--- /dev/null
+++ b/com.woltlab.wcf/templates/__numericFormField.tpl
@@ -0,0 +1,26 @@
+{include file='__formFieldHeader'}
+
+{if $field->getSuffix() !== null}
+	<div class="inputAddon">
+{/if}
+
+<input type="number" {*
+	*}step="{@$field->getStep()}" {*
+	*}id="{@$field->getPrefixedId()}" {*
+	*}name="{@$field->getPrefixedId()}" {*
+	*}value="{$field->getValue()}" {*
+	*}class="short"{*
+	*}{if $field->isAutofocused()} autofocus{/if}{*
+	*}{if $field->isRequired()} required{/if}{*
+	*}{if $field->isImmutable()} disabled{/if}{*
+	*}{if $field->getMinimum() !== null} min="{$field->getMinimum()}"{/if}{*
+	*}{if $field->getMaximum() !== null} max="{$field->getMaximum()}"{/if}{*
+	*}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{if $field->getSuffix() !== null}
+		<span class="inputSuffix">{@$field->getSuffix()}</span>
+	</div>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__radioButtonFormField.tpl b/com.woltlab.wcf/templates/__radioButtonFormField.tpl
new file mode 100644
index 0000000000..0a8b7011d4
--- /dev/null
+++ b/com.woltlab.wcf/templates/__radioButtonFormField.tpl
@@ -0,0 +1,7 @@
+{include file='__formFieldHeader'}
+
+{foreach from=$field->getOptions() key=$__fieldValue item=__fieldLabel}
+	<label><input type="radio" name="{@$field->getPrefixedId()}" value="{$__fieldValue}"{if $field->getValue() === $__fieldValue} checked{/if}> {@$__fieldLabel}</label>
+{/foreach}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__singleSelectionFormField.tpl b/com.woltlab.wcf/templates/__singleSelectionFormField.tpl
new file mode 100644
index 0000000000..adcd0540db
--- /dev/null
+++ b/com.woltlab.wcf/templates/__singleSelectionFormField.tpl
@@ -0,0 +1,35 @@
+{include file='__formFieldHeader'}
+
+{if $field->isFilterable()}
+	<script data-relocate="true">
+		require(['Language', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function(Language, UiItemListFilter) {
+			Language.addObject({
+				'wcf.global.filter.button.visibility': '{lang}wcf.global.filter.button.visibility{/lang}',
+				'wcf.global.filter.button.clear': '{lang}wcf.global.filter.button.clear{/lang}',
+				'wcf.global.filter.error.noMatches': '{lang}wcf.global.filter.error.noMatches{/lang}',
+				'wcf.global.filter.placeholder': '{lang}wcf.global.filter.placeholder{/lang}',
+				'wcf.global.filter.visibility.activeOnly': '{lang}wcf.global.filter.visibility.activeOnly{/lang}',
+				'wcf.global.filter.visibility.highlightActive': '{lang}wcf.global.filter.visibility.highlightActive{/lang}',
+				'wcf.global.filter.visibility.showAll': '{lang}wcf.global.filter.visibility.showAll{/lang}'
+			});
+			
+			new UiItemListFilter('{@$field->getPrefixedId()}_list');
+		});
+	</script>
+	
+	<ul class="scrollableCheckboxList" id="{@$field->getPrefixedId()}_list">
+		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+			<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
+				<label><input type="radio" name="{@$field->getPrefixedId()}" value="{$__fieldNestedOption[value]}"{if $field->getValue() === $__fieldNestedOption[value]} checked{/if}> {@$__fieldNestedOption[label]}</label>
+			</li>
+		{/foreach}
+	</ul>
+{else}
+	<select id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}">
+		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+			<option name="{@$field->getPrefixedId()}" value="{$__fieldNestedOption[value]}"{if $field->getValue() === $__fieldNestedOption[value]} selected{/if}>{@'&nbsp;'|str_repeat:$__fieldNestedOption[depth] * 4}{@$__fieldNestedOption[label]}</option>
+		{/foreach}
+	</select>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__tabFormContainer.tpl b/com.woltlab.wcf/templates/__tabFormContainer.tpl
new file mode 100644
index 0000000000..179eadff14
--- /dev/null
+++ b/com.woltlab.wcf/templates/__tabFormContainer.tpl
@@ -0,0 +1,11 @@
+<div id="{@$container->getPrefixedId()}Container" class="tabMenuContent{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}>
+	{include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab'], function(TabContainerDependency) {
+		new TabContainerDependency('{@$container->getPrefixedId()}Container');
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__tabMenuFormContainer.tpl b/com.woltlab.wcf/templates/__tabMenuFormContainer.tpl
new file mode 100644
index 0000000000..f8f3e15b80
--- /dev/null
+++ b/com.woltlab.wcf/templates/__tabMenuFormContainer.tpl
@@ -0,0 +1,22 @@
+<div id="{@$container->getPrefixedId()}Container" class="section tabMenuContainer{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}{if !$container->checkDependencies()} style="display: none;"{/if}>
+	<nav class="tabMenu">
+		<ul>
+			{foreach from=$container item='child'}
+				{if $child->isAvailable()}
+					{assign var='__tabMenuFormContainerChildId' value=$child->getPrefixedId()|concat:'Container'}
+					<li{if !$child->checkDependencies()} style="display: none;"{/if}><a href="{@$__wcf->getAnchor($__tabMenuFormContainerChildId)}">{@$child->getLabel()}</a></li>
+				{/if}
+			{/foreach}
+		</ul>
+	</nav>
+	
+	{include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu'], function(TabMenuContainerDependency) {
+		new TabMenuContainerDependency('{@$container->getPrefixedId()}Container');
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl b/com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl
new file mode 100644
index 0000000000..a181463413
--- /dev/null
+++ b/com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl
@@ -0,0 +1,16 @@
+<div id="{@$container->getPrefixedId()}Container" class="tabMenuContainer tabMenuContent{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+	<nav class="menu">
+		<ul>
+			{foreach from=$container item='child'}
+				{if $child->isAvailable()}
+					{assign var='__tabMenuFormContainerChildId' value=$child->getPrefixedId()|concat:'Container'}
+					<li{if !$child->checkDependencies()} style="display: none;"{/if}><a href="{@$__wcf->getAnchor($__tabMenuFormContainerChildId)}">{@$child->getLabel()}</a></li>
+				{/if}
+			{/foreach}
+		</ul>
+	</nav>
+	
+	{include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
diff --git a/com.woltlab.wcf/templates/__tagFormField.tpl b/com.woltlab.wcf/templates/__tagFormField.tpl
new file mode 100644
index 0000000000..1b0f6c7a35
--- /dev/null
+++ b/com.woltlab.wcf/templates/__tagFormField.tpl
@@ -0,0 +1,21 @@
+{include file='__formFieldHeader'}
+
+<input id="{@$field->getPrefixedId()}" type="text" value="" class="long">
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Ui/ItemList'], function(UiItemList) {
+		UiItemList.init(
+			'{@$field->getPrefixedId()}',
+			[{if $field->getValue() !== null && !$field->getValue()|empty}{implode from=$field->getValue() item=tag}'{@$tag|encodeJS}'{/implode}{/if}],
+			{
+				ajax: {
+					className: 'wcf\\data\\tag\\TagAction'
+				},
+				maxLength: {@TAGGING_MAX_TAG_LENGTH},
+				submitFieldName: '{@$field->getPrefixedId()}[]'
+			}
+		);
+	});
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__textFormField.tpl b/com.woltlab.wcf/templates/__textFormField.tpl
new file mode 100644
index 0000000000..0669131310
--- /dev/null
+++ b/com.woltlab.wcf/templates/__textFormField.tpl
@@ -0,0 +1,20 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+	*}id="{@$field->getPrefixedId()}" {*
+	*}name="{@$field->getPrefixedId()}" {*
+	*}value="{if !$field->isI18n() || !$field->hasI18nValues()}{$field->getValue()}{/if}" {*
+	*}class="long"{*
+	*}{if $field->isAutofocused()} autofocus{/if}{*
+	*}{if $field->isRequired()} required{/if}{*
+	*}{if $field->isImmutable()} disabled{/if}{*
+	*}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{*
+	*}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{*
+	*}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{if $field->isI18n()}
+	{include file='multipleLanguageInputJavascript'}
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__userFormField.tpl b/com.woltlab.wcf/templates/__userFormField.tpl
new file mode 100644
index 0000000000..8247c9425b
--- /dev/null
+++ b/com.woltlab.wcf/templates/__userFormField.tpl
@@ -0,0 +1,22 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+	*}id="{@$field->getPrefixedId()}" {*
+	*}name="{@$field->getPrefixedId()}" {*
+	*}value="{if $field->allowsMultiple()}{if $field->getValue()|is_array}{implode from=$field->getValue() item=username}{$username}{/implode}{/if}{else}{$field->getValue()}{/if}" {*
+	*}class="long"{*
+	*}{if $field->isAutofocused()} autofocus{/if}{*
+	*}{if $field->isImmutable()} disabled{/if}{*
+*}>
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Ui/ItemList/User'], function(UiItemListUser) {
+		UiItemListUser.init('{@$field->getPrefixedId()}', {
+			{if $field->getMaximumMultiples() !== -1}
+				maxItems: {@$field->getMaximumMultiples()}
+			{/if}
+		});
+	});
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__usernameFormField.tpl b/com.woltlab.wcf/templates/__usernameFormField.tpl
new file mode 100644
index 0000000000..4e502abff7
--- /dev/null
+++ b/com.woltlab.wcf/templates/__usernameFormField.tpl
@@ -0,0 +1,16 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+	*}id="{@$field->getPrefixedId()}" {*
+	*}name="{@$field->getPrefixedId()}" {*
+	*}value="{$field->getValue()}" {*
+	*}class="long"{*
+	*}{if $field->isAutofocused()} autofocus{/if}{*
+	*}{if $field->isRequired()} required{/if}{*
+	*}{if $field->isImmutable()} disabled{/if}{*
+	*}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{*
+	*}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{*
+	*}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__valueFormFieldDependency.tpl b/com.woltlab.wcf/templates/__valueFormFieldDependency.tpl
new file mode 100644
index 0000000000..71a63f741e
--- /dev/null
+++ b/com.woltlab.wcf/templates/__valueFormFieldDependency.tpl
@@ -0,0 +1,8 @@
+require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Value'], function(ValueFieldDependency) {
+	// dependency '{@$dependency->getId()}'
+	new ValueFieldDependency(
+		'{@$dependency->getDependentNode()->getPrefixedId()}Container',
+		'{@$dependency->getField()->getPrefixedId()}'
+	).values([ {implode from=$dependency->getValues() item=dependencyValue}'{$dependencyValue|encodeJS}'{/implode} ])
+	.negate({if $dependency->isNegated()}true{else}false{/if});
+});
diff --git a/com.woltlab.wcf/templates/__wysiwygFormField.tpl b/com.woltlab.wcf/templates/__wysiwygFormField.tpl
new file mode 100644
index 0000000000..1716bac6b6
--- /dev/null
+++ b/com.woltlab.wcf/templates/__wysiwygFormField.tpl
@@ -0,0 +1,18 @@
+{include file='__formFieldHeader'}
+
+<textarea
+	id="{@$field->getPrefixedId()}"
+	name="{@$field->getPrefixedId()}"
+	class="wysiwygTextarea"
+	data-disable-attachments="true"
+	{if $field->getAutosaveId() !== null}
+		data-autosave="{@$field->getAutosaveId()}"
+		{if $field->getLastEditTime() !== 0}
+			data-autosave-last-edit-time="{@$field->getLastEditTime()}"
+		{/if}
+	{/if}
+>{$field->getValue()}</textarea>
+
+{include file='wysiwyg' wysiwygSelector=$field->getPrefixedId()}
+
+{include file='__formFieldFooter'}
-- 
2.20.1