@using Website.Components.MarkdownEditor

<div class="modal fade" id="@nameof(EditVersionModal)" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            @if (Model != null)
            {
                <div class="modal-header">
                    <h5 class="modal-title">Edit @BranchName @VersionName</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            
                <EditForm Model="Model" OnValidSubmit="SubmitAsync">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <InputText class="form-control" @bind-Value="Model.Name" placeholder="1.0.0" />
                            <div class="form-text">Keep this short and in a certain style, preferred: Major.Minor.Patch</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Changelog</label>
                            <MarkdownEditor @bind-Value="Model.Changelog" EnableToolbar="false" DisableHtml="true" Height="150" />
                        </div>

                        <div class="mb-3">
                            <DataAnnotationsValidator />
                            <ValidationSummary />
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        @if (isLoading)
                        {
                            <LoadingButton />
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary">Edit</button>
                        }
                    </div>
                </EditForm>
            }
        </div>
    </div>
</div>