@using BlazorMonaco.Editor
@page "/dynamic/edit/{*id}"
@attribute [Authorize]
@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
{
    <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="@_t" OnValidSubmit="PostDataAsync">
        <MudCard>
            <MudCardContent>
                <DataAnnotationsValidator/>
                <MudGrid>
                    <MudItem xs="12" md="12">
                        <MudTextField T="string"
                                      HelperText="如 index.html index.aspx home 之类"
                                      Immediate="true"
                                      Label="页面名称"
                                      Required="true"
                                      RequiredError="此项必填"
                                      @bind-value="_name"
                                      Text="@Id"
                                      ReadOnly="true"
                                      Variant="Variant.Text">
                        </MudTextField>

                    </MudItem>
                    <MudItem xs="12" md="12">
                        <HtmlEditor 
                            @ref="_editor" 
                            ElementId="@($"dynamic-editor-{Id}")" 
                            Html="@_htmlContent.ToString()"/>
                    </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="/dynamic">返回列表</MudButton>
            </MudCardActions>
        </MudCard>
    </EditForm>
}