InformationBox.razor

@using DataJuggler.Blazor.Components
@using DataJuggler.UltimateHelper
@using BlazorStyled
@using DataJuggler.Blazor.Components.Enumerations

<Styled @bind-Classname=@InfoBoxStyle>
    background-color: @BackgroundColor.Name;
    display: @Display;
    position: @Position;
    left: @LeftStyle;
    height: @HeightStyle;
    top: @TopStyle;
    Width: @WidthStyle;
    border-color: @BorderColor.Name;
    border-width: 1px;
    border-style: solid;
    border-radius: @BorderRadiusStyle;
    overflow: @Overflow;
    transform: scale(@ScaleValue);
    transform-origin: top left;
    vertical-align: @VerticalAlignment;
</Styled>
<Styled @bind-Classname=@InfoBoxHeaderStyle>
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @BorderColor.Name;
    height: @HeaderHeightStyle;
    background-size: 100% 100%;
    background-image: url('@HeaderImageUrl');
    color: @TitleTextColor.Name;    
</Styled>
<Styled @bind-Classname=@Column1Style>
    position: @ListItemPosition;
    left: @Column1LeftStyle;
    width: @Column1WidthStyle;
    text-align: @Column1TextAlignStyle;
</Styled>
<Styled @bind-Classname=@Column2Style>
    display: inline-block;
    text-align: @Column2TextAlignStyle;
    width: @Column2WidthStyle;    
</Styled>
<Styled @bind-Classname=@ItemContainerStyle>
    display: block;
    white-space: nowrap;
    position: @ListItemPosition;
    left: @ListItemLeftStyle;
    top: @ListItemTopStyle;
</Styled>
<Styled @bind-Classname=@ListItemStyle>
    display: block;
    font-size: @FontSizeStyle;
    font-name: @FontName;
    height: @ListItemHeightStyle;
    min-height: @ListItemHeightStyle;
</Styled>
<Styled @bind-Classname=@ImageStyle>
    display: inline-block;
    background-size: 100% 100%;
    position: @ListItemPosition;
    left: @ImageLeftStyle;
    top: @ImageTopStyle;
</Styled>
<Styled @bind-Classname=@HeaderTextStyle>
    position: @HeaderTextPosition;
    top: @HeaderTextVerticalOffsetStyle;
    font-size: @HeaderFontSizeStyle;
    font-weight: @HeaderFontWeight;
    font-family: @HeaderFontName;
</Styled>

<div class="@InfoBoxStyle">
    <div class="@InfoBoxHeaderStyle">
        <span class="@HeaderTextStyle">
            @Title
        </span>
    </div>
    <div class="@ItemContainerStyle">
        @if (ItemContenteAlignment == ItemContenteAlignmentEnum.ItemsOnBottom)
        {
            @BodyContent
        }
        @if (ListHelper.HasOneOrMoreItems(Items))
        {
            <table>
            @foreach (Item item in Items)
            {
                <tr class="@ListItemStyle">                    
                    <td class="@Column1TextAlign" width="@Column1Width">
                        <div class="@Column1Style textdonotwrap">
                            <span class="@Column1ClassName">
                                @item.Caption
                            </span>
                        </div>
                    </td>                    
                    <td width="@Gap"></td>                    
                    <td class="@Column2TextAlign @Column2ClassName textdonotwrap" width="@Column2Width">
                        <div class="@Column2Style textdonotwrap">
                            @if ((item.IncludeImage) && (item.ImageAlignment == ImageAlignmentEnum.ImageOnLeftOfText))
                            {
                                <span class="@ImageStyle textdonotwrap">
                                    <img src="@item.ImageUrl" height="@item.ImageHeight" width="@item.ImageWidth" />
                                </span>
                            }
                            <span class="@Column2ClassName textdonotwrap">
                                @item.Text
                            </span>
                            @if ((item.IncludeImage) && (item.ImageAlignment == ImageAlignmentEnum.ImageOnRightOfText))
                            {
                                <span class="@ImageStyle textdonotwrap">
                                    <img src="@item.ImageUrl" height="@item.ImageHeight" width="@item.ImageWidth" />
                                </span>
                            }
                        </div>
                    </td>
                </tr>
            }
            </table>
        }
        @if (ItemContenteAlignment == ItemContenteAlignmentEnum.ItemsOnTop)
        {
            @BodyContent
        }
    </div>
</div>