{% block meter %}

	{% set meter = vars.meter %}
	{% set meter_slug = vars.meter_slug %}
	{% set traffic = vars.traffic %}

	<div class="card meter-card h-100 meter-card-{{ traffic }}">
		<div class="meter-card-accent status-{{ traffic }}"></div>
		<div class="card-body d-flex flex-column">

			<div class="meter-card-header">
				<div>
					<h6 class="meter-card-title">{{ meter.title }}</h6>
					<p class="meter-card-subtitle">{{ meter.subtitle }}</p>
				</div>
				<div class="status-badge status-{{ traffic }}">
					<span class="svg-container">{{ imgs.svgs.status_icon|raw }}</span>
				</div>
			</div>

			<div class="meter-progress-row mb-3">
				<div class="progress">
					<div class="progress-bar status-{{ traffic }}"
						 role="progressbar"
						 style="width: {{ meter.totals.percentage }}%;"
						 aria-valuenow="{{ meter.totals.percentage }}"
						 aria-valuemin="0"
						 aria-valuemax="100"></div>
				</div>
				<span class="score-text">{{ meter.totals.percentage }} / 100</span>
			</div>

			{% if meter.warning|default([]) is not empty %}
				<div class="alert alert-danger mb-2">{{ meter.warning.text }}
					<a href="{{ meter.warning.href }}"
					   class="alert-link"
					   target="_blank">{{ strings.view_details }}</a>
				</div>
			{% endif %}

			<div class="description">
				<div>
					<div class="{% if meter.description|length > 1 %}toggleable-text{% endif %}">
						<p class="meter-card-desc mb-2">{{ meter.description|first }}</p>
					</div>
					<div class="hidden {% if meter.description|length > 1 %}toggleable-text{% endif %}">
						{% for desc in meter.description %}
							<p class="meter-card-desc mb-2">{{ desc }}</p>
						{% endfor %}
					</div>
					<div class="mt-2 {% if meter.description|length > 1 %}toggleable-text{% else %}hidden{% endif %}">
						<a href="javascript:{}" class="d-block fst-italic small">{{ strings.more }}</a>
					</div>
				</div>
			</div>

			<div class="mt-auto pt-3">
				<a class="offcanvas_meter_analysis btn btn-sm btn-outline-{{ traffic == 'good' ? 'success' : ( traffic == 'critical' ? 'danger' : 'warning' ) }} btn-analyse"
				   data-meter="{{ meter_slug }}"
				   href="javascript:{}"
				   aria-controls="ShieldProgressMeterOffcanvas">
					<span class="svg-container">{{ imgs.svgs.analysis|raw }}</span>
					{{ strings.analysis }}
				</a>
			</div>

		</div>
	</div>
{% endblock %}
