@page "/article/edit/{Id}"

@attribute [Authorize]
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">编辑文章</MudText>
@if (_isLoading)
{
    <MudCard>
        <MudCardContent>
            <MudSkeleton Width="30%" Height="42px;"/>
            <MudSkeleton Width="80%"/>
            <MudSkeleton Width="100%"/>
        </MudCardContent>
        <MudCardActions>
            <MudSkeleton Width="64px" Height="40px" Class="ml-2"/>
            <MudSkeleton Width="105px" Height="40px" Class="ml-3"/>
        </MudCardActions>
        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px"/>
    </MudCard>
}
else
{
    <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"
                                      Text="@_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"
                                      Text="@_article.Introduction"
                                      For="@(() => _article.Introduction)"
                                      Variant="Variant.Text">
                        </MudTextField>
                    </MudItem>
                    <MudItem xs="12" md="12">
                        <MarkdownEditor
                            @ref="_editor"
                            UploadPicture="UploadPicture"
                            ElementId="@($"article-editor-{Id}")"
                            Markdown="@_article.Markdown">
                        </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>
}