@page "/music/add"
@attribute [Authorize]
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">添加音乐</MudText>
<MudOverlay Visible="_isPosting" ZIndex="9999" DarkBackground="true">
    <MudProgressCircular Color="Color.Secondary" Indeterminate="true"/>
</MudOverlay>
<EditForm Model="_t" OnValidSubmit="PostMusicAsync">
    <MudCard>
        <MudCardContent>
            <DataAnnotationsValidator/>
            <MudGrid>
                <MudItem xs="12" md="12">
                    <InputFile OnChange="OnMusicChanged" id="fileMusic" hidden accept="@(string.Join(',', _musicExtensions.Select(x => '.' + x)))"/>
                    <MudButton HtmlTag="label"
                               Variant="Variant.Filled"
                               Color="Color.Primary"
                               StartIcon="@Icons.Material.Filled.CloudUpload"
                               for="fileMusic">
                        点击选择要上传的音乐
                    </MudButton>
                    <MudList Style="padding:2em;width:100%;" Dense="true">
                        @foreach (var file in _selectMusic)
                        {
                            <MudListItem @key="@file">
                                <MudChip Color="Color.Dark"
                                         Style="width:60px; overflow:hidden;"
                                         Text="@(file.Key.Split(".").Last())"/>
                                @file.Key
                                <MudChip Color="Color.Dark"
                                         Style="overflow:hidden;"
                                         Text="@(file.Value.FileSize())"/>
                            </MudListItem>
                        }
                    </MudList>
                </MudItem>
                <MudItem xs="12" md="12">
                    <InputFile OnChange="OnCoverChanged" id="fileCover" hidden accept="@(string.Join(',', AppTools.ImageExtensions.Select(x => '.' + x)))"/>
                    <MudButton HtmlTag="label"
                               Variant="Variant.Filled"
                               Color="Color.Primary"
                               StartIcon="@Icons.Material.Filled.CloudUpload"
                               for="fileCover">
                        点击选择要上传的音乐封面
                    </MudButton>
                    <MudList Style="padding:2em;width:100%;" Dense="true">
                        <Preview></Preview>
                        @foreach (var file in _selectCover)
                        {
                            <MudListItem @key="@file">
                                <MudChip Color="Color.Dark"
                                         Style="width:60px; overflow:hidden;"
                                         Text="@(file.Key.Split(".").Last())"/>
                                @file.Key
                                <MudChip Color="Color.Dark"
                                         Style="overflow:hidden;"
                                         Text="@(file.Value.FileSize())"/>
                            </MudListItem>
                        }
                    </MudList>
                </MudItem>
                <MudItem xs="12" md="12">
                    <InputFile OnChange="OnLrcChanged" id="fileLrc" hidden accept=".lrc"/>

                    <MudButton HtmlTag="label"
                               Variant="Variant.Filled"
                               Color="Color.Primary"
                               StartIcon="@Icons.Material.Filled.CloudUpload"
                               for="fileLrc">
                        点击选择要上传的歌词
                    </MudButton>
                    <MudList Style="padding:2em;width:100%;" Dense="true">
                        @foreach (var file in _selectLrc)
                        {
                            <MudListItem @key="@file">
                                <MudChip Color="Color.Dark"
                                         Style="width:60px; overflow:hidden;"
                                         Text="@(file.Key.Split(".").Last())"/>
                                @file.Key
                                <MudChip Color="Color.Dark"
                                         Style="overflow:hidden;"
                                         Text="@(file.Value.FileSize())"/>
                            </MudListItem>
                        }
                    </MudList>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudSelect T="string"
                               HelperText="分组"
                               Immediate="true"
                               Label="请选择分组"
                               MultiSelection="true"
                               @bind-SelectedValues="_selectedGroups"
                               Variant="Variant.Text">
                        @foreach (var group in _groups)
                        {
                            <MudSelectItem T="string" Value="@group">@group</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
                <MudItem xs="12" md="12">
                    <MudTextField T="string"
                                  Immediate="true"
                                  Label="补充分組"
                                  @bind-value="_addGroup"
                                  For="@(() => _addGroup)"
                                  Variant="Variant.Text">
                    </MudTextField>
                </MudItem>
            </MudGrid>
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Disabled="_isPosting" Color="Color.Primary">
                @if (_isPosting)
                {
                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                    <MudText Class="ms-2">正在上传</MudText>
                }
                else
                {
                    <MudText>上传</MudText>
                }
            </MudButton>
            <MudButton Variant="Variant.Filled" Link="/music">返回列表</MudButton>
        </MudCardActions>
    </MudCard>
</EditForm>