<xf:macro name="edit_outer" arg-type="!" arg-class="block-outer">
	<xf:js src="xf/permission.js" min="1" />
	<xf:css src="permission.less" />

	<div class="{$class}"
		data-xf-init="permission-form"
		data-form="< form"
		data-permission-type="{$type}">

		<div class="{$class}-main js-globalPermissionQuickSet">
			<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('quick_set') }}</xf:button>
			<xf:macro name="quick_set_menu" arg-type="{$type}" />
		</div>
		<div class="{$class}-opposite quickFilter">
			<input type="text" class="input js-permissionFilterInput" placeholder="{{ phrase('filter...')|for_attr }}" />
		</div>
	</div>

</xf:macro>

<xf:macro name="quick_set_menu" arg-type="!" arg-target="">
	<div class="menu" data-menu="menu" aria-hidden="true">
		<div class="menu-content">
			<h3 class="menu-header">{{ phrase('quick_set') }}</h3>
			<xf:if is="$type == 'global'">
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="allow" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('yes')}) }}
				</a>
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="unset" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('no')}) }}
				</a>
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="deny" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('never')}) }}
				</a>
			<xf:elseif is="$type == 'content'" />
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="unset" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('inherit')}) }}
				</a>
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="content_allow" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('yes')}) }}
				</a>
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="reset" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('no')}) }}
				</a>
				<a class="menu-linkRow js-permissionQuickSet" data-target="{$target}" data-value="deny" tabindex="0">
					{{ phrase('set_all_to_x', {'value': phrase('never')}) }}
				</a>
			</xf:if>
		</div>
	</div>
</xf:macro>

<xf:macro name="edit_groups" arg-interfaceGroups="!" arg-permissionsGrouped="!" arg-values="!">
	<xf:foreach loop="$interfaceGroups" key="$interfaceGroupId" value="$interfaceGroup">
		<xf:if is="{$permissionsGrouped.{$interfaceGroupId}} is not empty">
			<h3 class="block-formSectionHeader">
				<span class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-target="< :up:next">
					<span class="block-formSectionHeader-aligner">{$interfaceGroup.title}</span>
				</span>
			</h3>
			<div class="block-body block-body--collapsible is-active"
				data-moderator-permissions="{$interfaceGroup.is_moderator}"
				id="permGroup-{$interfaceGroupId}">

				<xf:if is="count({$permissionsGrouped.{$interfaceGroupId}}) > 2">
					<xf:formrow rowclass="formRow--permissionQuickSet">
						<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('quick_set') }}</xf:button>
						<xf:macro name="quick_set_menu" arg-type="global" arg-target="#permGroup-{$interfaceGroupId}" />
					</xf:formrow>
				</xf:if>
				<xf:foreach loop="{$permissionsGrouped.{$interfaceGroupId}}" value="$permission">
					<xf:macro name="edit_permission"
						arg-permission="{$permission}"
						arg-value="{$values.{$permission.permission_group_id}.{$permission.permission_id}}" />
				</xf:foreach>
			</div>
		</xf:if>
	</xf:foreach>
</xf:macro>

<xf:macro name="edit_permission" arg-permission="!" arg-value="!">
	<xf:set var="$inputName" value="permissions[{$permission.permission_group_id}][{$permission.permission_id}]" />
	<xf:formrow
		label="{$permission.title}"
		rowclass="js-permission"
		data-xf-init="permission-choice"
		data-permission-type="{$permission.permission_type}">

		<xf:if is="$permission.permission_type == 'flag'">
			<ul class="permissionChoices permissionChoices--flag">
				<li class="permissionChoices-choice permissionChoices-choice--yes">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="allow"
							label="{{ phrase('yes') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--no">
					<xf:radio name="{$inputName}" value="{{ ($value == 'unset' || !$value) ? 'unset' : '' }}" standalone="true">
						<xf:option value="unset"
							label="{{ phrase('no') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--never">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="deny"
							label="{{ phrase('never') }}" />
					</xf:radio>
				</li>
			</ul>
		<xf:else />
			<ul class="permissionChoices permissionChoices--int">
				<li class="permissionChoices-choice permissionChoices-choice--yes">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="-1"
							label="{{ phrase('unlimited') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--int">
					<div class="inputGroup inputGroup--inline inputGroup--joined inputNumber" data-xf-init="number-box">
						<span class="inputGroup-text">
							<xf:radio name="{$inputName}" value="{$value}" standalone="true">
								<xf:option value="0"
									selected="{{ $value >= 0 }}"
									data-xf-init="disabler"
									data-container="< li"
									label="{{ phrase('as_follows:') }}"
									hiddenlabel="true"
									id="perm_{$permission.permission_group_id}_{$permission.permission_id}_radio" />
							</xf:radio>
							<label class="permissionChoices-choiceIntLabel" for="perm_{$permission.permission_group_id}_{$permission.permission_id}_radio"></label>
						</span>
						<xf:textbox name="{$inputName}" value="{{ $value >= 0 ? $value|default(0) : 0 }}" type="number"
							class="input--number js-numberBoxTextInput js-permissionIntInput"
							min="0" pattern="\d*" />
					</div>
				</li>
			</ul>
		</xf:if>
	</xf:formrow>
