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

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<div class="bp-c-iconography bp-js-iconography {{classes}}">
		{% if data.icons | length > 5 %}
			{{search.default("bp-c-iconography__search", data.search)}}
		{% endif %}

		<div class="bp-c-iconography__content">
			<ul class="bp-c-iconography__list bp-l-grid bp-l-grid--with-spacing">
				{% for item in data.icons %}

					<li class="bp-c-iconography__item bp-l-grid__col bp-l-grid__col--6@viewport-4 bp-l-grid__col--4@viewport-7 bp-l-grid__col--3@viewport-9 bp-l-grid__col--2@viewport-12">
						{{iconPreview.default("", item)}}
					</li>

				{% endfor %}
			</ul>
		</div>
	</div>

{% endmacro %}