{% assign icons = include.icons %}
{% assign limit = 20 %}
{% if jekyll.environment != 'development' %}
	{% assign limit = null %}
{% endif %}
<div class="card">
	<div class="card-header">
		<div class="card-title">{{ include.title }}</div>
	</div>
	<div class="card-body">
		<div class="row" data-icon-preview>
			<div class="col-md-6 col-lg-4">
				{% assign first-icon = icons | first %}
				{% capture first-icon-svg %}{% include ui/icon.html icon=first-icon %}{% endcapture %}

				<div class="demo-icon-preview">
					<div data-icon-preview-icon>
						{{ first-icon-svg }}
					</div>
					<h2 class="my-2" data-icon-preview-title>{{ first-icon }}</h2>
					<div class="demo-icon-preview-icon" data-icon-preview-code>
						{% highlight html %}{{ first-icon-svg }}{% endhighlight %}
					</div>
				</div>
			</div>
			<div class="col">
				<div class="demo-icons-list-wrap">
					<div class="demo-icons-list">
						{% for icon in icons limit: limit %}
						<a href="#" class="demo-icons-list-item" data-bs-toggle-icon="{{ icon }}" title="{{ icon }}" data-icon-svg="{% capture svg %}{% highlight html %}{% include ui/icon.html icon=icon %}{% endhighlight %}{% endcapture %}{{ svg | escape }}">
							{% include ui/icon.html icon=icon %}
							<div class="mt-1 text-muted text-h5">{{ icon }}</div>
						</a>
						{% endfor %}
						{% for icon in (0..20) %}
						<div></div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{% capture_once scripts %}
<script>
	var getClosest = function (elem, selector) {
		for ( ; elem && elem !== document; elem = elem.parentNode ) {
			if ( elem.matches( selector ) ) return elem;
		}
		return null;
	};

	(function () {
		const elements = document.querySelectorAll('[data-bs-toggle-icon]');

		if (elements.length) {
			elements.forEach(function (element) {
				element.addEventListener('click', function(e){
					var icon = this.dataset.toggleIcon,
						svg = this.querySelector('svg').outerHTML,
						iconCode = this.dataset.iconSvg,
						editor = getClosest(this, '[data-icon-preview]');

					editor.querySelector('[data-icon-preview-icon]').innerHTML = svg;
					editor.querySelector('[data-icon-preview-title]').innerText = icon;
					editor.querySelector('[data-icon-preview-code]').innerHTML = iconCode.trim();

					e.preventDefault();
					return false;
				})
			});
		}
	})();
</script>
{% endcapture_once %}