@if (ItemMode == ColType.labelStart || ItemMode == ColType.labelEnd)
{
    <svg viewBox="0 0 @vBox.Width @vBox.Height" xmlns="http://www.w3.org/2000/svg">
        @*<rect x="0" y="0" width="@vBox.Width" height="@vBox.Height" class="canv"></rect>*@
        @foreach (var item in LabelItems())
        {
            <g transform="translate(@(item.pX),@(item.pY))">
                <foreignObject x="0" y="0" width="@vBox.Width" height="@hFO">
                    <div class="hour-label">@item.value</div>
                </foreignObject>
            </g>
        }
    </svg>
}
else
{
    <svg viewBox="0 0 @vBox.Width @vBox.Height" xmlns="http://www.w3.org/2000/svg" style="border-top: 1px solid #000;border-left: 1px solid #000; border-bottom: 1px solid #000;">
        @*<rect x="0" y="0" width="@vBox.Width" height="@vBox.Height" class="canv"></rect>*@
        @foreach (var item in BoxItems())
        {
            <a style="text-decoration: none;" @onclick="()=>selItem(item)">
                <g transform="translate(@(item.pX),@(item.pY))">
                    <rect x="0" y="0" width="@item.width" height="@item.height" class="@item.cssClass" rx="30"></rect>
                    <foreignObject x="@mFO" y="@mFO" width="@item.width" height="@item.height">
                        <div class="event-title">@item.title</div>
                        <div class="event-time">@($"{item.start:HH:mm}")-@($"{item.end:HH:mm}")</div>
                        <div class="event-body">@item.value</div>
                    </foreignObject>
                </g>
            </a>
        }
    </svg>
}

<ToastDisplay DoShow="@showDetail" currPosition="ToastDisplay.DispPosition.midCenter" TitleSx="@titleSx" TitleDx="@titleDx" ReportClose="DetClosed">
    <ChildContent>
        @if (currData != null)
        {
            <div class="bg-dark p-3">
                <svg viewBox="0 0 @(vBox.Height/4) @(vBox.Height/4)" xmlns="http://www.w3.org/2000/svg" >
                    <g>
                        <rect x="0" y="0" width="@(vBox.Height/4)" height="@(vBox.Height/4)" class="@currData.cssClass" rx="30"></rect>
                        <foreignObject x="@mFO" y="@mFO" width="@(vBox.Height/4)" height="@(vBox.Height/3)">
                            <div class="event-title">@currData.title</div>
                            <div class="event-time">@($"{currData.start:HH:mm}")-@($"{currData.end:HH:mm}")</div>
                            <div class="event-body-detail">@currData.value</div>
                        </foreignObject>
                    </g>
                </svg>
            </div>
        }
    </ChildContent>
</ToastDisplay>