<div class="modal fade" tabindex="-1" id="@nameof(ProductReviewReplyModal)" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            @if (Model != null)
            {
                <div class="modal-header">
                    <h5 class="modal-title">
                        @BtnText reply to @Review.Title
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <EditForm Model="Model" OnValidSubmit="SubmitAsync">
                    <div class="modal-body">

                        <div class="p-3 bg-light position-relative">
                            <div class="position-absolute top-0" style="z-index: 100; left: 0; right: 0; height: 3rem; background: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 80%);" />
                            <div class="position-absolute bottom-0" style="z-index: 100; left: 0; right: 0; height: 5rem; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 100%);" />
                            <div class="card mb-3">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <div class="fw-bold">
                                            <div class="d-flex">
                                                @for (byte i = 1; i <= Review.Rating; i++)
                                                {
                                                    <i class="bi bi-star-fill"></i>
                                                }
                                                @for (byte i = Review.Rating; i < 5; i++)
                                                {
                                                    <i class="bi bi-star"></i>
                                                }
                                            </div>                        
                                        </div>
                                        <div class="ms-auto">
                                            @Review.User.Name
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">@Review.Title</h5>
                                    <div class="mb-3">
                                        @Review.Body
                                    </div>
                                    <div class="d-flex">
                                        <div class="text-muted">
                                            <HoverableDateTime Time="Review.LastUpdate" />
                                        </div>                    
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-3" style="margin-left: 2.5rem;">
                                <div class="review-reply-line"></div>
                                @*<div class="review-reply-arrow-up"></div>*@
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        You
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3" style="min-height: 24px;">
                                        @Model.Body
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="text-muted">
                                            <HoverableDateTime Time="Model.Id == 0 ? DateTime.Now : Model.LastUpdate" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Body</label>
                            <InputTextArea class="form-control" @bind-Value="Model.Body" @oninput="(e) => { Model.Body = e.Value.ToString(); }" rows="5" />
                            <div class="form-text">Body up to 1000 characters</div>
                        </div>

                        <DataAnnotationsValidator />
                        <ValidationSummary />
                    </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">@BtnText Reply</button>
                        }

                    </div>
                </EditForm>
            }
        </div>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JSRuntime { get; set; }
    [Inject]
    public HttpClient HttpClient { get; set; }

    [Parameter]
    public EventCallback<MProductReview> ReplyChanged { get; set; }

    public MProductReviewReply Model { get; set; }

    public MProductReview Review { get; set; }

    private string BtnText { get; set; }

    public async Task ShowModalAsync(MProductReview review)
    {
        this.Review = review;

        if (review.Reply == null)
        {   
            Model = new MProductReviewReply() { ReviewId = Review.Id };
            BtnText = "Create";
        }
        else
        {   
            Model = new MProductReviewReply(review.Reply);
            BtnText = "Update";
        }

        await JSRuntime.ShowModalStaticAsync(nameof(ProductReviewReplyModal));
    }

    private bool isLoading;
    public async Task SubmitAsync()
    {
        isLoading = true;
        if (Model.Id == 0)
        {
            var response = await HttpClient.PostAsJsonAsync("api/products/reviews/replies", Model);
            Model = await response.Content.ReadFromJsonAsync<MProductReviewReply>();
        } else
        {
            await HttpClient.PutAsJsonAsync("api/products/reviews/replies", Model);
        }
        Review.Reply = Model;
        await ReplyChanged.InvokeAsync(Review);
        isLoading = false;
        await JSRuntime.HideModalAsync(nameof(ProductReviewReplyModal));
    }
}