{% $.each(workstations, (idx, row) => { %}
	{% const row_workstation_name = frappe.utils.escape_html(row.name); %}
	<div class="workstation-wrapper" data-workstation="{{row_workstation_name}}">
		<div class="workstation-status text-left" style="">
			<span class="indicator-pill no-indicator-dot whitespace-nowrap {{row.color}}" style="margin: 8px 0px 0px 8px;">
				<span class="workstation-status-title" style="font-size:10px">{{row.status}}</span>
			</span>
		</div>
		<div class="workstation-image {{row.workstation_off}}" onclick="location.href='{{ frappe.utils.get_form_link('Workstation', row.name)}}'">
			<div class="workstation-image-container flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
				{% if(row.status_image) { %}
					<img class="workstation-image-cls" src="{{row.status_image}}">
				{% } else { %}
					<div class="workstation-image-cls workstation-abbr" style="margin:6px; height:82px">{{frappe.get_abbr(row_workstation_name, 2)}}</div>
				{% } %}
			</div>
			<span class="ellipsis" title="{{row_workstation_name}}">
				<div style="font-size:11px; text-align:center;padding-bottom:8px">{{row.workstation_name}}</div>
			</span>
		</div>
	</div>
{% }); %}