<xf:form action="{{ link('attachments') }}">
	<div class="menu-row">
		{{ phrase('content_type:') }}
		<div class="u-inputSpacer">
			<xf:select name="content_type" value="{$conditions.content_type}">
				<xf:option>{{ phrase('(all_content_types)') }}</xf:option>
				<xf:foreach loop="$handlers" key="$contentType" value="$handler">
					<xf:option value="{$contentType}">{$handler.getContentTypePhrase()}</xf:option>
				</xf:foreach>
			</xf:select>
		</div>
	</div>

	<div class="menu-row menu-row--separated">
		{{ phrase('user_name:') }}
		<div class="u-inputSpacer">
			<xf:textbox name="username" ac="single" value="{$conditions.username}" dir="ltr" />
		</div>
	</div>

	<div class="menu-row">
		{{ phrase('attached_between:') }}
		<div class="u-inputSpacer inputGroup inputGroup--auto">
			<xf:dateinput name="start" value="{{ $conditions.start ? date($conditions.start, 'Y-m-d') : '' }}" />
			<span class="inputGroup-text">-</span>
			<xf:dateinput name="end" value="{{ $conditions.end ? date($conditions.end, 'Y-m-d') : '' }}" />
		</div>
	</div>
	<div class="menu-row menu-row--separated">
		{{ phrase('date_presets:') }}
		<div class="u-inputSpacer">
			<xf:select name="date_preset" class="js-presetChange filterBlock-input">
				<xf:option label="" value="-1" />
				<xf:options source="{$datePresets}" />
				<xf:option value="1995-01-01">{{ phrase('all_time') }}</xf:option>
			</xf:select>
		</div>
	</div>

	<div class="menu-row">
		{{ phrase('sort_by:') }}
		<div class="u-inputSpacer inputGroup">
			<xf:select name="order" value="{{ $conditions.order ?: 'attach_date' }}">
				<xf:option value="attach_date">{{ phrase('attach_date') }}</xf:option>
				<xf:option value="file_size">{{ phrase('file_size') }}</xf:option>
			</xf:select>
			<span class="inputGroup-splitter"></span>
			<xf:select name="direction" value="{{ $conditions.direction ?: 'desc' }}">
				<xf:option value="desc">{{ phrase('descending') }}</xf:option>
				<xf:option value="asc">{{ phrase('ascending') }}</xf:option>
			</xf:select>
		</div>
	</div>

	<div class="menu-footer">
		<span class="menu-footer-controls">
			<xf:button type="submit" icon="search" class="button--primary">{{ phrase('filter') }}</xf:button>
		</span>
	</div>
</xf:form>

<xf:js>
	const ctrl = document.querySelector('.js-presetChange')
	XF.on(ctrl, 'change', e =>
	{
		const value = ctrl.value
		const form = ctrl.closest('form')

		if (value == -1)
		{
			return
		}

		form.querySelector(ctrl.dataset.start || 'input[name=start]').value = value
		form.querySelector(ctrl.dataset.end || 'input[name=end]').value = ''
	})
</xf:js>