@page "/badge"
@inject IStringLocalizer<Badges> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicusageTitle"]" Introduction="@Localizer["BasicusageIntro"]" Name="Normal">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["PillTitle"]" Introduction='@Localizer["PillIntro"]' Name="Pill">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ButtonTitle"]" Introduction="@Localizer["ButtonIntro"]" Name="Button">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button Color="Color.Primary">
                <i class="fa-solid fa-tv"></i>
                <span>@Localizer["ButtonSpan"]</span>
                <Badge Color="Color.Danger">1</Badge>
            </Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <div class="badge-widget">
                <i class="fa-solid fa-tv"></i>
                <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
            </div>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
