<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="inverted" Name="inverted" />
                <RadzenLabel Text="Inverted" Component="inverted" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenLabel Text="Fill" Component="fillMode" />
                <RadzenSelectBar @bind-Value="@fillMode" TValue="FillMode" Size="ButtonSize.Small" Name="fillMode">
                    <Items>
                        <RadzenSelectBarItem Value="FillMode.Gradient" Text="Gradient" />
                        <RadzenSelectBarItem Value="FillMode.Solid" Text="Solid" />
                        <RadzenSelectBarItem Value="FillMode.None" Text="None" />
                    </Items>
                </RadzenSelectBar>
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>

    <RadzenChart Animate="true" Style="width: 100%; height: 500px;">
        <RadzenPyramidSeries Data="@levels" CategoryProperty="Level" ValueProperty="Count"
                            Inverted="@inverted" FillMode="@fillMode"
                            StrokeWidth="1" Strokes="@(new[] { "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)" })">
            <RadzenSeriesDataLabels Visible="true" />
        </RadzenPyramidSeries>
        <RadzenLegend Position="LegendPosition.Right" />
    </RadzenChart>
</RadzenStack>

@code {
    bool inverted;
    FillMode fillMode = FillMode.Gradient;

    class PyramidData
    {
        public string Level { get; set; } = "";
        public double Count { get; set; }
    }

    PyramidData[] levels = new[]
    {
        new PyramidData { Level = "Physiological", Count = 1000 },
        new PyramidData { Level = "Safety", Count = 600 },
        new PyramidData { Level = "Love & Belonging", Count = 350 },
        new PyramidData { Level = "Esteem", Count = 150 },
        new PyramidData { Level = "Self-actualization", Count = 50 },
    };
}
