
<!--
	N.b. the help text here is hardcoded English.
-->

<form class="zenario_grid_form zenario_grid_properties_form" onsubmit="return false;">
	<div class="content_wrap">
		
		<% switch (m.object_type) { %>
			<% case 'grouping': %>
				<h3>Grouping</h3>
				<p>Groupings are a way of putting one or more slots into a single container.</p>
				<p>The HTML around this grouping will look like this:</p>
			<% break; %>
			<% case 'space': %>
				<h3>Whitespace</h3>
				<p>Whitespaces let you add some space on a layout.
					This space can be empty, or you enter some custom HTML in the box below.<p>
				<p>The HTML around this whitespace will look like this:</p>
			<% break; %>
			<% case 'slot': %>
				<h3>Slot</h3>
				<p>Slots are the most common element, have a width in columns, and may contain plugins.<p>
				<p>The HTML around this slot will look like this:</p>
			<% break; %>
			<% case 'grid_break': %>
				<h3>Gridbreak</h3>
				<p>A gridbreak splits the grid into two different containers (or into three containers if you use a
					second gridbreak, into four containers if you use a third break break, and so on).</p>
				<p>A common use for gridbreaks is to split a layout into a header, body and footer
					(though you can have as many containers as you wish).</p>
				<p>Each grid layout has at least one container. Each gridbreak you add to the layout creates an
					additional container. The HTML for two containers separated by a gridbreak looks like this:<p>
			<% break; %>
			<% case 'grid_break_with_slot': %>
				<h3>Gridbreak + slot</h3>
				<p>A gridbreak splits the grid into two different containers (or into three containers if you use a
					second gridbreak, into four containers if you use a third break break, and so on).</p>
				<p>To create a slot that appears outside of the grid layout, you can use a
					&ldquo;Gridbreak + slot&rdquo;. This gives you a gridbreak, and places a slot in the break outside
					of the containers.</p>
				<p>The HTML such a slot looks like this:<p>
			<% break; %>
		<% } %>
		
		<% switch (m.object_type) { %>
			<% case 'grouping': %>
			<% case 'space': %>
			<% case 'slot': %>
				<pre>
					&lt;div class=&quot;span
						span{{m.data.width|escape}}{{m.cell.is_alpha? ' alpha' : ''}}{{m.cell.is_omega? ' omega' : ''}}{{m.object_type == 'space'? ' grid_space' : ''}}
						{{m.object_type == 'slot'? 'slot <em>[[Name]]</em>' : ''}}
						<em>[[Additional class name(s)]]</em>
						<em>...</em>
					&quot;&gt;
<br/>				&nbsp; &nbsp; <em>...</em>
<br/>				&lt;/div&gt;
				</pre>
			<% break; %>
			<% case 'grid_break': %>
			<% case 'grid_break_with_slot': %>
				<pre>
				&lt;div class=&quot;<em>...</em>&quot;&gt;
<br/>				&nbsp; &nbsp; &lt;div class=&quot;container container{{m.data.width|escape}}&quot;&gt;
<br/>				&nbsp; &nbsp; &nbsp; &nbsp; <em>...</em>
<br/>				&nbsp; &nbsp; &lt;/div&gt;
<br/>				&lt;/div&gt;
					<% if (m.object_type == 'grid_break') { %>
<br/>					<em>&lt;!-- This is the gridbreak here --&gt;</em>
					<% } else { %>
<br/>					<em>&lt;!-- The gridbreak starts here --&gt;</em>
<br/>					&lt;div class=&quot;slot <em>[[Name]]</em> <em>[[Additional class name(s)]]</em>&quot;&gt;
<br/>					&nbsp; &nbsp; <em>...</em>
<br/>					&lt;/div&gt;
<br/>					<em>&lt;!-- The gridbreak ends here --&gt;</em>
					<% } %>
<br/>				&lt;div class=&quot;<em>[[CSS class name(s) for the following container]]</em> <em>...</em>&quot;&gt;
<br/>				&nbsp; &nbsp; &lt;div class=&quot;container container{{m.data.width|escape}}&quot;&gt;
<br/>				&nbsp; &nbsp; &nbsp; &nbsp; <em>...</em>
<br/>				&nbsp; &nbsp; &lt;/div&gt;
<br/>				&lt;/div&gt;
				</pre>
			<% break; %>
		<% } %>
		
		<div id="zenario_grid_error"></div>
	
		<input type="hidden" name="type" value="{{m.object_type|e}}" maxlength="100"/>
	
		<% if (m.object_type == 'slot' || m.object_type == 'grid_break_with_slot') { %>
			<p>{{zenarioA.phrase.gridSlotName}}</p>
			<input type="text" name="name" value="{{m.data.name|e}}" maxlength="100"/>
			<div id="zenario_grid_slot_contents"><span>{{zenarioGM.getSlotDescription(m.slot)}}</span></div>
		<% } %>
	
		<% if (m.object_type != 'grid_break' && m.object_type != 'grid_break_with_slot') { %>
			<div id="zenario_grid_slot_columns">
				<span>
					<span class="value">{{m.data.width|e}}</span>
					<span class="title">{{zenario.applyMergeFieldsN(zenarioA.phrase.column, zenarioA.phrase.columns, m.data.width)}}</span>
				</span>
			</div>
		<% } %>
	
		<% if (m.object_type != 'grid_break') { %>
			<p>{{zenarioA.phrase.gridCSSClass}}</p>
			<input type="text" name="css_class" value="{{m.data.css_class|e}}" maxlength="100"/>
		<% } %>
	
		<% if (m.object_type == 'space') { %>
			<p>{{zenarioA.phrase.gridHtml}}</p>
			<textarea name="html">{{m.data.html|e}}</textarea>
		<% } %>
	
		<% var show = false, showFirst = false, showOnly = false; %>
	
		<% if (m.object_type == 'grid_break' || m.object_type == 'grid_break_with_slot') { %>
			<% if (m.object_type == 'grid_break_with_slot') { %>
				<% show = showOnly = true; %>
			<% } %>
	
		<% } else if (m.lib.data.responsive && m.object_type == 'space') { %>
			<p>
				<input type="radio" name="small" id="grid_resp_hide" value="hide" checked="checked"/>
				<label for="grid_resp_hide">{{zenarioA.phrase.gridResp_hide}}</label>
			</p>
	
		<% } else if (m.lib.data.responsive) { %>
			<% show = true; %>
			
			<% var isLastSlot = !m.cell.is_alpha && m.cell.is_omega; %>
			<% var isFullSlot = m.cell.is_alpha && m.cell.at_right_edge; %>
			
			<% if (isLastSlot) { %>
				<% showFirst = true; %>
			<% } else if (isFullSlot) { %>
				<% showOnly = true; %>
			<% } %>
		<% } %>
	
	
	
	
		<% if (show) { %>
			<p>
				<input type="radio" name="small" id="grid_resp_always" value="" {{(!m.data.small? 'checked="checked"' : '')}}/>
				<label for="grid_resp_always">
					<% if (m.object_type == 'grid_break_with_slot') { %>
						{{zenarioA.phrase.gridResp_slot_always}}
					<% } else { %>
						{{zenarioA.phrase.gridResp_always}}
					<% } %>
				</label>
			
				<br/>
				<input type="radio" name="small" id="grid_resp_hide" value="hide" {{('hide' == m.data.small? 'checked="checked"' : '')}}/>
				<label for="grid_resp_hide">
					<% if (m.object_type == 'grid_break_with_slot') { %>
						{{zenarioA.phrase.gridResp_slot_hide}}
					<% } else { %>
						{{zenarioA.phrase.gridResp_hide}}
					<% } %>
				</label>
		
				<% if (showFirst) { %>
					<br/>
					<input type="radio" name="small" id="grid_resp_first" value="first" {{('first' == m.data.small? 'checked="checked"' : '')}}/>
					<label for="grid_resp_first">{{zenarioA.phrase.gridResp_first}}</label>
				<% } %>
				<% if (showOnly) { %>
					<br/>
					<input type="radio" name="small" id="grid_resp_only" value="only" {{('only' == m.data.small? 'checked="checked"' : '')}}/>
					<label for="grid_resp_only">
					<% if (m.object_type == 'grid_break_with_slot') { %>
						{{zenarioA.phrase.gridResp_slot_only}}
					<% } else { %>
						{{zenarioA.phrase.gridResp_only}}
					<% } %>
				</label>
				<% } %>
			</p>
		<% } %>
		
		<% if (m.object_type == 'grid_break' || m.object_type == 'grid_break_with_slot') { %>
			<br/>
			<p>
				To style each container differently, you should give them a different CSS class name.
				(For example,
					&ldquo;Gridbreak_Header&rdquo;,
					&ldquo;Gridbreak_Body&rdquo;, or
					&ldquo;Gridbreak_Footer&rdquo;.)
			<p></p>
				Tip: To give the very first container a CSS class name, create a gridbreak and place it at
				the very start of the layout.
			</p>
			<p>{{zenarioA.phrase.gridGridCSSClass}}</p>
			<input type="text" name="grid_css_class" value="{{m.data.grid_css_class|e}}" maxlength="100"/>
		<% } %>

		<div class="align_center">
			<input type="submit" id="zenario_grid_slotname_button" class="i zenario_submit_button selected" value="{{zenarioA.phrase.gridSaveProperties}}"/>
		</div>
	</div>
</form>
