@using WatchIt.Common.Model.Genders
<div class="rounded-3 panel panel-regular p-3 @(Class)">
    @if (_loaded)
    {
        <EditForm Model="_person">
            <AntiforgeryToken/>
            <div class="container-grid">
                <div class="row form-group mb-1">
                    <label for="name" class="col-2 col-form-label">Name*</label>
                    <div class="col-10">
                        <InputText id="name" class="form-control" @bind-Value="_person!.Name"/>
                    </div>
                </div>
                <div class="row form-group mb-1">
                    <label for="fullName" class="col-2 col-form-label">Full name</label>
                    <div class="col-10">
                        <InputText id="fullName" class="form-control" @bind-Value="_person!.FullName"/>
                    </div>
                </div>
                <div class="row form-group my-1">
                    <label for="desc" class="col-2 col-form-label">Description</label>
                    <div class="col-10">
                        <InputTextArea id="desc" class="form-control" @bind-Value="_person!.Description"/>
                    </div>
                </div>
                <div class="row form-group mb-1">
                    <label for="birthDeathDates" class="col-2 col-form-label">Birth and death</label>
                    <div class="col-10">
                        <div id="birthDeathDates" class="input-group">
                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_person!.BirthDate"/>
                            <span class="input-group-text">-</span>
                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_person!.DeathDate"/>
                        </div>
                    </div>
                </div>
                <div class="row form-group my-1">
                    <label for="desc" class="col-2 col-form-label">Gender</label>
                    <div class="col-10">
                        <InputSelect TValue="short?" id="desc" class="form-control" @bind-Value="_person!.GenderId">
                            <option value="@(default(short?))">No choice</option>
                            @foreach (GenderResponse gender in _genders)
                            {
                                <option value="@(gender.Id)">@(gender.Name)</option>
                            }
                        </InputSelect>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col align-self-center">
                        @if (!string.IsNullOrWhiteSpace(_error))
                        {
                            <span class="text-danger">@(_error)</span>
                        }
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(Save)">
                            @if (!_saving)
                            {
                                <span>Save</span>
                            }
                            else
                            {
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                <span>Saving...</span>
                            }
                        </button>
                    </div>
                </div>
            </div>
        </EditForm>
    }
    else
    {
        <LoadingComponent Color="white"/>
    }
</div>