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

	<xf:if is="$option.option_value.enabled">
		<dl class="pairs pairs--columns pairs--fixedSmall">
			<dt>{{ phrase('connection_type') }}</dt>
			<dd>
				{$option.option_value.type|to_upper}
				<xf:if is="$option.option_value.oauth AND $option.option_value.oauth.provider == 'Google'">
					{{ phrase('google_oauth')|parens }}
				</xf:if>
			</dd>
		</dl>
		<dl class="pairs pairs--columns pairs--fixedSmall">
			<dt>{{ phrase('host') }}</dt>
			<dd>{$option.option_value.host}:{$option.option_value.port}</dd>
		</dl>

		<xf:if is="$option.option_value.username">
			<dl class="pairs pairs--columns pairs--fixedSmall">
				<dt>{{ phrase('user_name') }}</dt>
				<dd>{$option.option_value.username}</dd>
			</dl>
		</xf:if>

		<xf:if is="$option.option_value.encryption">
			<dl class="pairs pairs--columns pairs--fixedSmall">
				<dt>{{ phrase('encryption') }}</dt>
				<dd>{$option.option_value.encryption|to_upper}</dd>
			</dl>
		</xf:if>
	</xf:if>

	<div class="u-inputSpacer">
		<xf:button href="{{ link('options/email-handler-setup', $option) }}" data-xf-click="overlay">
			{{ $option.option_value.enabled ? phrase('change') : phrase('enable') }}
		</xf:button>
	</div>
</xf:formrow>