{# ========================================================================== #}
{# :: Iconography #}
{# ========================================================================== #}
{#
	Visual representation of the different icons that are included in the folder
	defined by the configfile.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/icon-preview.njk" as iconPreview %}
{% import "components/fallback.njk" as fallback %}
{% import "components/iconography.njk" as iconography %}

{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{# {% import ROUTEDATA.DETAIL.data as icons %} #}
{% set icons = ROUTEDATA.DETAIL.data %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<section class="bp-l-section">
	<header class="bp-l-section__header">
		<h1 class="bp-l-section__title">Iconography</h1>
	</header>

	{{iconography.default("bp-l-section__content", {
		icons: icons,
		search: {
			id: "icon-search",
			name: "icon-search",
			placeholder: "Search"
		}
	})}}

	{% if not icons %}
		{{fallback.default("", {
			text:
				"I am not detecting any icon. Have you tried
				shutting me off and on again?"
		})}}
	{% endif %}
</section>