<div class="shield-needs-attention h-100">
	{% set is_compact_all_clear = flags.compact_all_clear|default(false) and not flags.has_items %}
	{% if not is_compact_all_clear %}
		<div class="shield-needs-attention__status-strip {{ flags.has_items ? 'has-issues' : 'all-clear' }}"
			 data-needs-attention-status-strip="1"
			 data-needs-attention-status="{{ flags.has_items ? 'has-issues' : 'all-clear' }}">
			<i class="{{ strings.status_strip_icon_class }}" aria-hidden="true"></i>
			<span class="shield-needs-attention__strip-text">{{ strings.status_strip_text }}</span>
			{% if strings.status_strip_subtext|default('') is not empty %}
				<span class="shield-needs-attention__strip-sub">{{ strings.status_strip_subtext }}</span>
			{% endif %}
		</div>
	{% endif %}

	{% if flags.has_items %}
		<div class="shield-needs-attention__zone-cards">
			{% for zone in vars.zone_groups %}
				<div class="shield-needs-attention__zone-card is-{{ zone.severity }}">
					<div class="shield-needs-attention__zone-accent is-{{ zone.severity }}"></div>
					<div class="shield-needs-attention__zone-header">
						<span class="shield-needs-attention__zone-icon">
							<i class="{{ zone.icon_class }}" aria-hidden="true"></i>
						</span>
						<span class="shield-needs-attention__zone-name">{{ zone.label }}</span>
						<span class="shield-badge badge-{{ zone.severity }} shield-needs-attention__zone-badge">{{ zone.total_issues }}</span>
					</div>

					{% for item in zone.items %}
						<div class="shield-needs-attention__item is-{{ item.severity }}">
							<span class="shield-needs-attention__pip is-{{ item.severity }}"></span>
							<div class="shield-needs-attention__item-desc">
								<strong>{{ item.label }}</strong> {{ item.description }}
							</div>
							<div class="shield-needs-attention__item-action">
								<a href="{{ item.href }}" class="is-{{ item.severity }}">
									{{ item.action }} <i class="bi bi-arrow-right" aria-hidden="true"></i>
								</a>
							</div>
						</div>
					{% endfor %}
				</div>
			{% endfor %}
		</div>
	{% else %}
		<div class="shield-needs-attention__all-clear-card" data-needs-attention-all-clear-mode="{{ is_compact_all_clear ? 'compact' : 'full' }}">
			<div class="shield-needs-attention__all-clear-accent"></div>
			<div class="shield-needs-attention__all-clear-shield">
				<i class="{{ strings.all_clear_icon_class }}" aria-hidden="true"></i>
			</div>
			{% if not is_compact_all_clear %}
				<div class="shield-needs-attention__all-clear-title" data-needs-attention-widget-copy="all-clear">{{ strings.all_clear_title }}</div>
				<div class="shield-needs-attention__all-clear-subtitle">{{ strings.all_clear_subtitle }}</div>
			{% endif %}
			<div class="shield-needs-attention__chips">
				{% for chip in vars.zone_chips %}
					<span class="shield-needs-attention__chip is-{{ chip.severity }}">
						<i class="{{ chip.icon_class }}" aria-hidden="true"></i> {{ chip.label }}
					</span>
				{% endfor %}
			</div>
		</div>
	{% endif %}
</div>
