<div class="security_zone">

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

		</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 %}
								<a class="list-group-item list-group-item-action {{ action.classes|join(' ') }}"
								   title="{{ action.title }}"
								   href="{{ action.href|default('#') }}"
								   {% for key, value in action.data|default([]) %}data-{{ key }}="{{ value }}"{% endfor %}
								   >
									<span class="svg-container me-1">{{ action.icon|raw }}</span>{{ action.title }}
								</a>
							{% 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>