@using BlazorMonaco.Editor
@page "/config"
<style>
    #editor{
        height: 60vh;
        width: 100%;
    }
    .app-setting{
        height: 100%;
    }
</style>

<MudGrid>
    <MudItem xs="3" Class="app-setting">
        <MudPaper Class="d-flex mud-width-full py-8">
            <MudToolBar>
                <MudIconButton Icon="@Icons.Material.Outlined.Folder" Title="新建文件夹"/>
                <MudIconButton Icon="@Icons.Material.Outlined.FileOpen" Title="新建配置"/>
            </MudToolBar>
        </MudPaper>
        <MudTreeView SelectedValueChanged="() => Console.WriteLine(SelectedValue)" Color="Color.Primary" T="string" Hover="true">
            <MudTreeViewItem Value='"Dpz.Core.Web"' Icon="@Icons.Material.Filled.Folder">
                <MudTreeViewItem Value='"appsettings.json"' Icon="@Icons.Material.Filled.FileOpen"/>
                <MudTreeViewItem Value='"appsettings.Development.json"' Icon="@Icons.Material.Filled.FileOpen"/>
                <MudTreeViewItem Value='"appsettings.Production.json"' Icon="@Icons.Material.Filled.FileOpen"/>
            </MudTreeViewItem>
            <MudTreeViewItem Value='"Dpz.Core.WebApi"' Icon="@Icons.Material.Filled.Folder">
                <MudTreeViewItem Value='"appsettings.json"' Icon="@Icons.Material.Filled.FileOpen"/>
                <MudTreeViewItem Value='"appsettings.Development.json"' Icon="@Icons.Material.Filled.FileOpen"/>
                <MudTreeViewItem Value='"appsettings.Production.json"' Icon="@Icons.Material.Filled.FileOpen"/>
            </MudTreeViewItem>
            <MudTreeViewItem Value='"appsettings.json"' Icon="@Icons.Material.Filled.FileOpen"/>
        </MudTreeView>

        <MudText Typo="@Typo.subtitle1">@(SelectedValue)</MudText>
    </MudItem>
    <MudItem xs="9">
        <StandaloneCodeEditor Id="editor" ConstructionOptions="EditorConstructionOptions"/>
    </MudItem>
</MudGrid>