<xf:macro id="select_forums"
	arg-nodeIds="!"
	arg-nodeTree="!"
	arg-withRow="1"
	arg-selectName="node_ids">

	<xf:set var="$inner">
		<ul class="inputList">
			<li><xf:select name="{$selectName}[]" value="{$nodeIds}" size="7" multiple="multiple" id="js-applicableForums">

				<xf:option value="" selected="!{$nodeIds}">{{ phrase('(none)') }}</xf:option>

				<xf:foreach loop="$nodeTree.getFlattened(0)" value="$treeEntry">
					<xf:option value="{$treeEntry.record.node_id}"
						disabled="{{ $treeEntry.record.node_type_id != 'Forum' }}"
						label="{{ repeat('&nbsp;&nbsp;', $treeEntry.depth)|raw }} {$treeEntry.record.title}" />
				</xf:foreach>

			</xf:select></li>

			<xf:checkbox>
				<xf:option label="{{ phrase('select_all') }}" id="js-selectAllForums" />
			</xf:checkbox>
		</ul>
	</xf:set>

	<xf:if is="$withRow">
		<xf:formrow rowtype="input" label="{{ phrase('applicable_forums') }}">
			{$inner|raw}
		</xf:formrow>
	<xf:else />
		{$inner|raw}
	</xf:if>

	<xf:js>
		const selectAll = document.querySelector('#js-selectAllForums')
		XF.on(selectAll, 'click', e =>
		{
			const forums = document.querySelector('#js-applicableForums')
			const options = forums.querySelectorAll('option:enabled')
			options.forEach(option =>
			{
				option.selected = option.matches('[value=""]')
					? !e.target.checked
					: e.target.checked
			})
		})
	</xf:js>
</xf:macro>