@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.GridRowViewModel>

@functions 
{
	private string GetTableReset()
	{
		return "table-layout:fixed;border-collapse:separate;border-spacing:0;border:0;margin:0;outline:0;padding:0;";
	}
}

@{ 
	string rowBackgroundColor = $"background-color:{Model.ColorScheme?.BackgroundColor?.Hex ?? string.Empty};";
	string rowColor = $"color:{Model.ColorScheme?.ForegroundColor?.Hex ?? string.Empty};";
}

<div data-dw-itemtype="@Model.Item?.SystemName.ToLower()" id="@Model.Id" style="@GetTableReset()">
	<table class="row" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;mso-line-height-rule:exactly;@GetTableReset()width:100%;@(rowBackgroundColor)@(rowColor)" width="100%">
		<tbody>
			<tr style="@GetTableReset()">
				<td style="@GetTableReset()">
					<table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;mso-line-height-rule:exactly;@GetTableReset()color:inherit;width:640px;margin-left:auto;margin-right:auto;" width="640">
						<tbody>
							<tr style="@GetTableReset()">
								@foreach(var column in Model.Columns)
								{
									<td data-dw-itemtype="@column.Paragraph?.Item?.SystemName?.ToLower()" class="column col-width-mobile-@column.ColumnWidthMobile" id="@column.Paragraph?.ID" style="mso-table-lspace:0pt;mso-table-rspace:0pt;text-align:left;vertical-align:top;mso-line-height-rule:exactly;@GetTableReset();">
										@column.Output()
									</td>
								}
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</div>
