@page "/editor-form"
@inject IStringLocalizer<EditorForms> Localizer

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

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

<p>@((MarkupString)Localizer["SubDescription"].Value)</p>

<ul class="ul-demo">
    <li>@((MarkupString)Localizer["EditorFormTips1"].Value)</li>
    <li>@((MarkupString)Localizer["EditorFormTips2"].Value)</li>
    <li>@((MarkupString)Localizer["EditorFormTips3"].Value)</li>
    <li>@((MarkupString)Localizer["EditorFormTips4"].Value)</li>
</ul>

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <section ignore>
        @((MarkupString)Localizer["NormalDescription"].Value)
    </section>
    <GroupBox Title="@Localizer["GroupBoxTitle"]" style="margin-top: 1.5rem;">
        <EditorForm Model="@Model">
            <FieldItems>
                <EditorItem @bind-Field="@context.Education" Readonly="true"></EditorItem>
                <EditorItem @bind-Field="@context.Complete" Readonly="true"></EditorItem>
                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies" Readonly="true"></EditorItem>
            </FieldItems>
            <Buttons>
                <Button Icon="fa-solid fa-floppy-disk" Text="@Localizer["SubButtonText"]"></Button>
            </Buttons>
        </EditorForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormTips1"].Value)</p>
        <p>@((MarkupString)Localizer["ValidateFormTips2"].Value)</p>
    </section>
    <GroupBox Title="@Localizer["GroupBoxTitle"]" style="margin-top: 1.5rem;">
        <ValidateForm Model="@ValidateModel">
            <EditorForm TModel="Foo">
                <FieldItems>
                    <EditorItem @bind-Field="@context.DateTime" Readonly="true"></EditorItem>
                    <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies"></EditorItem>
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-floppy-disk" Text="@Localizer["SubButtonText"]"></Button>
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="@Localizer["AutoGenerateTitle"]" Introduction="@Localizer["AutoGenerateIntro"]" Name="AutoGenerate">
    <GroupBox Title="@Localizer["GroupBoxTitle"]">
        <p>@((MarkupString)Localizer["AutoGenerateDescription"].Value)</p>
        <EditorForm Model="@Model" AutoGenerateAllItem="false">
            <FieldItems>
                <EditorItem @bind-Field="@context.Name"></EditorItem>
                <EditorItem @bind-Field="@context.Count"></EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="@Localizer["SkipValidateTitle"]" Introduction="@Localizer["SkipValidateIntro"]" Name="SkipValidate">
    <GroupBox Title="@Localizer["GroupBoxTitle"]" style="margin-top: 1.5rem;">
        <p>@((MarkupString)Localizer["SkipValidateDescription"].Value)</p>
        <ValidateForm Model="Model">
            <EditorForm Model="Model" AutoGenerateAllItem="false">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Name"></EditorItem>
                    <EditorItem @bind-Field="@context.Address"></EditorItem>
                    <EditorItem @bind-Field="@context.Count">
                        <EditTemplate Context="value">
                            <div class="col-12 col-sm-6">
                                <Select SkipValidate="true" @bind-Value="@value.Count" Items="@DummyItems" ShowSearch="true"></Select>
                            </div>
                            <div class="col-12 col-sm-6">
                                <BootstrapInput Value="@value.Count" Readonly="true"></BootstrapInput>
                            </div>
                        </EditTemplate>
                    </EditorItem>
                    <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies"></EditorItem>
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-floppy-disk" Text="@Localizer["SubButtonText"]"></Button>
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="@Localizer["ItemsPerRowTitle"]" Introduction="@Localizer["ItemsPerRowIntro"]" Name="ItemsPerRow">
    <p>@((MarkupString)Localizer["ItemsPerRowDescription"].Value)</p>
    <GroupBox Title="@Localizer["GroupBoxTitle"]" style="margin-top: 1.5rem;">
        <ValidateForm Model="@Model">
            <EditorForm TModel="Foo" ItemsPerRow="3">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies"></EditorItem>
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-floppy-disk" Text="@Localizer["SubButtonText"]"></Button>
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="@Localizer["AlignmentTitle"]" Introduction="@Localizer["AlignmentIntro"]" Name="Alignment">
    <section ignore>
        <ul class="ul-demo">
            <li>@((MarkupString)Localizer["AlignmentTips1"].Value)</li>
            <li>@((MarkupString)Localizer["AlignmentTips2"].Value)</li>
            <li>@((MarkupString)Localizer["AlignmentTips3"].Value)</li>
        </ul>
    </section>
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="80">
            <FieldItems>
                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies"></EditorItem>
            </FieldItems>
            <Buttons>
                <div class="text-end">
                    <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-floppy-disk" Text="@Localizer["SubButtonText"]"></Button>
                </div>
            </Buttons>
        </EditorForm>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["IsDisplayTitle"]" Introduction="@Localizer["IsDisplayIntro"]" Name="IsDisplay">
    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
        <FieldItems>
            <EditorItem @bind-Field="@Model.Hobby" Items="@Hobbies" />
        </FieldItems>
    </EditorForm>
</DemoBlock>

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

<AttributeTable Title="@Localizer["EditorFormAttributeTitle"]" Items="@GetEditorItemAttributes()"></AttributeTable>
