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

<form method="post"
	  class="options_form_for options_form_for--modern form py-0"
	  novalidate="novalidate"
	  autocomplete="off"
	  data-context="{{ vars.form_context }}"
>
	<input type="hidden" name="all_opts_keys" value="{{ vars.all_opts_keys|join(',') }}" />

	<div class="shield-options-layout has-rail">

		{% set rail_nav_items = [] %}
		{% for opt_sect_key,opt_section in vars.all_options %}
			{% set rail_nav_items = rail_nav_items|merge( [ {
				target: '#tab-'~unique_render_id~'-'~opt_section.slug,
				id: 'tab-navlink-'~unique_render_id~'-'~opt_section.slug,
				controls: 'tab-'~unique_render_id~'-'~opt_section.slug,
				label: opt_section.title_short,
				is_focus: opt_section.is_focus
			} ] ) %}
		{% endfor %}

		<aside class="shield-options-rail">
			<div class="shield-options-rail-accent"></div>
			{% include '/components/config/options_rail_tabs.twig' with {
				nav_id: 'ModuleOptionsNav',
				nav_items: rail_nav_items
			} only %}
			<div class="shield-options-rail-save">
				<button type="submit"
						class="btn btn-primary icwp-form-button"
						name="submit">{{ strings.save_all_settings }}</button>
			</div>
		</aside>

		<div class="shield-options-content">
			<div class="tab-content container-fluid">
				{% for opt_section in vars.all_options %}
					<section class="tab-pane shield-options-panel {% if opt_section.is_focus %}active show{% endif %}"
							 role="tabpanel"
							 id="tab-{{ unique_render_id }}-{{ opt_section.slug }}"
							 aria-labelledby="tab-navlink-{{ unique_render_id }}-{{ opt_section.slug }}">
						<div class="shield-options-panel-accent"></div>
						<div class="shield-options-panel-header">
							<div class="shield-options-panel-title">{{ opt_section.title }}</div>

							<div class="shield-options-panel-header-actions">
								{% if opt_section.beacon_id|default(false) %}
									{{ config_macros.icon_action(
										imgs.svgs.help,
										strings.opt_info_helpdesk,
										'',
										['beacon-article'],
										{
											'data-beacon_article_id': opt_section.beacon_id,
											'data-beacon_article_format': 'modal'
										}
									) }}
								{% elseif ( opt_section.summary is defined ) and opt_section.summary|length %}
									{{ config_macros.icon_action(
										imgs.svgs.help,
										strings.description,
										'',
										['section_title_info'],
										{
											'data-bs-toggle': 'collapse',
											'data-bs-target': '#collapse-'~opt_section.slug,
											'aria-controls': 'collapse-'~opt_section.slug,
											'aria-expanded': 'false'
										}
									) }}
								{% endif %}
							</div>
						</div>

						{% if ( opt_section.summary is defined ) and opt_section.summary|length and ( opt_section.beacon_id|default(false) is empty ) %}
							<div class="collapse shield-options-summary-collapse" id="collapse-{{ opt_section.slug }}">
								<div class="card">
									<div class="card-body">
										{% for item in opt_section.summary %}
											<p class="card-text">{{ item|raw }}</p>
										{% endfor %}
									</div>
								</div>
							</div>
						{% endif %}

						<div class="shield-options-panel-body">
							{% if opt_section.warnings|length %}
								{% for section_warning in opt_section.warnings %}
									<div class="alert alert-warning text-center">{{ section_warning|raw }}</div>
								{% endfor %}
							{% endif %}

							{% if opt_section.critical_warnings|length %}
								{% for section_warning in opt_section.critical_warnings %}
									<div class="alert alert-danger">
										<h4 class="alert-heading">Important!</h4>
										{{ section_warning|raw }}
									</div>
								{% endfor %}
							{% endif %}

							{% if opt_section.notices|length %}
								{% for section_notice in opt_section.notices %}
									<div class="alert alert-info text-center">{{ section_notice|raw }}</div>
								{% endfor %}
							{% endif %}

							{% include '/components/config/custom/'~opt_section.slug~'.twig' ignore missing %}

							<div class="shield-options-option-list">
								{% for key, option in opt_section.options %}
									{% include '/components/config/option.twig' %}
								{% endfor %}
							</div>
						</div>
					</section>
				{% endfor %}
			</div>
		</div>
	</div>
</form>