@{
string width = "col-" + @GetString("Item.Width") + "-12";
var colshrink = "";
var textflex = "";
var wrapreverse = "";
var Order = GetString("Item.Order");
}

@if(GetBoolean("Item.VerticalAlignContent") && (Order.Contains("icon-"))) {
  textflex = "text-flex";
}
@if(Order.Contains("-right")) {
  wrapreverse = "reverse-small";
}


<div class="paragraph @width @textflex @wrapreverse grid" id='@GetString("Item.Id")'>

  @if (GetString("Item.Order") == "title-first" || GetString("Item.Order") == "")
  {
  @RenderHeading()
  @RenderImage()
  @RenderSubHeading()
  @RenderText()
  @RenderButton()
  }

  @if (GetString("Item.Order") == "image-first")
  {
  @RenderImage()
  @RenderHeading()
  @RenderSubHeading()
  @RenderText()
  @RenderButton()
  }

  @if (GetString("Item.Order") == "title-sub-first")
  {
  @RenderHeading()
  @RenderSubHeading()
  @RenderImage()
  @RenderText()
  @RenderButton()
  }

  @if (GetString("Item.Order") == "icon-xs")
  {
  <div class="col-2-12 no-p-l">
    @RenderImage()
  </div>
  <div class="col-10-12 no-p-r">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  }

  @if (GetString("Item.Order") == "icon-sm")
  {
  <div class="col-3-12 no-p-l">
    @RenderImage()
  </div>
  <div class="col-9-12 no-p-r">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  }

  @if (GetString("Item.Order") == "icon-md")
  {
  <div class="col-4-12 no-p-l">
    @RenderImage()
  </div>
  <div class="col-8-12 no-p-r">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  }

  @if (GetString("Item.Order") == "icon-xs-right")
  {
  <div class="col-10-12 no-p-l">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  <div class="col-2-12 no-p-r">
    @RenderImage()
  </div>
  }

  @if (GetString("Item.Order") == "icon-sm-right")
  {
  <div class="col-9-12 no-p-l">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  <div class="col-3-12 no-p-r">
    @RenderImage()
  </div>
  }

  @if (GetString("Item.Order") == "icon-md-right")
  {
  <div class="col-8-12 no-p-l">
    @RenderHeading()
    @RenderSubHeading()
    @RenderText()
    @RenderButton()
  </div>
  <div class="col-4-12 no-p-r">
    @RenderImage()
  </div>
  }

  @RenderModule()

</div>

@helper RenderHeading()
{
if (GetBoolean("Item.ShowTitle") != false){
  var titleposition = "";
if (GetBoolean("Item.TitleCenter")){
  titleposition = "text-center";
}
if (!string.IsNullOrEmpty(GetString("Item.Title")))
{
<h1 class="paragraph-heading @titleposition">
  <span>
    @GetString("Item.Title")
  </span>
</h1>
}
}
}

@helper RenderButton()
{
var Url = GetString("Item.Link");

if (!string.IsNullOrEmpty(Url) && !string.IsNullOrEmpty(GetString("Item.LinkText")))
{
if (Url.Contains("http"))
{
<text>
  <button class="btn pull-right" style="margin-bottom: 30px !important">
    <a href="@GetString("Item.Link")" target="_blank" class="btn btn-dw-primary pull-right">@GetString("Item.LinkText")</a>
  </button>
</text>
}
else if (Url.Contains("/"))
{
<text>
  <button class="btn pull-right" style="margin-bottom: 30px !important">
    <a href="@GetString("Item.Link")" class="btn btn-dw-primary pull-right">@GetString("Item.LinkText")</a>
  </button>
</text>
}
else
{
<text>
  <button class="btn pull-right" style="margin-bottom: 30px !important">
    <a href="@GetString("Item.Link")" class="btn btn-dw-primary pull-right">@GetString("Item.LinkText")</a>
  </button>
</text>
}
}
}

@helper RenderSubHeading()
{
if (!string.IsNullOrEmpty(GetString("Item.Subtitle")))
{
<h2>
  @GetString("Item.Subtitle")
</h2>
}
}

@helper RenderText()
{
if (!string.IsNullOrWhiteSpace(GetString("Item.Text"))){
<div class="figure">
  @GetString("Item.Text")
</div>
}
}

@helper RenderModule()
{
<div>
  @GetString("ParagraphModule")
</div>
}

@helper RenderImage()
{

string image = System.Web.HttpContext.Current.Server.UrlEncode(GetString("Item.Image"));
string svg = System.Web.HttpContext.Current.Server.UrlEncode(GetString("Item.Svg"));

<!-- Choosing the smallest possible width that will work with responsive sizes -->
string optimizedwidth = "1920";

switch (GetString("Item.Width")){
case "12":
optimizedwidth = "1280";
break;
case "9":
optimizedwidth = "960";
break;
case "6":
optimizedwidth = "722";
break;
case "3":
optimizedwidth = "722";
break;
case "8":
optimizedwidth = "960";
break;
case "4":
optimizedwidth = "722";
break;
}

string optimizedheight = ((Convert.ToInt32(optimizedwidth)/16)*9).ToString();

var crop = "0";

if(GetBoolean("Item.ImgOrgSize")){
  crop = "5";
}

if (GetString("Item.ImageStyle") == "ball") {
crop = "0";
optimizedwidth = "500";
optimizedheight = "500";
}

string altText = GetString("Item.Title");

string colorspace = "";

if(string.IsNullOrEmpty(GetString("Item.ImageColorMode"))) {
  colorspace = "rgb";
} else {
  colorspace = GetString("Item.ImageColorMode");
}

string imagebackground = "";

if(string.IsNullOrEmpty(GetString("Item.ImageBg"))) {
  imagebackground = "";
} else {
  imagebackground = GetString("Item.ImageBg");
  imagebackground = imagebackground.Replace("#", "");
}

if(!string.IsNullOrEmpty(image) || !string.IsNullOrEmpty(svg)){
  <div class="img-responsive dw-std-image">
    @if (!string.IsNullOrEmpty(image))
    {
    <img class="content-image img-responsive" alt="@altText" style="@GetImageBorderCss()" src="/Admin/Public/GetImage.ashx?image=@image&amp;width=@optimizedwidth&amp;height=@optimizedheight&amp;crop=@crop&amp;colorspace=@colorspace&amp;Compression=75&amp;background=@imagebackground"/>
    } else if (!string.IsNullOrEmpty(svg)){
    <img class="content-image img-responsive" alt="@altText" style="@GetImageBorderCss()" src="@svg" width="@optimizedwidth" height="auto"/>
    } else {

    }
  </div>
}
}

@functions {
private string GetImageBorderCss()
{
if (GetString("Item.ImageStyle") == "cover")
{
return "padding: 8px";
}
else if (GetString("Item.ImageStyle") == "cover-border")
{
return "padding: 4px; border: 1px solid #e1e1e1; border-radius: 0px !important";
}
else if (GetString("Item.ImageStyle") == "frame")
{
return "padding: 6px; border: 1px solid #e1e1e1; border-radius: 0px !important";
}
else if (GetString("Item.ImageStyle") == "rounded")
{
return "border-radius: 8px !important";
}
else if (GetString("Item.ImageStyle") == "ball")
{
return "border-radius: 1000px !important";
}
else if (GetString("Item.ImageStyle") == "shadow")
{
return "box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2)";
}
else
{
return string.Empty;
}
}
}