<RadzenStack class="rz-p-0 rz-p-md-12">
    <RadzenCard class="rz-p-4" Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Vertical">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
                <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                    Allow navigation
                    <RadzenSwitch @bind-Value="@allowNavigation" Style="margin-top: 4px;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "allow navigation" }})" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                    Buttons Style
                    <RadzenSelectBar @bind-Value="@style" TextProperty="Text" ValueProperty="Value" 
                            Data="@(Enum.GetValues(typeof(ButtonStyle)).Cast<ButtonStyle>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
                    <RadzenDropDown @bind-Value="@style" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "buttons style" }})"
                                Data="@(Enum.GetValues(typeof(ButtonStyle)).Cast<ButtonStyle>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-flex rz-display-xl-none" Style="width: 200px;" />
                </RadzenStack>
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
                <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                    Buttons Variant
                    <RadzenSelectBar @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" 
                            Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
                    <RadzenDropDown @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "buttons variant" }})"
                                Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-flex rz-display-xl-none" Style="width: 200px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                    Buttons Shade
                    <RadzenSelectBar @bind-Value="@shade" TextProperty="Text" ValueProperty="Value" 
                            Data="@(Enum.GetValues(typeof(Shade)).Cast<Shade>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
                    <RadzenDropDown @bind-Value="@shade" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "buttons shade" }})"
                                Data="@(Enum.GetValues(typeof(Shade)).Cast<Shade>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-flex rz-display-xl-none" Style="width: 200px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                    Buttons Size
                    <RadzenSelectBar @bind-Value="@size" TextProperty="Text" ValueProperty="Value" 
                            Data="@(Enum.GetValues(typeof(ButtonSize)).Cast<ButtonSize>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
                    <RadzenDropDown @bind-Value="@size" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "buttons size" }})"
                                Data="@(Enum.GetValues(typeof(ButtonSize)).Cast<ButtonSize>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-flex rz-display-xl-none" Style="width: 200px;" />
                </RadzenStack>
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>
    <RadzenCarousel @ref=carousel Auto="false" AllowNavigation="@allowNavigation"
        Style="height: 400px; max-width: 600px;" class="rz-mx-auto"
        ButtonStyle="@style" ButtonSize="@size" ButtonShade="@shade" ButtonVariant="@variant">
        <Items>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/3.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/2.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/7.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/4.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/5.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/6.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/1.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
            <RadzenCarouselItem>
                <RadzenImage Path="images/gallery/8.jpg" class="rz-h-100" />
            </RadzenCarouselItem>
        </Items>
    </RadzenCarousel>
</RadzenStack>

@code {
    RadzenCarousel carousel;
    bool allowNavigation = true;
    Variant variant = Variant.Text;
    ButtonStyle style = ButtonStyle.Base;
    Shade shade = Shade.Lighter;
    ButtonSize size = ButtonSize.Large;
}
