@page "/progresss"
@inject IStringLocalizer<Progresss> Localizer

<h3>Progress progress bar</h3>
<h4>Used to display the progress of the operation, inform the user of the current status and expectations</h4>

<DemoBlock Title="Progress bar component" Introduction="Common progress bar" Name="Progress">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="0"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="25"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Display value" Introduction="Set the progress bar value display through <code>IsShowValue</code>" Name="DispalyValue">
    <Progress Value="25" IsShowValue="true"></Progress>
</DemoBlock>

<DemoBlock Title="Set the progress bar height" Introduction="Set the progress bar height via <code>Height</code>" Name="Height">
    <Progress Value="25" IsShowValue="true" Height="32"></Progress>
</DemoBlock>

<DemoBlock Title="Progress bar with color" Introduction="Set the progress bar color" Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Whether to show stripes" Introduction="Set the stripe setting of the progress bar via <code>IsStriped</code>" Name="Stripe">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Whether to display dynamically" Introduction="Set the dynamic display of the progress bar through <code>IsAnimated</code>" Name="Dynamic">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Two-way binding data" Introduction="Bind data" Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <BootstrapInput TItem="int" @bind-Value="@Value" />
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" @bind-Value="@Value" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

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

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Progresss
{
    private int Value { get; set; } = 75;

    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Color",
            Description = "Color",
            Type = "Color",
            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "Class",
            Description = "Style",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Height",
            Description = "Progress bar height",
            Type = "int",
            ValueList = " — ",
            DefaultValue = "15"
        },
        new AttributeItem() {
            Name = "IsAnimated",
            Description = "Whether to display dynamically",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsShowValue",
            Description = "Whether to display the value",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsStriped",
            Description = "Whether to show stripes",
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        }
    };
}