<div class="row option_form_row">

	<div class="col-2" style="min-width: 140px">
		<label for="Opt-{{ aOption.key }}"
			   id="Label-{{ aOption.key }}"
			   class="col-form-label">
			<span class="option_label_name">{{ aOption.name }}

				{% if aOption.beacon_id|default(false) %}
					<a href="javascript:{}"
					   class="beacon-article"
					   data-beacon-article-id="{{ aOption.beacon_id }}"
					   data-beacon-article-format="sidebar"
					   title="{{ strings.opt_info_helpdesk }}">
						<span class="dashicons dashicons-editor-help"></span>
					</a>
				{% elseif aOption.link_info %}
						<a href="{{ aOption.link_info }}" class="option_link_info d-inline-block" target="_blank"
						   title="{{ strings.opt_info_helpdesk }}"></a>
				{% endif %}
			</span>

			{% if aOption.disabled %}
				<br />
				<div class="badge bg-success">
					<a href="{{ hrefs.go_pro }}" target="_blank"
					   class="text-light">{{ strings.pro_only_option }}</a>
				</div>
			{% endif %}
		</label>
	</div>

	<div class="col-4">

		{% if aOption.type is sameas('checkbox') %}
			<div class="form-check">
				<input type="checkbox"
					   class="form-check-input"
					   id="Opt-{{ aOption.key }}"
					   name="{{ aOption.key }}"
					   {% if aOption.disabled %}disabled="disabled"{% endif %}
					   aria-labelledby="Label-{{ aOption.key }}"
					   value="Y"
						{{ ( aOption.value is sameas('Y') ) ? 'checked="checked"' : '' }}
				/>
				<label class="form-check-label"
					   for="Opt-{{ aOption.key }}">{{ aOption.summary }}</label>
			</div>

		{% elseif aOption.type is sameas('text') %}

			<input type="text" name="{{ aOption.key }}"
				   id="Opt-{{ aOption.key }}"
				   value="{{ aOption.value|raw }}"
				   placeholder="{{ aOption.value }}"
					{% if aOption.disabled %}
						disabled="disabled"
					{% endif %}
				   class="form-control" />

		{% elseif aOption.type is sameas('password') %}

			<input type="password" name="{{ aOption.key }}"
				   id="Opt-{{ aOption.key }}"
				   value="{{ aOption.value|raw }}"
				   placeholder="{{ strings.supply_password }}"
				   {% if aOption.disabled %}disabled="disabled"{% endif %}
				   class="form-control mb-2" />

			<input type="password" name="{{ aOption.key }}_confirm"
				   id="Opt-{{ aOption.key }}_confirm"
				   value="{{ aOption.value|raw }}"
				   placeholder="{{ strings.confirm_password }}"
				   {% if aOption.disabled %}disabled="disabled"{% endif %}
				   class="form-control" />

		{% elseif aOption.type is sameas('email') %}

			<input type="text" name="{{ aOption.key }}"
				   id="Opt-{{ aOption.key }}"
				   value="{{ aOption.value|raw }}"
				   placeholder="{{ aOption.value }}"
				   {% if aOption.disabled %}disabled="disabled"{% endif %}
				   class="form-control" />

		{% elseif aOption.type is sameas('select') %}

			{% for option_value, option_value_name in aOption.value_options %}
				<div class="form-check">
					<input type="radio" id="Opt-{{ aOption.key }}_{{ option_value }}"
						   name="{{ aOption.key }}"
						   value="{{ option_value }}"
						   {% if aOption.disabled %}disabled="disabled"{% endif %}
							{# this type of comparison required for comment spam as value is 0 or '0' #}
							{% if aOption.value matches "'^"~option_value~"$'" %}checked="checked"{% endif %}
						   class="form-check-input">
					<label class="form-check-label"
						   for="Opt-{{ aOption.key }}_{{ option_value }}">
							{% if aOption.value matches "'^"~option_value~"$'" %}
								<strong>{{ option_value_name }}</strong>
							{% else %}
								{{ option_value_name }}
							{% endif %}</label>
				</div>
			{% endfor %}

		{% elseif aOption.type is sameas('multiple_select') %}

			{% for option_value, option_value_name in aOption.value_options %}
				<div class="form-check">
					<input type="checkbox"
						   class="form-check-input"
						   id="Opt-{{ aOption.key }}_{{ option_value }}"
						   name="{{ aOption.key }}[]"
						   value="{{ option_value }}"
							{% if option_value in aOption.value %}
								checked="checked"
							{% endif %}
							{% if aOption.disabled %}disabled="disabled"{% endif %}
					/>
					<label class="form-check-label"
						   for="Opt-{{ aOption.key }}_{{ option_value }}">
							{% if option_value in aOption.value %}
								<strong>{{ option_value_name }}</strong>
							{% else %}
								{{ option_value_name }}
							{% endif %}</label>
				</div>
			{% endfor %}

		{% elseif aOption.type is sameas('array') %}

			<textarea name="{{ aOption.key }}"
					  id="Opt-{{ aOption.key }}"
					  placeholder="{{ aOption.value|raw }}"
					  rows="{{ aOption.rows }}"
					  {% if aOption.disabled %}disabled="disabled"{% endif %}
					  class="form-control">{{ aOption.value|raw }}</textarea>

		{% elseif aOption.type is sameas('comma_separated_lists') %}

			<textarea name="{{ aOption.key }}"
					  id="Opt-{{ aOption.key }}"
					  placeholder="{{ aOption.value }}"
					  rows="{{ aOption.rows }}"
					  {% if aOption.disabled %}disabled="disabled"{% endif %}
					  class="form-control">{{ aOption.value }}</textarea>

		{% elseif aOption.type is sameas('noneditable_text') %}

			<input name="{{ aOption.key }}" id="Opt-{{ aOption.key }}"
				   type="text" readonly
				   class="form-control"
				   value="{{ aOption.value }}" />

		{% elseif aOption.type is sameas('integer') %}

			<input type="text" name="{{ aOption.key }}"
				   id="Opt-{{ aOption.key }}"
				   value="{{ aOption.value }}"
				   placeholder="{{ aOption.value }}"
				   {% if aOption.disabled %}disabled="disabled"{% endif %}
				   class="form-control" />

		{% else %}
			ERROR: Should never reach this point.
		{% endif %}

		{% if aOption.type is not sameas('checkbox') %}
			{# checkboxes display slightly differently #}
			<div class="options-summary">{{ aOption.summary }}</div>
		{% endif %}
	</div>

	<div class="col option-description">
		<div id="Description-{{ aOption.key }}">
			<div>
				{% for desc in aOption.description %}
					<p>{{ desc|raw }}</p>
				{% endfor %}
			</div>

			<div class="mt-3 text-start text-nowrap">
				{% if aOption.beacon_id|default(false) %}
					<a href="javascript:{}" data-beacon-article-sidebar="{{ aOption.beacon_id }}"
					   title="{{ strings.opt_info_helpdesk }}">{{ strings.more_info }}</a>

				{% elseif aOption.link_info %}
					<a href="{{ aOption.link_info }}" target="_blank"
					   title="{{ strings.opt_info_helpdesk }}">{{ strings.more_info }}</a>
				{% endif %}

				{% if aOption.link_blog %}
					<span class="m-1">&vert;</span>
					<a href="{{ aOption.link_blog }}" target="_blank"
					   title="{{ strings.opt_info_blog }}">{{ strings.blog }}</a>
				{% endif %}

				{% if flags.is_wpcli %}
					<span href="#" style="cursor:pointer;"
						  class="float-end"
					    data-bs-toggle="tooltip"
					    data-bs-placement="left"
					    data-bs-title="WP-CLI Option Key: {{ aOption.key }}"
					>wp-cli:&gt;</span>
				{% endif %}

				{% if flags.show_transfer_switch %}
					{% if attribute(data.xferable_opts, aOption.key) is not same as(false) %}
						<span class="form-check float-end importexport-checkbox"
						      data-bs-toggle="tooltip"
						      data-bs-placement="left"
						      data-bs-title="{{ strings.is_opt_importexport }}"
						>
							<input type="checkbox"
								   class="form-check-input optxfer-exclude"
								   id="optxfer-{{ aOption.key }}"
								   name="optxfer-{{ aOption.key }}"
								   aria-labelledby="Label-{{ aOption.key }}"
								   value="Y"
								{{ ( attribute(data.xferable_opts, aOption.key) is same as('Y') ) ? 'checked="checked"' : '' }}
							/>
							<label class="custom-control-label"
								   for="optxfer-{{ aOption.key }}">&nbsp;</label>
						</span>
					{% endif %}
				{% endif %}
				<div class="clearfix"></div>
			</div>

		</div>
	</div>
</div>