<RadzenStack class="rz-p-0 rz-p-md-12">
    <RadzenCard class="rz-p-4" Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                Stroke Color
                <RadzenColorPicker @bind-Value="@strokeColor" aria-label="stroke color" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                Stroke Width
                <RadzenNumeric @bind-Value="@strokeWidth" aria-label="stroke width" Min="1" Max="10" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                Disabled
                <RadzenSwitch @bind-Value="@disabled" Style="margin-top: 4px;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "disabled" }})" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                ReadOnly
                <RadzenSwitch @bind-Value="@readOnly" Style="margin-top: 4px;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "read-only" }})" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
                AllowClear
                <RadzenSwitch @bind-Value="@allowClear" Style="margin-top: 4px;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "allow clear" }})" />
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Signature Pad</RadzenText>
        <RadzenSignaturePad @bind-Value=@signature StrokeColor="@strokeColor" StrokeWidth="@strokeWidth"
            Disabled="@disabled" ReadOnly="@readOnly" AllowClear="@allowClear"
            Placeholder="Sign here" Style="width: 100%; max-width: 500px; height: 200px;" />
    </RadzenCard>
</RadzenStack>
@code{
    string signature;
    string strokeColor = "#000000";
    double strokeWidth = 2;
    bool disabled;
    bool readOnly;
    bool allowClear = true;
}
