<%/*
expects context:

- _ {Lodash}
- basePath {string}
- theme {string}
- themeOverride {boolean}
- themeProperties {Object}
- panel {Panel}
- tools {boolean}
- toolbars {boolean}
- borders {boolean}
- showSlotIds {boolean}
- forceMargin {boolean|null}
- offline {boolean}

*/%><%
var noMargin = typeof forceMargin === 'boolean' ? !forceMargin : panel.layout.grid.noMargin;
%>
<div class="layout layout-grid<%= panel.layout.grid.noGap ? ' no-gap' : '' %><%= noMargin ? ' no-margin' : '' %>" style="<%
	%>grid-template-columns:repeat(<%= panel.layout.grid.columns %>, 1fr);<%
	%>grid-template-rows:repeat(<%= panel.layout.grid.rows %>, 1fr);<%
	%>transform:scale(<%= panel.layout.grid.zoom %>);<%
	%>width:<%= 100.0/panel.layout.grid.zoom %>%;<%
	%>height:<%= 100.0/panel.layout.grid.zoom %>%;<%
%>"><%
	_.forEach(_.sortBy(panel.layout.slots, 'index'), function (slot) {
		if (slot.hidden) return;
%>
		<%- include('slot.ejs', {
			_,
			basePath,
			theme,
			themeOverride,
			themeProperties,
			panel,
			slot,
			tools,
			toolbar: toolbars,
			border: borders,
			showSlotId: showSlotIds,
			offline,
			singled: false,
		}) %>
<%
	});
%>
</div>
