@page "/article/publish"
@attribute [Authorize]
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">发布文章</MudText>
<MudOverlay Visible="_isPublishing" ZIndex="9999" DarkBackground="true">
    <MudProgressCircular Color="Color.Secondary" Indeterminate="true"/>
</MudOverlay>
<EditForm Model="@_article" OnValidSubmit="PublishArticleAsync">
    <MudExpansionPanels>
        <MudExpansionPanel Text="表单验证">
            <MudText Color="@Color.Error">
                <ValidationSummary/>
            </MudText>
        </MudExpansionPanel>
    </MudExpansionPanels>
    <MudCard>
        <MudCardContent>
            <DataAnnotationsValidator/>
            <MudGrid>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  HelperText="此项必填"
                                  Immediate="true"
                                  Label="文章标题"
                                  Required="true"
                                  RequiredError="此项必填"
                                  @bind-value="_article.Title"
                                  For="@(() => _article.Title)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudSelect T="string"
                               HelperText="Tag"
                               Immediate="true"
                               Label="请选择标签"
                               MultiSelection="true"
                               @bind-SelectedValues="_article.Tags"
                               Variant="Variant.Text">
                        @foreach (var tag in _tags)
                        {
                            <MudSelectItem T="string" Value="@tag">@tag</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  Immediate="true"
                                  Label="补充标签"
                                  @bind-value="_addTag"
                                  For="@(() => _addTag)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  HelperText="此项必填"
                                  Immediate="true"
                                  Label="简介"
                                  Required="true"
                                  RequiredError="此项必填"
                                  Lines="5"
                                  @bind-value="_article.Introduction"
                                  For="@(() => _article.Introduction)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MarkdownEditor
                        ElementId="@("article-publish-editor")"
                        Markdown="@_article.Markdown"
                        @ref="_editor"
                        UploadPicture="UploadPicture">
                    </MarkdownEditor>
                </MudItem>
            </MudGrid>
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Disabled="_isPublishing" Color="Color.Primary">
                @if (_isPublishing)
                {
                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                    <MudText Class="ms-2">正在发布</MudText>
                }
                else
                {
                    <MudText>发布</MudText>
                }
            </MudButton>
            <MudButton Variant="Variant.Filled" Link="/article">返回列表</MudButton>
        </MudCardActions>
    </MudCard>
</EditForm>