@page "/circle"
@inject IStringLocalizer<Circles> Localizer

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

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

<ol>
    <li>@Localizer["CircleTips1"]</li>
    <li>@Localizer["CircleTips2"]</li>
</ol>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <Circle Value="@_circleValue" />
    <div class="mt-3">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Add(10)">
                <i class="fa-solid fa-plus"></i>
                <span>@Localizer["IncreaseSpan"] 10</span>
            </button>
            <button class="btn btn-info" @onclick="e => Add(-10)">
                <i class="fa-solid fa-minus"></i>
                <span>@Localizer["DecreaseSpan"] 10</span>
            </button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color">
    <div class="d-flex justify-content-between">
        <Circle Value="10" Color="Color.Primary" />
        <Circle Value="20" Color="Color.Success" />
        <Circle Value="30" Color="Color.Info" />
        <Circle Value="40" Color="Color.Warning" />
        <Circle Value="50" Color="Color.Danger" />
        <Circle Value="60" Color="Color.Secondary" />
        <Circle Value="70" Color="Color.Dark" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["StrokeWidthTitle"]" Introduction="@Localizer["StrokeWidthIntro"]" Name="StrokeWidth">
    <div class="d-flex justify-content-between">
        <Circle Value="80" Color="Color.Info" StrokeWidth="5" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent">
    <Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" ShowProgress="false">
        <div class="circle-demo">
            <h1>42,001,776</h1>
            <p>@Localizer["ChildContentP1"]</p>
            <span>
                @Localizer["ChildContentSpan"]
                <i>75%</i>
            </span>
        </div>
    </Circle>
</DemoBlock>

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