<div class="app-listing item-list image-view-container item-selector">
{% for (var i=0; i < data.length; i++) { var item = data[i]; %}
	{% const item_name = frappe.utils.escape_html(item.name); %}
	{% const item_title = frappe.utils.escape_html(item.item_name || item.name); %}
	{% if (i % 4 === 0) { %}<div class="image-view-row">{% } %}
	<div class="image-view-item" data-name="{{ item_name }}">
		<div class="image-view-header doclist-row">
			<div class="list-value">
				<a class="grey list-id" data-name="{{ item_name }}"
					title="{{ item_title }}">
					{{ item_title }}</a>
			</div>
		</div>
		<div class="image-view-body">
			<a  data-item-code="{{ item_name }}"
				title="{{ item_title }}"
			>
				<div class="image-field"
					style="
					{% if (!item.image) { %}
						background-color: #fafbfc;
					{% } %}
					border: 0px;"
				>
					{% if (!item.image) { %}
					<span class="placeholder-text">
						{%= frappe.get_abbr(item_title) %}
					</span>
					{% } %}
					{% if (item.image) { %}
					<img src="{{ frappe.utils.escape_html(item.image) }}" alt="{{ item_title }}">
					{% } %}
				</div>
			</a>
		</div>
	</div>
	{% if ((i % 4 === 3) || (i===data.length - 1)) { %}</div>{% } %}
{% endfor %}
</div>