</xf:macro>

<xf:macro name="content_edit_groups" arg-interfaceGroups="!" arg-permissionsGrouped="!" arg-values="!">
	<xf:foreach loop="$interfaceGroups" key="$interfaceGroupId" value="$interfaceGroup">
		<xf:if is="{$permissionsGrouped.{$interfaceGroupId}} is not empty">
			<h3 class="block-formSectionHeader">
				<span class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-target="< :up:next">
					<span class="block-formSectionHeader-aligner">{$interfaceGroup.title}</span>
				</span>
			</h3>
			<div class="block-body block-body--collapsible is-active"
				data-moderator-permissions="{$interfaceGroup.is_moderator}"
				id="permGroup-{$interfaceGroupId}">

				<xf:if is="count({$permissionsGrouped.{$interfaceGroupId}}) > 2">
					<xf:formrow rowclass="formRow--permissionQuickSet">
						<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('quick_set') }}</xf:button>
						<xf:macro name="quick_set_menu" arg-type="content" arg-target="#permGroup-{$interfaceGroupId}" />
					</xf:formrow>
				</xf:if>
				<xf:foreach loop="{$permissionsGrouped.{$interfaceGroupId}}" value="$permission">
					<xf:macro name="content_edit_permission"
						arg-permission="{$permission}"
						arg-value="{$values.{$permission.permission_group_id}.{$permission.permission_id}}" />
				</xf:foreach>
			</div>
		</xf:if>
	</xf:foreach>
</xf:macro>

<xf:macro name="content_edit_permission" arg-permission="!" arg-value="!">
	<xf:set var="$inputName" value="permissions[{$permission.permission_group_id}][{$permission.permission_id}]" />
	<xf:formrow
		label="{$permission.title}"
		rowclass="js-permission"
		data-xf-init="permission-choice"
		data-permission-type="{$permission.permission_type}">

		<xf:if is="$permission.permission_type == 'flag'">
			<ul class="permissionChoices permissionChoices--flag">
				<li class="permissionChoices-choice permissionChoices-choice--inherit">
					<xf:radio name="{$inputName}" value="{{ (!$value || $value == 'unset') ? 'unset' : '' }}" standalone="true">
						<xf:option value="unset"
							label="{{ phrase('inherit') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--yes">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="content_allow"
							label="{{ phrase('yes') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--no">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="reset"
							label="{{ phrase('no') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--never">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="deny"
							label="{{ phrase('never') }}" />
					</xf:radio>
				</li>
			</ul>
		<xf:else />
			<ul class="permissionChoices permissionChoices--int">
				<li class="permissionChoices-choice permissionChoices-choice--inherit">
					<xf:radio name="{$inputName}" value="{{ (!$value || $value == 0) ? 0 : null }}" standalone="true">
						<xf:option value="0"
							label="{{ phrase('inherit') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--yes">
					<xf:radio name="{$inputName}" value="{$value}" standalone="true">
						<xf:option value="-1"
							label="{{ phrase('unlimited') }}" />
					</xf:radio>
				</li>
				<li class="permissionChoices-choice permissionChoices-choice--int">
					<div class="inputGroup inputGroup--inline inputGroup--joined inputNumber" data-xf-init="number-box">
						<span class="inputGroup-text">
							<xf:radio name="{$inputName}" standalone="true">
								<xf:option value="1"
									selected="{{ $value >= 1 }}"
									data-xf-init="disabler"
									data-container="< li"
									label="{{ phrase('as_follows:') }}"
									hiddenlabel="true"
									id="perm_{$permission.permission_group_id}_{$permission.permission_id}_radio" />
							</xf:radio>
							<label class="permissionChoices-choiceIntLabel" for="perm_{$permission.permission_group_id}_{$permission.permission_id}_radio"></label>
						</span>
						<xf:textbox type="number" name="{$inputName}" value="{{ $value >= 1 ? $value|default(1) : 1 }}"
							class="input--number js-numberBoxTextInput js-permissionIntInput"
							min="0" pattern="\d*" />
					</div>
				</li>
			</ul>
		</xf:if>
	</xf:formrow>
</xf:macro>