@namespace AntDesign
@inherits AntDomComponentBase

<CascadingValue Value="this">
    @ChildContent
</CascadingValue>

<div @ref="@Ref" class="@ClassMapper.Class" style="@Style" id="@Id">
    @if (Title != null || TitleTemplate != null)
    {
        <div class="ant-descriptions-header">
            <div class="ant-descriptions-title">
                @if (TitleTemplate != null)
                {
                    @TitleTemplate
                }
                else
                {
                    @Title
                }
            </div>
        </div>
    }
    <div class="ant-descriptions-view">
        <table>
            <tbody>
                @if (Layout == DescriptionsLayout.Horizontal)
                {
                    foreach (var row in this._itemMatrix)
                    {
                        <tr class="ant-descriptions-row">
                            @foreach (var item in row)
                            {
                                if (Bordered == false)
                                {
                                    <!-- Horizontal & NOT Bordered -->
                                    <td class="ant-descriptions-item" colspan="@item.realSpan" @ref="@item.item.Ref">
                                        <div class="ant-descriptions-item-container">
                                            <span class="ant-descriptions-item-label @(Colon ? "ant-descriptions-item-colon" : null)" style="@item.item.LabelStyle">
                                                @if (item.item.TitleTemplate != null)
                                                {
                                                    @item.item.TitleTemplate
                                                }
                                                else
                                                {
                                                    @item.item.Title
                                                }
                                            </span>
                                            <span class="ant-descriptions-item-content" style="@item.item.ContentStyle">
                                                @item.item.ChildContent
                                            </span>
                                        </div>
                                    </td>
                                }
                                else
                                {
                                    <!-- Horizontal & Bordered -->
                                    <td class="ant-descriptions-item-label" style="@item.item.LabelStyle">
                                        @if (item.item.TitleTemplate != null)
                                        {
                                            @item.item.TitleTemplate
                                        }
                                        else
                                        {
                                            @item.item.Title
                                        }
                                    </td>
                                    <td class="ant-descriptions-item-content" colspan="@(item.realSpan * 2 - 1)" style="@item.item.ContentStyle">
                                        @item.item.ChildContent
                                    </td>
                                }
                            }
                        </tr>
                    }
                }
                else if (Layout == DescriptionsLayout.Vertical)
                {
                    if (Bordered == false)
                    {
                        <!-- Vertical & NOT Bordered -->
                        foreach (var row in this._itemMatrix)
                        {
                            <tr class="ant-descriptions-row">
                                @foreach (var item in row)
                                {
                                    <td class="ant-descriptions-item" colspan="@item.realSpan">
                                        <div class="ant-descriptions-item-container">
                                            <span class="ant-descriptions-item-label @(Colon ? "ant-descriptions-item-colon" : null)" style="@item.item.LabelStyle">
                                                @if (item.item.TitleTemplate != null)
                                                {
                                                    @item.item.TitleTemplate
                                                }
                                                else
                                                {
                                                    @item.item.Title
                                                }
                                            </span>
                                        </div>
                                    </td>
                                }
                            </tr>
                            <tr class="ant-descriptions-row">
                                @foreach (var item in row)
                                {
                                    <td class="ant-descriptions-item" colspan="@item.realSpan">
                                        <div class="ant-descriptions-item-container">
                                            <span class="ant-descriptions-item-content" style="@item.item.ContentStyle">
                                                @item.item.ChildContent
                                            </span>
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    }
                    else
                    {
                        <!-- Vertical & Bordered -->
                        foreach (var row in this._itemMatrix)
                        {
                            <tr class="ant-descriptions-row">
                                @foreach (var item in row)
                                {
                                    <td class="ant-descriptions-item-label" colspan="@item.realSpan" style="@item.item.LabelStyle">
                                        @if (item.item.TitleTemplate != null)
                                        {
                                            @item.item.TitleTemplate
                                        }
                                        else
                                        {
                                            @item.item.Title
                                        }
                                    </td>
                                }
                            </tr>
                            <tr class="ant-descriptions-row">
                                @foreach (var item in row)
                                {
                                    <td class="ant-descriptions-item-content" colspan="@item.realSpan" style="@item.item.ContentStyle">
                                        @item.item.ChildContent
                                    </td>
                                }
                            </tr>
                        }
                    }
                }
            </tbody>
        </table>
    </div>
</div>