Filter List

{% import "macros/program-card.twig" as program_card %}

{% set filter_data = {
	enable_search: true,
	class: 'tux-c-filter--vertical',
	enable_reset: true,
	filter_title: 'Filter Items',
	attributes: [
		{
			label: 'Level',
			default: 'Select Level',
			name: 'level_of_study',
			type: 'accordion_filter',
			options: [
				{
					value: 'level_of_study-one',
					label: 'One'
				},
				{
					value: 'level_of_study-two',
					label: 'Two'
				},
				{
					value: 'level_of_study-three',
					label: 'Three'
				}
			]
		},
		{
			label: 'Area',
			default: 'Select Area',
			name: 'area_of_study',
			type: 'accordion_filter',
			options: [
				{
					value: 'area_of_study-business',
					label: 'Business'
				},
				{
					value: 'area_of_study-education',
					label: 'Education'
				}
			]
		}
	]
} %}

{% set items = [
	{
		action_label: 'View Item',
		class: 'mix level_of_study-one area_of_study-business',
		content: '<p>Aenean lacinia bibendum nulla sed consectetur.</p>',
		heading: 'Elit Ornare',
		id: 1,
		terms: 'One / Business',
		url: '#'
	},
	{
		action_label: 'View Item',
		class: 'mix level_of_study-one area_of_study-education',
		content: '<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>',
		heading: 'Malesuada Vehicula',
		id: 2,
		terms: 'One / Education',
		url: '#'
	},
	{
		action_label: 'View Item',
		class: 'mix level_of_study-two area_of_study-education',
		content: '<p>Donec ullamcorper nulla non metus auctor fringilla.</p>',
		heading: 'Mattis Lorem',
		id: 3,
		terms: 'Two / Education',
		url: '#'
	},
	{
		action_label: 'View Item',
		class: 'mix level_of_study-two area_of_study-business',
		content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
		heading: 'Ridiculus Inceptos',
		id: 4,
		terms: 'Two / Business',
		url: '#'
	}
] %}

<x-filter-list :filter="filter_data">
	{% for item in items %}
		<x-card
			:class="item.class"
			:footer="program_card.footer(item)"
			:content="program_card.content(item)"
			:footer="program_card.footer(item)"
			:attrs="{'data-title': item.heading|lower ~ item.content|lower|striptags}"
		/>
	{% endfor %}
</x-filter-list>