@page "/avatars"
@inject IStringLocalizer<Avatars> Localizer

<h3>Avatar</h3>

<h4>Present user or thing information as icons, pictures, or characters.</h4>

<DemoBlock Title="Basic usage" Introduction="Set the shape and size of your avatar <code>is</code> and <code>Size</code>." Name="Normal">
    <div class="d-flex flex-column">
        <div class="text-center mb-2">Circle</div>
        <div class="d-flex justify-content-between align-items-center">
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraExtraLarge" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraLarge" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Large" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Small" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.ExtraSmall" />
        </div>
    </div>
    <Divider Text="Split the line" />
    <div class="d-flex flex-column">
        <div class="text-center my-2">Square</div>
        <div class="d-flex justify-content-between align-items-center">
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraExtraLarge" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraLarge" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.Large" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.Small" />
            <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo.png" Size="Size.ExtraSmall" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="The type of presentation" Introduction="Three types are supported: icons, pictures, and characters" Name="Icon">
    <div class="d-flex justify-content-between align-items-center">
        <Avatar IsCircle="true" IsIcon="true" Icon="fa-solid fa-user" />
        <Avatar IsCircle="true" Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" />
        <Avatar IsCircle="true" IsText="true" Text="User" />
    </div>
</DemoBlock>

<DemoBlock Title="Border" Introduction="By setting the <code>IsBorder</code> whether to display the avatar border, the border in this mode when the picture fails to load is <code>border-danger</code> style, and when the load is successful, the border is <code>border-success</code>; The borders in the remaining modes are <code>border-info</code>" Name="Border">
    <div class="d-flex justify-content-between align-items-center">
        <Avatar IsCircle="false" IsBorder="true" Url="_content/BootstrapBlazor.Shared/images/avatar2.png" />
        <Avatar IsCircle="true" IsBorder="true" Url="_content/BootstrapBlazor.Shared/images/Argo-c1.png" />
        <Avatar IsCircle="true" IsBorder="true" IsIcon="true" Icon="fa-solid fa-tv" />
        <Avatar IsCircle="true" IsBorder="true" IsText="true" Text="AZ" />
    </div>
    <div class="mt-3">The first fillet square avatar box is loaded correctly, so the border is <b class='text-info' > blue </b></div>
    <div>The second circular avatar loads the picture path incorrectly, so the border is <b class='text-danger'> red</b>and the picture appears as the default icon</div>
</DemoBlock>

<DemoBlock Title="Asynchronous loading" Introduction="Suitable for scenarios where the picture address is obtained asynchronously by interfaces such as <code>webapi</code>" Name="Circle">
    <div class="d-flex justify-content-between align-items-center">
        <Avatar IsCircle="true" GetUrlAsync="@GetUrlAsync" />
    </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 Avatars
{
    private static async Task<string> GetUrlAsync()
    {
        // 模拟异步获取图像地址
        await Task.Delay(500);
        return "_content/BootstrapBlazor.Shared/images/Argo-C.png";
    }
    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Size",
            Description = Localizer["Size"],
            Type = "Size",
            ValueList = "ExtraSmall|Small|Medium|Large|ExtraLarge|ExtraExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "IsBorder",
            Description = Localizer["IsBorder"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsCircle",
            Description = Localizer["IsCircle"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsIcon",
            Description = Localizer["IsIcon"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsText",
            Description = Localizer["IsText"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Icon",
            Description = Localizer["Icon"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa-solid fa-user"
        },
        new AttributeItem() {
            Name = "Text",
            Description = Localizer["Text"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Url",
            Description = Localizer["Url"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "GetUrlAsync",
            Description = Localizer["GetUrlAsync"],
            Type = "Func<Task<string>>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}