{% assign icon = include.icon | default: "mood-sad" %}
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">

	{% if include.illustration %}
		{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
		<div class="empty-img">{% include ui/illustration.html image=illustration height="256" %}</div>
	{% elsif include.icon-text %}
		<div class="empty-header">{{ include.icon-text }}</div>
	{% else %}
		<div class="empty-icon">{% include ui/icon.html icon=icon %}</div>
	{% endif %}


	<p class="empty-title">{{ include.title | default: "No results found" }}</p>
	<p class="empty-subtitle text-secondary">
		{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
	</p>
	<div class="empty-action">
		{% assign button-text = include.button-text | default: "Search again" %}
		{% assign button-icon = include.button-icon | default: "search" %}
		{% include ui/button.html text=button-text color="primary" icon=button-icon href="." %}
	</div>
</div>