<div class="row">
	<div class="col">
		<h5 class="mb-4">Shield Issues Highlighter</h5>
	</div>
</div>
<div class="row mb-4">
	<div class="col-12">
		<p>{{ strings.click_clear_filter }}
			<a href="#" id="ClearFilterStateArea">{{ strings.clear_filter }}</a>
		</p>
	</div>
	<div class="col-12">
		<div class="btn-group filter-states" role="group">
			{% for state_key in vars.overview_cards.states %}
				<button type="button" class="btn btn-outline-dark state-{{ state_key }}"
						data-category="state"
						data-filter="{{ state_key }}">{{ attribute(vars.overview_cards.state_names, state_key) }}</button>
			{% endfor %}
		</div>
	</div>
</div>

<div class="row overview-card-row mb-3 card-deck" id="overview-card-shuffle">
{% for card_section in vars.overview_cards.sections %}
	{% for card in card_section.cards %}
		<div class="col-xl-3 col-lg-3 col-md-4 card-item"
				{% if not card.groups is empty %}
					data-groups='["{{ card.groups|keys|join('","') }}"]'
				{% else %}
					data-groups='[]'
				{% endif %}

			 data-state="{{ card.state }}"
		>
			<div class="text-start overview card mb-3
				{% if card.state == 'danger' %}
				state-danger
				{% elseif card.state == 'warning' %}
				state-warning
				{% elseif card.state == 'info' %}
				state-ok
				{% else %}
				state-good
				{% endif %}
				"
				 id="overviewcard-{{ card.id }}"
				 {% if card.summary is defined %}title="{{ card.summary }}"{% endif %}
			>
					<div class="card-header font-weight-bolder p-2">

						<div class="w-75 d-inline-block">
							<span class="dashicons title-icon"></span>
							<span class="card-title">{{ card.name }}</span>
						</div>
						<div class="d-inline-block text-end float-end">
							{% if card.href|default('') is not empty %}
								<a href="{{ card.href }}" title="{{ strings.go_to_options }}" target="_blank"
								   class="card-link"><span class="dashicons dashicons-admin-generic"></span></a>
							{% endif %}
						</div>

					</div>
					<div class="card-body p-2">
						<p class="m-0">{{ card.summary }}</p>
						{% if card.help|default('') is not empty %}
							<p class="text-muted mb-0 mt-1">{{ card.help }}</p>
						{% endif %}
					</div>
				</div>
			</div>
	{% endfor %}
{% endfor %}
	</div>
<script>

document.addEventListener( 'DOMContentLoaded', function () {
	window.demo = new ShieldCardShuffle(
		document.getElementById( 'overview-card-shuffle' ),
		'.card-deck .card-item'
	);

	document.getElementById( "ClearFilterStateArea" ).addEventListener( 'click', function ( evt ) {
		var filterByArea = document.querySelector( '.filter-states' );
		if ( filterByArea ) {
			Array.from( filterByArea.children ).forEach( function ( button ) {
				if ( button.classList.contains( "active" ) ) {
					button.dispatchEvent( new MouseEvent( "click", { bubbles: true, cancellable: true } ) );
				}
			} );
		}
		/*
		filterByArea = document.querySelector( '.filter-groups' );
		if ( filterByArea ) {
			Array.from( filterByArea.children ).forEach( function ( button ) {
				if ( button.classList.contains( "active" ) ) {
					button.dispatchEvent( new MouseEvent( "click", { bubbles: true, cancellable: true } ) );
				}
			} );
		}*/
	} );

	if ( document.querySelector( '.state-danger' ) !== null ) {
		document.querySelector('.state-danger').dispatchEvent( new MouseEvent( "click", { bubbles: true, cancellable: true } ) );
	}
	if ( document.querySelector( '.state-warning' ) !== null ) {
		document.querySelector('.state-warning').dispatchEvent( new MouseEvent( "click", { bubbles: true, cancellable: true } ) );
	}
} );
</script>