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

@functions {
	private string GetTableReset()
	{
		return "border:0;margin:0;outline:0;padding:0;";
	}
}

@{
	string blockType = "productcatalog_block";

	var page = Dynamicweb.Content.Services.Pages.GetPage(Pageview.ID);
	var settings = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(page?.Parent).Item;
	var blockId = Model.ID;
	var block = Model.Item;

	string backgroundColor = $"background-color:{Model.ColorScheme?.BackgroundColor?.Hex ?? string.Empty};";
	string foregroundColor = $"color:{Model.ColorScheme?.ForegroundColor?.Hex ?? string.Empty};";

	int padding = Dynamicweb.Core.Converter.ToInt32(block.GetRawValueString("Padding", "0"));

	string moduleOutput = Model.GetModuleOutput();

}

@if (!string.IsNullOrWhiteSpace(moduleOutput))
{
	<table id="@blockId" class="@blockType" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;@GetTableReset()color:inherit;width:100%;@(backgroundColor)@(foregroundColor)">
		<tbody>
		<tr style="@GetTableReset()">
			<td style="@GetTableReset()padding:@(padding)px">
				<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;@GetTableReset()color:inherit;width:100%;">
					<tbody>
						@moduleOutput
					</tbody>

				</table>
				<!--[if mso]><br/><![endif]-->
			</td>
		</tr>
		</tbody>
	</table>
}
else if (Pageview.IsVisualEditorMode)
{
	<table id="@blockId" class="@blockType" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;@GetTableReset()color:inherit;width:100%;@(backgroundColor)@(foregroundColor)">
		<tbody>
		<tr style="@GetTableReset()">
			<td style="@GetTableReset()padding:@(padding)px">
				<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;@GetTableReset()color:inherit;width:100%;">
					<tbody>
					<tr>
						<td>
							<div class="alert alert-info" role="alert">
                                <span>@Translate("App: Edit this column to configure")</span>
                            </div>
						</td>
					</tr>
					</tbody>
				</table>
				<!--[if mso]><br/><![endif]-->
			</td>
		</tr>
		</tbody>
	</table>
}
