@page "/rows"

<h3>Row</h3>

<h4>The number of components displayed in a row can be easily set</h4>

<DemoBlock Title="Place common controls" Introduction="Put your own components inside <code>Row</code>" Name="Common">
    <p><b>3 rows are displayed, using <code>Row</code></b></p>
    <Row ItemsPerRow="ItemsPerRow.Three">
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
        <Card>
            <BodyTemplate>
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </BodyTemplate>
        </Card>
    </Row>
</DemoBlock>

<DemoBlock Title="Place form controls (inline)" Introduction="When placing form controls, you can specify <code>RowType</code> as <code>Inline</code>, and <b>Label</b> will be displayed on the left, and the control will fill the remaining space" Name="FormInline">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.Inline">
            <CheckboxList @bind-Value="@Model.Hobby" Items="Hobbys" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <DateTimePicker @bind-Value="@Model.DateTime" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Switch @bind-Value="@Model.Complete" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="Place form controls" Introduction="When placing form controls, you can specify <code>Normal</code> as <code>FormRow</code>, and <b>Label</b> will be displayed on the top, and the control will be full" Name="Form">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Three">
            <CheckboxList @bind-Value="@Model.Hobby" Items="Hobbys" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <DateTimePicker @bind-Value="@Model.DateTime" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Switch @bind-Value="@Model.Complete" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="Nested use" Introduction="The <code>Row</code> component supports nested use. For example, the outermost <code>Row</code> below sets a row to display two controls, the first is <code>TextBox</code>, the second One is still <code>Row</code>, and the second <code>Row</code> continues to be set to display two controls" Name="Nested">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ItemsPerRow="ItemsPerRow.Two">
                <Switch @bind-Value="@Model.Complete" />
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>
    <div class="mt-3">
        <Row>
            <Row ItemsPerRow="ItemsPerRow.Two">
                <BootstrapInput @bind-Value="@Model.Name" />
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
            <Row ItemsPerRow="ItemsPerRow.Three">
                <BootstrapInput @bind-Value="@Model.Name" />
                <BootstrapInput @bind-Value="@Model.Address" />
                <Row ItemsPerRow="ItemsPerRow.Two">
                    <BootstrapInput @bind-Value="@Model.Name" />
                    <BootstrapInput @bind-Value="@Model.Address" />
                </Row>
            </Row>
        </Row>
    </div>
</DemoBlock>

<DemoBlock Title="Cross-column" Introduction="The <code>Row</code> component can set the number of spanning columns by specifying the <code>ColSpan</code> value. Combining these functions can achieve complex layouts"   Name="Rowspan">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <p><b>4 in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>2 in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>The row shows 4 <code>Address</code> in 2 columns</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="2">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>Row shows 4, the second component <code>ColSpan</code> is set to 3</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="3">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>Row shows 2, the first component <code>ColSpan</code> is set to 3</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <Row ColSpan="3">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </Row>
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>A component in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.One">
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
</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 Rows
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Rows>? Localizer { get; set; }

    private RowFoo Model { get; } = new()
    {
        Name = "张三",
        Count = 23,
        Address = "测试地址",
        DateTime = new DateTime(1997, 12, 05),
        Educations = new List<EnumEducation> { EnumEducation.Primary, EnumEducation.Middle }
    };

    [NotNull]
    private IEnumerable<SelectedItem>? Hobbys { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Hobbys = Foo.GenerateHobbys(LocalizerFoo);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "ItemsPerRow",
            Description = Localizer["Desc1"],
            Type = "enum",
            ValueList = " One,Two,Three,Four,Six,Twelve ",
            DefaultValue = " One "
        },
        new AttributeItem() {
            Name = "RowType",
            Description = Localizer["Desc2"],
            Type = "enum?",
            ValueList = "Normal, Inline",
            DefaultValue = "null"
        },
        new AttributeItem() {
            Name = "ColSpan",
            Description = Localizer["Desc3"],
            Type = "int?",
            ValueList = "-",
            DefaultValue = "null"
        },
        new AttributeItem() {
            Name = "MaxCount",
            Description = Localizer["Desc4"],
            Type = "int?",
            ValueList = "-",
            DefaultValue = "null"
        }
    };

    private class RowFoo : Foo
    {
        /// <summary>
        /// 
        /// </summary>
        [Required(ErrorMessage = "请选择学历")]
        [Display(Name = "学历")]
        [AutoGenerateColumn(Order = 60)]
        public List<EnumEducation>? Educations { get; set; }
    }
}