<xf:checkboxrow
	label="{$option.title}"
	hint="{$hintHtml}"
	explain="{$explainHtml}"
	html="{$listedHtml}"
	rowclass="{$rowClass}">

	<xf:option name="{$inputName}[enabled]" value="1" selected="$option.option_value.enabled"
		label="{{ phrase('enable_automated_email_handler') }}" data-hide="true">
		<xf:dependent>
			<div class="inputChoices-spacer">{{ phrase('connection_type') }}</div>
			<xf:radio name="{$inputName}[type]" value="{{ $option.option_value.type ? $option.option_value.type : 'pop3' }}">
				<xf:option value="pop3">POP3</xf:option>
				<xf:option value="imap">IMAP</xf:option>
			</xf:radio>

			<div class="inputChoices-spacer">{{ phrase('host') }}</div>
			<div class="inputGroup">
				<xf:textbox name="{$inputName}[host]" value="{$option.option_value.host}" placeholder="{{ phrase('host') }}" size="40" id="{$inputName}_host" />
				<span class="inputGroup-text">:</span>
				<xf:textbox name="{$inputName}[port]" value="{$option.option_value.port}" placeholder="{{ phrase('port') }}" size="5" />
			</div>

			<div class="inputChoices-spacer">{{ phrase('user_name_and_password') }}</div>
			<div class="inputGroup">
				<xf:textbox name="{$inputName}[username]" value="{$option.option_value.username}" placeholder="{{ phrase('user_name') }}" size="15" id="{$inputName}_username" />
				<span class="inputGroup-splitter"></span>
				<xf:textbox name="{$inputName}[password]" value="{$option.option_value.password}" type="password" size="15" />
			</div>

			<div class="inputChoices-spacer">{{ phrase('encryption') }}</div>
			<xf:radio name="{$inputName}[encryption]" value="{{ $option.option_value.encryption ? $option.option_value.encryption : '' }}">
				<xf:option>{{ phrase('none') }}</xf:option>
				<xf:option value="tls">TLS</xf:option>
				<xf:option value="ssl">SSL</xf:option>
			</xf:radio>
		</xf:dependent>
	</xf:option>
</xf:checkboxrow>