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

	<xf:option name="{$inputName}[enabled]" selected="$option.option_value.enabled" label="{$option.title}">
		<xf:dependent>
			<div>{{ phrase('api_key:') }}</div>
			<xf:textbox name="{$inputName}[api_key]" value="{$option.option_value.api_key}" required="required"
				pattern="^[a-zA-Z0-9]{32}$" title="{{ phrase('please_enter_a_valid_api_key') }}" />
			<dfn class="formRow-explain">{{ phrase('giphy_own_api_key_explain') }}</dfn>
		</xf:dependent>

		<xf:dependent>
			<div>{{ phrase('only_show_gifs_with_following_rating:') }}</div>
			<xf:select name="{$inputName}[rating]" id="{$option.option_id}_rating" value="{$option.option_value.rating}">
				<xf:option value="g">{{ phrase('giphy_rating_g') }}</xf:option>
				<xf:option value="pg">{{ phrase('giphy_rating_pg') }}</xf:option>
				<xf:option value="pg-13">{{ phrase('giphy_rating_pg_13') }}</xf:option>
				<xf:option value="r">{{ phrase('giphy_rating_r') }}</xf:option>
			</xf:select>
			<dfn class="formRow-explain">{{ phrase('giphy_rating_explain') }}</dfn>
		</xf:dependent>
	</xf:option>
</xf:checkboxrow>