<div class="security_zone">

	{% if flags.global_plugin_disabled %}
		<div class="alert alert-danger" role="alert">
			{{ strings.global_plugin_disabled }}
			<button type="button"
					class="{{ vars.href_global_plugin_enable.classes|join(' ') }} shield-button-link"
					{% for key, value in vars.href_global_plugin_enable.data %}data-{{ key }}="{{ value }}"{% endfor %}
			>{{ strings.reenable_plugin }}</button>

		</div>
	{% endif %}

	<div class="row">

		<div class="col-lg-8 mt-4">
			{% for component in vars.components %}
				{{ component|raw }}
			{% endfor %}
		</div>

		<div class="col-lg-4 mt-3">
			<div class="card">
				{% if vars.actions is not empty %}
					<div class="card-header">

						<div class="list-group">
							{% for action in vars.actions %}
								{% if action.is_action %}
									<button type="button"
											class="list-group-item list-group-item-action {{ action.classes|join(' ') }}"
											title="{{ action.title }}"
											{% for key, value in action.data|default([]) %}data-{{ key }}="{{ value }}"{% endfor %}
											>
										<span class="svg-container me-1"><i class="{{ action.icon }}" aria-hidden="true"></i></span>{{ action.title }}
									</button>
								{% elseif action.href is not empty %}
									<a class="list-group-item list-group-item-action {{ action.classes|join(' ') }}"
									   title="{{ action.title }}"
									   href="{{ action.href }}"
									   {% for key, value in action.data|default([]) %}data-{{ key }}="{{ value }}"{% endfor %}
									   >
										<span class="svg-container me-1"><i class="{{ action.icon }}" aria-hidden="true"></i></span>{{ action.title }}
									</a>
								{% endif %}
							{% endfor %}
						</div>
					</div>
				{% endif %}

				<div class="w-100 title-image-container p-2">
					{{ imgs.svgs.heading|raw }}
				</div>

				<div class="card-body">
					<div class="section-description">
						<div class="description h-100">
							{% for line in strings.description %}
								<p class="mb-2">{{ line }}</p>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
