@foreach (var reply in this.ReplyComments)
{
    <div class="review_item reply">
        <div class="media">
            <div class="d-flex">
                <img src="@reply.ImageUrl" class="commentAvatar" alt="avatar" />
            </div>
            <BSButton Color="@(this.Collapses[reply.Id] == true ? Color.Danger : Color.Success)"
                      Size="Size.Small"
                      Class="btn-comment-circle"
                      OnClick="(() => this.CollapseComment(reply.Id))">
                <i class="fas fa-caret-@(this.Collapses[reply.Id] == true ? "up" : "down") comment-icon-collapse"></i>
            </BSButton>
            <div class="media-body">
                <h4>@reply.FullName</h4>
                @if (reply.Username != null)
                {
                    <span><a href="/Profile/@reply.Username">@@@reply.Username</a></span>
                }
                else
                {
                    <span><a>Anonymous</a></span>
                }
                @if (reply.UpdatedOn == null)
                {
                    <h5>@reply.CreatedOn.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</h5>
                }
                else
                {
                    <h5>@reply.UpdatedOn?.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt") (edited)</h5>
                }
                <AuthorizeView Roles="@GlobalConstants.AdministratorRole">
                    <a class="reply_btn" @onclick="@(() => this.OnReply.InvokeAsync(reply.Id))">Reply</a>
                    <a @onclick="@(() => this.OnDelete.InvokeAsync(reply.Id))">
                        Delete
                    </a>
                </AuthorizeView>
            </div>
        </div>
        <p>@reply.Content</p>
    </div>

    <BSCollapse IsOpen="@this.Collapses[reply.Id]">
        <CommentReply AllComments="this.AllComments"
                      ReplyComments="this.AllComments
                                 .Where(x => x.ParentId == reply.Id)
                                 .ToList()"
                      Collapses="this.Collapses"
                      OnReply="this.OnReply"
                      OnDelete="this.OnDelete">
        </CommentReply>
    </BSCollapse>
}

@code {
    [Parameter]
    public ICollection<CommentViewModel> ReplyComments { get; set; }

    [Parameter]
    public ICollection<CommentViewModel> AllComments { get; set; }

    [Parameter]
    public Dictionary<string, bool> Collapses { get; set; }

    [Parameter]
    public EventCallback<string> OnReply { get; set; }

    [Parameter]
    public EventCallback<string> OnDelete { get; set; }

    private void CollapseComment(string id)
    {
        this.Collapses[id] = !this.Collapses[id];
        this.StateHasChanged();
    }
}