<UserControl
    x:Class="Ursa.Demo.Pages.DualBadgeDemo"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:u="https://irihi.tech/ursa"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">

    <UserControl.Resources>
        <PathGeometry x:Key="InfoPath">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z</PathGeometry>
    </UserControl.Resources>

    <UserControl.Styles>
        <Style Selector="u|DualBadge">
            <Setter Property="Margin" Value="4" />
        </Style>
    </UserControl.Styles>

    <ScrollViewer>
        <StackPanel HorizontalAlignment="Left" Spacing="20">
            <TextBlock Text="Flat:" />
            <StackPanel Orientation="Horizontal">
                <u:DualBadge>
                    2.4k
                </u:DualBadge>
                <u:DualBadge>
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
                <u:DualBadge Header="downloads">
                    2.4k
                </u:DualBadge>
                <u:DualBadge Header="downloads">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
            </StackPanel>

            <TextBlock Text="FlatSquare:" />
            <StackPanel Orientation="Horizontal">
                <u:DualBadge Classes="FlatSquare">
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="FlatSquare">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="FlatSquare" Header="downloads">
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="FlatSquare" Header="downloads">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
            </StackPanel>

            <TextBlock Text="Plastic:" />
            <StackPanel Orientation="Horizontal">
                <u:DualBadge Classes="Plastic">
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="Plastic">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="12"
                            Height="12"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="Plastic" Header="downloads">
                    2.4k
                </u:DualBadge>
                <u:DualBadge Classes="Plastic" Header="downloads">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="12"
                            Height="12"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4k
                </u:DualBadge>
            </StackPanel>

            <TextBlock Text="ForTheBadge:" />
            <StackPanel Orientation="Horizontal">
                <u:DualBadge Classes="ForTheBadge">
                    2.4K
                </u:DualBadge>
                <u:DualBadge Classes="ForTheBadge">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4K
                </u:DualBadge>
                <u:DualBadge Classes="ForTheBadge" Header="DOWNLOADS">
                    2.4K
                </u:DualBadge>
                <u:DualBadge Classes="ForTheBadge" Header="DOWNLOADS">
                    <u:DualBadge.Icon>
                        <PathIcon
                            Width="14"
                            Height="14"
                            Data="{StaticResource InfoPath}" />
                    </u:DualBadge.Icon>
                    2.4K
                </u:DualBadge>
            </StackPanel>

            <WrapPanel>
                <u:DualBadge Classes="Red">Red</u:DualBadge>
                <u:DualBadge Classes="Pink">Pink</u:DualBadge>
                <u:DualBadge Classes="Purple">Purple</u:DualBadge>
                <u:DualBadge Classes="Violet">Violet</u:DualBadge>
                <u:DualBadge Classes="Indigo">Indigo</u:DualBadge>
                <u:DualBadge Classes="Blue">Blue</u:DualBadge>
                <u:DualBadge Classes="LightBlue">LightBlue</u:DualBadge>
                <u:DualBadge Classes="Cyan">Cyan</u:DualBadge>
                <u:DualBadge Classes="Teal">Teal</u:DualBadge>
                <u:DualBadge Classes="Green">Green</u:DualBadge>
                <u:DualBadge Classes="LightGreen">LightGreen</u:DualBadge>
                <u:DualBadge Classes="Lime">Lime</u:DualBadge>
                <u:DualBadge Classes="Yellow">Yellow</u:DualBadge>
                <u:DualBadge Classes="Amber">Amber</u:DualBadge>
                <u:DualBadge Classes="Orange">Orange</u:DualBadge>
                <u:DualBadge Classes="Grey">Grey</u:DualBadge>
            </WrapPanel>
            <WrapPanel>
                <u:DualBadge Classes="FlatSquare Red">Red</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Pink">Pink</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Purple">Purple</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Violet">Violet</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Indigo">Indigo</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Blue">Blue</u:DualBadge>
                <u:DualBadge Classes="FlatSquare LightBlue">LightBlue</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Cyan">Cyan</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Teal">Teal</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Green">Green</u:DualBadge>
                <u:DualBadge Classes="FlatSquare LightGreen">LightGreen</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Lime">Lime</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Yellow">Yellow</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Amber">Amber</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Orange">Orange</u:DualBadge>
                <u:DualBadge Classes="FlatSquare Grey">Grey</u:DualBadge>
            </WrapPanel>
            <WrapPanel>
                <u:DualBadge Classes="Plastic Red">Red</u:DualBadge>
                <u:DualBadge Classes="Plastic Pink">Pink</u:DualBadge>
                <u:DualBadge Classes="Plastic Purple">Purple</u:DualBadge>
                <u:DualBadge Classes="Plastic Violet">Violet</u:DualBadge>
                <u:DualBadge Classes="Plastic Indigo">Indigo</u:DualBadge>
                <u:DualBadge Classes="Plastic Blue">Blue</u:DualBadge>
                <u:DualBadge Classes="Plastic LightBlue">LightBlue</u:DualBadge>
                <u:DualBadge Classes="Plastic Cyan">Cyan</u:DualBadge>
                <u:DualBadge Classes="Plastic Teal">Teal</u:DualBadge>
                <u:DualBadge Classes="Plastic Green">Green</u:DualBadge>
                <u:DualBadge Classes="Plastic LightGreen">LightGreen</u:DualBadge>
                <u:DualBadge Classes="Plastic Lime">Lime</u:DualBadge>
                <u:DualBadge Classes="Plastic Yellow">Yellow</u:DualBadge>
                <u:DualBadge Classes="Plastic Amber">Amber</u:DualBadge>
                <u:DualBadge Classes="Plastic Orange">Orange</u:DualBadge>
                <u:DualBadge Classes="Plastic Grey">Grey</u:DualBadge>
            </WrapPanel>
            <WrapPanel>
                <u:DualBadge Classes="ForTheBadge Red">Red</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Pink">Pink</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Purple">Purple</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Violet">Violet</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Indigo">Indigo</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Blue">Blue</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge LightBlue">LightBlue</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Cyan">Cyan</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Teal">Teal</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Green">Green</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge LightGreen">LightGreen</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Lime">Lime</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Yellow">Yellow</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Amber">Amber</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Orange">Orange</u:DualBadge>
                <u:DualBadge Classes="ForTheBadge Grey">Grey</u:DualBadge>
            </WrapPanel>
        </StackPanel>
    </ScrollViewer>
</UserControl>