<div class="security_zone_component zone-component-card status-{{ vars.enabled_status }}">
	<div class="zone-card-accent status-{{ vars.enabled_status }}"></div>

	<div class="card-header-row">
		<div class="d-flex align-items-center gap-2">
			<h6 class="component-title">{{ strings.title }}</h6>
			{% if vars.enabled_status == 'good' %}
				<span class="status-badge badge-good">
					<span class="badge-icon">{{ imgs.svgs.status_good|raw }}</span> {{ strings.status_label }}
				</span>
			{% elseif vars.enabled_status == 'neutral_enabled' %}
				<span class="status-badge badge-neutral">
					<span class="badge-icon">{{ imgs.svgs.status_neutral_enabled|raw }}</span> {{ strings.status_label }}
				</span>
			{% elseif vars.enabled_status == 'okay' %}
				<span class="status-badge badge-okay">
					<span class="badge-icon">{{ imgs.svgs.status_okay|raw }}</span> {{ strings.status_label }}
				</span>
			{% elseif vars.enabled_status == 'bad' %}
				<span class="status-badge badge-bad">
					<span class="badge-icon">{{ imgs.svgs.status_bad|raw }}</span> {{ strings.status_label }}
				</span>
			{% else %}
				<span class="status-badge badge-neutral">
					<span class="badge-icon">{{ imgs.svgs.status_neutral|raw }}</span> {{ strings.status_label }}
				</span>
			{% endif %}
		</div>
		{% if vars.actions.config is defined %}
			<a class="configure-link {{ vars.actions.config.classes|join(' ') }}"
			   href="javascript:{}"
			   title="{{ vars.actions.config.title }}"
			   {% for key, value in vars.actions.config.data %}data-{{ key }}="{{ value }}"{% endfor %}
			><span class="configure-gear">{{ imgs.svgs.gear|raw }}</span> {{ strings.configure }}</a>
		{% endif %}
	</div>

	<div class="card-body-area">
		<p class="component-subtitle">{{ strings.subtitle }}</p>
	</div>

	{% if strings.explanation|default(false) is not empty %}
		<div class="explanations-block">
			{% for expl in strings.explanation %}
				<div class="explanation-item">
					<span class="explanation-icon">{{ imgs.svgs.explanation_info|raw }}</span>
					<span>{{ expl }}</span>
				</div>
			{% endfor %}
		</div>
	{% endif %}

</div>
