@using MongoDB.Bson;

<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">
            Edit Host
        </MudText>
    </MudDrawerHeader>
    <MudStack Class="px-6">
        @if (Host is not null)
        {
            <EditForm Model="@Host" OnValidSubmit="SubmitAsync">
                <DataAnnotationsValidator />
                @*<MudStack Spacing="2">
                    <MudTextField T="ObjectId?" @bind-Value="Customer.DocumentId" Label="Id" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
                    <MudStack Row>
                        <MudTextField T="string" Text="@($"{Customer.Created?.ToLocalTime().ToString() ?? "-"}")" Label="Created" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
                        <MudTextField T="string" Text="@($"{Customer.Updated?.ToLocalTime().ToString() ?? "-"}")" Label="Updated" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
                    </MudStack>
                </MudStack>
                <MudDivider />*@
                <MudStack Spacing="5">
                    <MudTextField T="string" @bind-Value="Host.Name" For="()=>Host.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" AutoFocus Clearable />
                    <MudTextField T="string" @bind-Value="Host.Description" For="()=>Host.Description" Label="Description" Variant="Variant.Text" Margin="Margin.Dense" Clearable />
                </MudStack>
                <MudStack Justify="Justify.Center" Row Class="mt-7">
                <MudButton OnClick="()=>_visible = false" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                    Cancel
                    </MudButton>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Secondary" Style="width: 100%;">
                    Edit
                    </MudButton>
                    </MudStack>
                    </EditForm>
        }
    </MudStack>
</MudDrawer>

@code {
    private bool _visible;
    public void Toggle()
    {
        _visible = !_visible;
        StateHasChanged();
    }
}