@page "/spinners"
@inject IStringLocalizer<Spinners> Localizer

<h3>Spinner icon</h3>
<h4>Show animation when loading data</h4>

<p>
    <b>when to use</b>
    <br />
    When the page is partially waiting for asynchronous data or is being rendered, appropriate loading animations can effectively relieve the user's anxiety.
</p>

<DemoBlock Title="Basic usage" Introduction="Default rotate icon" Name="Normal">
    <Spinner></Spinner>
</DemoBlock>

<DemoBlock Title="Spinner Spinner icon with color" Introduction="Provides a spin icon in base color"  Name="Color">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Primary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Secondary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Success"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Danger"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Warning"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Info"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Light"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Color="Color.Dark"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="Growing Spinner spin icon" Introduction="Growing Rotation Icon" Name="Growing">
    <Spinner SpinnerType="SpinnerType.Grow"></Spinner>
</DemoBlock>

<DemoBlock Title="Growing Spinner Spinning icon with color" Introduction="Provides a spin icon in base color" Name="GrowingColor">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Primary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Secondary"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Success"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Danger"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Warning"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Info"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Light"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner SpinnerType="SpinnerType.Grow" Color="Color.Dark"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="Spinner spin icon size" Introduction="Icon style size" Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small"></Spinner></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Spinner Size="Size.Small" SpinnerType="SpinnerType.Grow"></Spinner></div>
    </div>
</DemoBlock>

<DemoBlock Title="Spinner Flex" Introduction="Custom layout" Name="Flex">
    <div class="d-flex justify-content-center">
        <Spinner></Spinner>
    </div>
</DemoBlock>

<DemoBlock Title="Spinner Flex" Introduction="Custom layout with text" Name="Custom">
    <div class="d-flex align-items-center">
        <strong>Loading...</strong>
        <Spinner Class="ms-auto"></Spinner>
    </div>
</DemoBlock>

<DemoBlock Title="Spinner Floats" Introduction="Use Float layout" Name="Float">
    <Spinner Class="float-end"></Spinner>
</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 Spinners
{
    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Class",
            Description = "style",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Color",
            Description = "Color",
            Type = "Color",
            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "Size",
            Description = "Size",
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "SpinnerType",
            Description = "Icon type",
            Type = "SpinnerType",
            ValueList = " Border / Grow ",
            DefaultValue = "SpinnerType.Border"
        }
    };
}