{% assign icons = site.data[include.group] %}
<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 %}
				{% assign first-icon-name = first-icon[0] %}
				{% assign first-icon-svg = first-icon[1] %}

				<div class="demo-icon-preview">
					<div data-icon-preview-icon>
						{% include ui/icon.html svg-icon=first-icon-svg %}
					</div>
					<h2 class="mt-2" data-icon-preview-title>{{ first-icon-name }}</h2>
					<pre class="highlight user-select-all" style="max-height: 10rem"><code data-icon-preview-code>{{ first-icon-svg | escape }}</code></pre>
				</div>
			</div>
			<div class="col">
				<div class="icons-list-wrap">
					<ul class="icons-list">
						{% for icon in icons %}
						<li class="icons-list-item">
							{% assign svg-icon = icon[1] %}
							<a href="#" class="text-reset" data-toggle-icon="{{ icon[0] }}" data-toggle="tooltip" title="{{ icon[0] }}">
								{% include ui/icon.html svg-icon=svg-icon class="icon-md" %}
							</a>
						</li>
						{% endfor %}
						{% for icon in (0..20) %}
						<li></li>
						{% endfor %}
					</ul>
				</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-toggle-icon]');

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

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

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