<form action="{{ form_action }}" method="post"
	  class="icwpOptionsForm form"
	  novalidate="novalidate"
	  autocomplete="off"
	  data-mod_slug="{{ vars.mod_slug }}"
>

	<div id="ModuleOptionsNav" class="insights-sub-nav" aria-orientation="horizontal">
		<ul class="nav nav-tabs" role="tablist">
		{% for opt_sect_key,opt_section in data.all_options %}
			<li class="nav-item">

				<a href="#tab-{{ opt_section.slug }}"
				   class="nav-link {{ opt_section.primary ? 'active' : '' }}"
				   {% if opt_section.primary %}aria-selected="true"{% endif %}
				   id="tab-navlink-{{ opt_section.slug }}"
				   data-bs-toggle="tab" role="tab" aria-controls="{{ opt_section.slug }}">
						<span>{{ opt_section.title_short }}</span>
				</a>
			</li>
		{% endfor %}
		</ul>
	</div>

	<div class="tab-content container-fluid">
		{% for opt_section in data.all_options %}
			<div class="tab-pane {{ opt_section.primary ? 'active show primary_section' : 'non_primary_section' }}"
				 role="tabpanel" id="tab-{{ opt_section.slug }}">

				<div class="row">
					<div class="col-12">
						<h5 class="mt-3">
							<span class="mb-3 d-inline-block">{{ opt_section.title }}</span>

							{% if opt_section.beacon_id|default(false) %}
								<a href="javascript:{}" class="beacon-article"
								   data-beacon-article-id="{{ opt_section.beacon_id }}"
								   data-beacon-article-format="modal"
								   title="{{ strings.opt_info_helpdesk }}">
									<span class="dashicons dashicons-editor-help"></span>
								</a>

							{% else %}
								{% if ( opt_section.summary is defined ) and opt_section.summary|length %}

									<a class="section_title_info"
									   data-bs-toggle="collapse"
									   data-target="#collapse-{{ opt_section.slug }}"
									><span class="dashicons dashicons-editor-help"></span></a>
									<br />
									<div class="collapse mb-3" 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 %}
							{% endif %}

						</h5>
					</div>
				</div>

				{% if opt_section.warnings|length %}
					{% for section_warning in opt_section.warnings %}
						<div class="row">
							<div class="col">
								<div class="alert alert-warning text-center">{{ section_warning|raw }}</div>
							</div>
						</div>
					{% endfor %}
				{% endif %}

				{% if opt_section.notices|length %}
					{% for section_notice in opt_section.notices %}
						<div class="row">
							<div class="col">
								<div class="alert alert-info text-center">{{ section_notice|raw }}</div>
							</div>
						</div>
					{% endfor %}
				{% endif %}

				{% for key, aOption in opt_section.options %}
					{% include '/components/options_form/option.twig' %}
				{% endfor %}
		</div>
		{% endfor %}
	</div>
		<div class="row">
			<div class="col text-start">
				<button type="submit" class="button button-primary ms-3 mt-3 icwp-form-button"
						name="submit">{{ strings.save_all_settings }}</button>
			</div>
		</div>
</form>
