@typeparam TItem

<div class="mg-card-view-container" style="@ContainerStyle">
    @if (ShowFilterPanel && FilterPanel is not null)
    {
        <div class="mg-card-filter-panel">
            @FilterPanel
        </div>
    }

    @if (Data is { Count: > 0 })
    {
        <div class="mg-card-scroll-area">
            <div class="mg-card-grid @CssClass"
                 style="--cols-xs: @ColumnCountXs; --cols-sm: @ColumnCountSm; --cols-lg: @ColumnCountLg;">
                @foreach (var item in PagedItems)
                {
                    <div id="@GetCardElementId(item)"
                         class="mg-card @CardCssClass"
                         @onclick="() => OnCardClickInternal(item)"
                         style="@(OnCardClick.HasDelegate ? "cursor: pointer;" : "")">
                        @CardTemplate(item)
                    </div>
                }
            </div>
        </div>

        @if (ShowPager && Data.Count > PageSize)
        {
            <DxPager PageCount="@((int)Math.Ceiling((double)Data.Count / PageSize))"
                     ActivePageIndex="_activePageIndex"
                     ActivePageIndexChanged="OnActivePageIndexChanged"
                     CssClass="mt-2" />
        }
    }
</div>