@using WatchIt.Website.Components.Subcomponents.Common

@inherits Component



<div class="panel">
    <div class="vstack gap-3">
        <h4 class="fw-bold">Change username</h4>
        @if (_data is not null)
        {
            <EditForm Model="@(_data)">
                <AntiforgeryToken/>
                <div class="container-grid">
                    <div class="row form-group my-1">
                        <label for="username" class="col-2 col-form-label">New username</label>
                        <div class="col-10">
                            <InputText id="username" class="form-control" @bind-Value="_data!.Username"/>
                        </div>
                    </div>
                    <div class="row form-group my-1">
                        <label for="password" class="col-2 col-form-label">Password</label>
                        <div class="col-10">
                            <InputText id="password" type="password" class="form-control" @bind-Value="_data!.Password"/>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col">
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(Save)">
                                    <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </EditForm>
        }
        else
        {
            <Loading Color="@(Loading.Colors.Light)"/>
        }
    </div>
</div>