<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" aria-label="Basic example">
			{% 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 class="col-12">
		<div class="btn-group filter-groups list-group list-group-horizontal mt-3" role="group" aria-label="Basic example">
			{% for card_group_key,card_group_name in vars.overview_cards.mod_groups %}
				<button type="button" class="btn btn-outline-dark"
						data-category="mod"
						data-filter="{{ card_group_key }}">{{ card_group_name }}</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-left 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-right float-right">
							{% 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 } ) );
				}
			} );
		}
	} );

	jQuery( function () {
		jQuery( '[data-toggle="popover"]' ).popover( {
			placement: 'top',
			trigger: 'hover focus',
			delay: 150,
			html: false
		} );
	} );
} );
</script>