{% import '/components/config/macros.twig' as config_macros %}
{% import _self as option_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">
			{% if option.type is same as('checkbox') %}
				<div class="form-check form-switch">
					<span class="shield-option-switch-state {{ ( option.value is same as('Y') ) ? 'on' : '' }}">
						{{ ( option.value is same as('Y') ) ? 'Enabled' : 'Disabled' }}
					</span>
					<input type="checkbox"
						   class="form-check-input"
						   id="Opt-{{ option.key }}"
						   name="{{ option.key }}"
						   role="switch"
						   {% if option.disabled %}disabled="disabled"{% endif %}
						   aria-labelledby="Label-{{ option.key }}"
						   value="Y"
							{{ ( option.value is same as('Y') ) ? 'checked="checked"' : '' }}
					/>
				</div>

			{% elseif option.type is same as('text') %}

				<input type="text" name="{{ option.key }}"
					   id="Opt-{{ option.key }}"
					   value="{{ option.value|raw }}"
					   placeholder="{{ option.value }}"
						{% if option.disabled %}
							disabled="disabled"
						{% endif %}
					   class="form-control" />

			{% elseif option.type is same as('password') %}
				{{ option_macros.password_control( option, strings ) }}

			{% elseif option.type is same as('email') %}

				<input type="text" name="{{ option.key }}"
					   id="Opt-{{ option.key }}"
					   value="{{ option.value|raw }}"
					   placeholder="{{ option.value }}"
					   {% if option.disabled %}disabled="disabled"{% endif %}
					   class="form-control" />

			{% elseif option.type is same as('select') %}

				<select name="{{ option.key }}"
						class="form-select"
						id="Opt-{{ option.key }}"
						{% if option.disabled %}disabled="disabled"{% endif %}
						aria-label="Select for: {{ option.name }}">
					{% for option_value, option_value_settings in option.value_options %}
						<option
								value="{{ option_value }}"
								{% if not option_value_settings.is_available %}disabled="disabled"{% endif %}
								{% if option.value matches "'^"~option_value~"$'" %}selected{% endif %}
						>{{ option_value_settings.name|raw }}</option>
					{% endfor %}
				</select>

			{% elseif option.type is same as('multiple_select') %}
				{{ option_macros.multiple_select_control( option, strings ) }}

			{% elseif option.type is same as('array') %}

				<textarea name="{{ option.key }}"
						  id="Opt-{{ option.key }}"
						  placeholder="{{ option.value|raw }}"
						  rows="{{ option.rows }}"
						  {% if option.disabled %}disabled="disabled"{% endif %}
						  class="form-control">{{ option.value|raw }}</textarea>

			{% elseif option.type is same as('comma_separated_lists') %}

				<textarea name="{{ option.key }}"
						  id="Opt-{{ option.key }}"
						  placeholder="{{ option.value }}"
						  rows="{{ option.rows }}"
						  {% if option.disabled %}disabled="disabled"{% endif %}
						  class="form-control">{{ option.value }}</textarea>

			{% elseif option.type is same as('noneditable_text') %}

				<input name="{{ option.key }}" id="Opt-{{ option.key }}"
					   type="text" readonly
					   class="form-control"
					   value="{{ option.value }}" />

			{% elseif option.type is same as('integer') %}

				<input type="text" name="{{ option.key }}"
					   id="Opt-{{ option.key }}"
					   value="{{ option.value }}"
					   placeholder="{{ option.value }}"
					   {% if option.disabled %}disabled="disabled"{% endif %}
					   class="form-control" />

			{% else %}
				ERROR: Should never reach this point.
			{% endif %}
		</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>

{% macro password_control(option, strings) %}
	<div class="shield-option-stacked-control">
		<input type="password" name="{{ option.key }}"
			   id="Opt-{{ option.key }}"
			   value="{{ option.value|raw }}"
			   placeholder="{{ strings.supply_password }}"
			   autocomplete="new-password"
			   {% if option.disabled %}disabled="disabled"{% endif %}
			   class="form-control" />

		<input type="password" name="{{ option.key }}_confirm"
			   id="Opt-{{ option.key }}_confirm"
			   value="{{ option.value|raw }}"
			   placeholder="{{ strings.confirm_password }}"
			   autocomplete="new-password"
			   {% if option.disabled %}disabled="disabled"{% endif %}
			   class="form-control" />
	</div>
{% endmacro %}

{% macro multiple_select_control(option, strings) %}
	<div class="shield-option-multiple-list">
		{% for option_value, option_value_settings in option.value_options %}
			<div class="form-check shield-option-multiple-item">
				<input type="checkbox"
					   class="form-check-input"
					   id="Opt-{{ option.key }}_{{ option_value }}"
					   name="{{ option.key }}[]"
					   value="{{ option_value }}"
					   {% if not option_value_settings.is_available %}disabled="disabled"{% endif %}
						{% if option_value in option.value %}
							checked="checked"
						{% endif %}
						{% if option.disabled %}disabled="disabled"{% endif %}
				/>
				<label class="form-check-label"
					   for="Opt-{{ option.key }}_{{ option_value }}"
					   {% if not option_value_settings.is_available %}title="Available with {{ strings.plugin_name }}"{% endif %}
				>
					{% if option_value in option.value %}
						<strong>{{ option_value_settings.name|raw }}</strong>
					{% else %}
						{{ option_value_settings.name|raw }}
					{% endif %}
				</label>
			</div>
		{% endfor %}
	</div>
{% endmacro %}