{% import '/components/config/macros.twig' as config_macros %}

<div class="shield-option-item">

	<div class="shield-option-row">
		<div class="shield-option-label-zone">
			<div class="shield-option-label-row">
				<span class="option_label_name"
					  id="Label-{{ option.key }}">{{ option.name }}</span>

				<span class="shield-option-helpers">
					{% if option.description|length > 0 %}
						{{ config_macros.icon_action(
							imgs.svgs.expand,
							strings.description,
							'',
							['option-description-expander'],
							{
								'aria-controls': 'Description-'~option.key,
								'aria-expanded': option.is_focus ? 'true' : 'false'
							}
						) }}
					{% endif %}

					{% if option.beacon_id|default(false) %}
						{{ config_macros.icon_action(
							imgs.svgs.help,
							strings.opt_info_helpdesk,
							'',
							['beacon-article'],
							{
								'data-beacon_article_format': 'sidebar',
								'data-beacon_article_id': option.beacon_id
							}
						) }}

					{% elseif option.link_info %}
						{{ config_macros.icon_action(
							imgs.svgs.help,
							strings.opt_info_helpdesk,
							option.link_info,
							[],
							{'target': '_blank'}
						) }}
					{% endif %}

					{% if option.vimeo_id|default('') is not empty %}
						{{ config_macros.icon_action(
							imgs.svgs.video,
							strings.opt_info_video,
							'',
							['option-video'],
							{'data-vimeoid': option.vimeo_id}
						) }}
					{% endif %}

					{% if option.link_blog %}
						{{ config_macros.icon_action(
							imgs.svgs.blog,
							strings.opt_info_blog,
							option.link_blog,
							[],
							{'target': '_blank'}
						) }}
					{% endif %}

					{% if option.disabled and option.unavailable %}
						{{ config_macros.icon_action(
							imgs.svgs.upgrade,
							'Upgrade to Pro to unlock',
							hrefs.go_pro,
							['shield-config-icon-action--upgrade'],
							{'target': '_blank'}
						) }}
					{% endif %}
				</span>
			</div>

			<div class="options-summary">{{ option.summary }}</div>
		</div>

		<div class="shield-option-control-col">
			{% include '/components/config/option_control.twig' %}
		</div>
	</div>

	{% if option.description|length > 0 %}
		<div id="Description-{{ option.key }}"
			 class="option-description {{ option.is_focus ? '':'hidden' }}"
			 aria-hidden="{{ option.is_focus ? 'false' : 'true' }}"
			 aria-labelledby="Label-{{ option.key }}">
			<div class="option-description-content">
				{% for desc in option.description %}
					<p>{{ desc|raw }}</p>
				{% endfor %}
			</div>

			{% if flags.show_transfer_switch %}
				{% if option.key in vars.xferable_opts %}
					<div class="toggle-importexport-container mt-3"
						 data-bs-toggle="tooltip"
						 data-bs-trigger="hover"
						 data-bs-placement="left"
						 data-bs-title="{{ strings.toggle_importexport }}"
					>
						<label class="custom-control-label toggle-importexport-inclusion" for="optxfer-{{ option.key }}">
							<input type="checkbox"
								   id="optxfer-{{ option.key }}"
								   aria-labelledby="Label-{{ option.key }}"
								   data-key="{{ option.key }}"
									{{ ( option.key not in vars.xfer_excluded_opts ) ? 'checked="checked"' : '' }}
							/>
							{{ strings.is_opt_importexport }}
						</label>
					</div>
				{% endif %}
			{% endif %}
		</div>
	{% endif %}
</div>