<form action="{{ form_action }}" method="post" class="icwpOptionsForm form" novalidate="novalidate"
	  autocomplete="off">

	<ul id="ModuleOptionsNav" class="nav nav-tabs" role="tablist" aria-orientation="vertical">
		{% for 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-toggle="tab" role="tab" aria-controls="{{ opt_section.slug }}"
				>{{ opt_section.title_short }}</a>
			</li>
		{% endfor %}
	</ul>

	<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="mb-3 mt-3">
							<small>
								{% if opt_section.help_video_url is not empty %}
									<a class="section-help-video"
									   title="{{ strings.show_help_video_section }}"
									   href="{{ opt_section.help_video_url }}"
									   data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true"
									   data-featherlight-iframe-width="1200"
									   data-featherlight-iframe-height="675">
										<span class="dashicons dashicons-video-alt3"></span>
									</a>
								{% endif %}
							</small>
							{{ opt_section.title }}
						</h5>
					</div>
					<div class="col-12">
						{% if ( opt_section.summary is defined ) and opt_section.summary|length %}
							<div class="row">
								<div class="col">
									<div class="alert alert-secondary" role="definition">
										<ul class="mb-0">
											{% for item in opt_section.summary %}
												<li class="">{{ item|raw }}</li>
											{% endfor %}
										</ul>
									</div>
								</div>
							</div>
						{% endif %}
					</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 %}
					<div class="form-group row">
						<label for="Opt-{{ aOption.key }}"
							   id="Label-{{ aOption.key }}"
							   class="col-sm-1 col-md-2 col-lg-3 col-xl-2 col-form-label">
							{{ aOption.name }}
							{% if aOption.disabled %}
								<br />
								<div class="badge badge-success">
									<a href="{{ hrefs.go_pro }}" target="_blank"
									   class="text-light">{{ strings.pro_only_option }}</a>
								</div>
							{% endif %}
						</label>

						<div class="col-xl-6 col-lg-7 col-md-8 col-sm-8">

							{% if aOption.type is sameas('checkbox') %}
								<div class="form-check-null">
									<span class="icwp-switch">
										<input type="checkbox" name="{{ aOption.key }}"
											   id="Opt-{{ aOption.key }}" class="form-check-input"
											   {% if aOption.disabled %}disabled="disabled"{% endif %}
												aria-labelledby="Label-{{ aOption.key }}"
											   value="Y" {{ ( aOption.value is sameas('Y') ) ? 'checked="checked"' : '' }} />
										<span class="icwp-slider round"></span>
									</span>
									<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') %}

								<select name="{{ aOption.key }}"
										{% if aOption.disabled %}disabled="disabled"{% endif %}
										id="Opt-{{ aOption.key }}"
										class="custom-select">
									{% for option_value, option_value_name in aOption.value_options %}
										<option value="{{ option_value }}"
												{% if aOption.value == option_value %}
													selected="selected"
												{% endif %}
												id="Opt-{{ aOption.key }}_{{ option_value }}">
											{{ option_value_name }}
										</option>
									{% endfor %}
								</select>

							{% elseif aOption.type is sameas('multiple_select') %}

								<select name="{{ aOption.key }}[]"
										id="Opt-{{ aOption.key }}"
										multiple="multiple" multiple
										size="{{ aOption.value_options|length }}"
										{% if aOption.disabled %}disabled="disabled"{% endif %}
										class="custom-select">
									{% for option_value, option_value_name in aOption.value_options %}
										<option value="{{ option_value }}"
												{% if option_value in aOption.value %}
													selected="selected"
												{% endif %}
												id="Opt-{{ aOption.key }}_{{ option_value }}">
											{{ option_value_name }}
										</option>
									{% endfor %}
								</select>

							{% 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>{{ aOption.summary }}</div>
							{% endif %}
							<div class="collapse option-description"
								 id="Description{{ aOption.key }}">{{ aOption.description|raw }}</div>
						</div>

						<div class="col-1">
							<div class="option-links">
								<ul>
									<li><a data-toggle="collapse" href="#Description{{ aOption.key }}" role="button"
										   class="option-link">{{ strings.description }}</a></li>
									{% if aOption.link_info %}
										<li><a href="{{ aOption.link_info }}" target="_blank" class="option-link">
										{{ strings.more_info }}</a></li>
										{% if aOption.link_blog %}
										<li><a href="{{ aOption.link_blog }}" target="_blank" class="option-link">
											{{ strings.blog }}</a></li>
									{% endif %}
									{% endif %}
								</ul>

							</div>
						</div>
					</div>
				{% endfor %}
		</div>
		{% endfor %}
	</div>
	<div class="container-fluid form-actions">
		<div class="row">
			<div class="col">
				<button type="submit" class="btn btn-primary btn-lg icwp-form-button"
						name="submit">{{ strings.save_all_settings }}</button>
			</div>
		</div>
	</div>
</form>