@model PostViewModel

@{
    ViewData["Title"] = Model.Title;

    async Task DisplayComments(string parentId, int count)
    {
        var comments = this.Model.Comments.Where(x => x.ParentCommentId == parentId);
        if (!comments.Any())
        {
            return;
        }

        @foreach (PostCommentViewModel comment in comments)
        {
            <div class="comment">
                <img class="comment-avatar pull-left" alt="avatar" src=@comment.ApplicationUser.ImageUrl>
                <button type="button" class="btn btn-success btn-comment-circle" data-toggle="collapse" data-target="#@comment.Id">
                    <i class="fas fa-caret-down"></i>
                </button>
                <div class="comment-body">
                    <h4 class="comment-author">
                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@comment.ApplicationUser.UserName">
                            @comment.ApplicationUser.FirstName @comment.ApplicationUser.LastName
                        </a>
                    </h4>
                    <div class="comment-date">@comment.UpdatedOn.ToLocalTime().ToString("dd-MMMM-yyyy dddd HH:mm tt")</div>

                    <span class="post-meta-cats">
                        Comment status:
                        <font color="@(comment.CommentStatus == CommentStatus.Pending ? "blue" : "green")" size="2"><b>@comment.CommentStatus.ToString()</b></font>
                    </span>
                    <p>@Html.Raw(comment.Content)</p>
                </div>
                <div class="text-right weight-600">
                    @if (User.Identity.Name == comment.ApplicationUser.UserName || User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()))
                    {
                        <form asp-area="" asp-controller="Comment" asp-action="EditComment"
                              asp-route-commentId="@comment.Id" asp-route-postId="@comment.PostId" method="get">
                            <button class="comment-reply transparentCommentButton deleteEditCommentButton">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                        </form>
                    }
                    @if (comment.ApplicationUser.UserName == User.Identity.Name || User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()))
                    {
                        <form asp-area="" asp-controller="Comment" asp-action="DeleteById"
                              asp-route-commentId="@comment.Id" asp-route-postId="@comment.PostId" method="post">
                            <button type="submit" class="comment-reply transparentCommentButton deleteEditCommentButton">
                                <i class="fas fa-trash-alt"></i> Delete
                            </button>
                        </form>
                    }
                    @if (comment.CommentStatus == CommentStatus.Pending)
                    {
                        @if (User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()))
                        {
                            <form asp-area="Editor" asp-controller="Comment" asp-action="ApproveComment"
                                  asp-route-commentId="@comment.Id" asp-route-postId="@comment.PostId" method="post">
                                <button class="comment-reply transparentCommentButton approveCommentButton">
                                    <i class="far fa-check-circle"></i> Approve
                                </button>
                            </form>
                        }

                    }
                    <a class="comment-reply" onclick="showAddCommentForm('@comment.Id')">
                        <i class="fa fa-mail-reply"></i> Reply
                    </a>
                </div>
            </div>
            <div class="@(count > 1 ? "" : "comments-reply") collapse" id="@comment.Id">
                @{ await DisplayComments(comment.Id, count + 1); }
            </div>
        }
    }
}

<div id="banner-area">
    <img src="~/images/banner/banner2.jpg" alt="" />
    <div class="parallax-overlay"></div>
    <div class="banner-title-content">
        <div class="text-center">
            <h2>@Model.Title</h2>
            <ul class="breadcrumb">
                <li>Home</li>
                <li><a asp-area="" asp-controller="Blog" asp-action="Index"> Blog</a></li>
                <li>
                    <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@Model.Id">
                        @Model.Title
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<section id="main-container">
    <div class="container">
        <partial name="_TempDataPartial" />
        <div class="row">
            <!-- Blog start -->
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <!-- Blog post start -->
                <div class="post-content">
                    <!-- post image start -->
                    <div class="post-image-wrapper">
                        <img src=@Model.ImageUrl class="img-responsive" alt="" />
                        <span class="blog-date">
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@Model.Id">
                                <i class="fas fa-clock"></i> @Model.CreatedOn.ToLocalTime().ToString("MMMM dd, yyyy")
                            </a>
                        </span>
                    </div><!-- post image end -->
                    <div class="post-header clearfix">
                        <h2 class="post-title">
                            <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@Model.Id">@Model.Title</a>
                        </h2>
                        @if ((User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()) || Model.IsAuthor == true) && Model.ApplicationUser.IsBlocked == false)
                        {
                            <a asp-area="" asp-controller="Blog" asp-action="EditPost" asp-route-id="@Model.Id" class="btn btn-info"><i class="fas fa-edit"></i> Edit Post</a>
                            <a class="btn btn-danger" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-trash-alt"></i>
                                Delete Post
                            </a>
                        }
                        @if (SignInManager.IsSignedIn(User))
                        {
                            <div class="dropdown">
                                <a class="btn btn-success dropbtn"><i class="far fa-heart"></i> @Model.Likes Likes</a>
                                <div class="dropdown-content">
                                    @foreach (var liker in Model.Likers)
                                    {
                                        <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@liker.UserName">
                                            <img class="likerAvatar" src=@liker.ImageUrl alt="avatar">
                                            @liker.FirstName @liker.LastName (@@@liker.UserName)
                                        </a>
                                    }
                                </div>
                            </div>
                        }
                        <div class="post-meta">
                            <span class="post-meta-author">
                                Posted by
                                <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@Model.ApplicationUser.UserName">
                                    @Model.ApplicationUser.UserName
                                </a>
                            </span>
                            <span class="post-meta-cats">
                                in
                                <a asp-area="" asp-controller="Category" asp-action="Index" asp-route-id="@Model.Category.Id">
                                    @Model.Category.Name
                                </a>
                            </span>
                            <br />
                            <span class="post-meta-cats">
                                Post Status:
                                @if (Model.PostStatus == PostStatus.Banned)
                                {
                                    <font color="red" size="2"><b>@Model.PostStatus.ToString()</b></font>
                                }
                                else
                                {
                                    @if (Model.PostStatus == PostStatus.Approved)
                                    {
                                        <font color="green" size="2"><b>@Model.PostStatus.ToString()</b></font>
                                    }
                                    else
                                    {
                                        <font color="blue" size="2"><b>@Model.PostStatus.ToString()</b></font>
                                    }
                                }
                            </span>
                            <div class="pull-right">
                                <div class="post-meta-comments" style="display: inline-block">
                                    <a href="#"><i class="fa fa-comment-o"></i> @Model.Comments.Count</a>
                                </div>
                                <div class="post-meta-hits" style="display: inline-block">
                                    @if (Model.IsLiked == true)
                                    {
                                        <form asp-area="" asp-controller="Post" asp-action="UnlikePost" asp-route-postId="@Model.Id" method="post">
                                            <button type="submit" class="transparentCommentButton">
                                                <i class="fas fa-thumbs-down"></i> Unlike
                                            </button>
                                        </form>
                                    }
                                    else
                                    {
                                        <form asp-area="" asp-controller="Post" asp-action="LikePost" asp-route-postId="@Model.Id" method="post">
                                            <button type="submit" class="transparentCommentButton">
                                                <i class="fas fa-thumbs-up"></i> Like
                                            </button>
                                        </form>
                                    }
                                </div>
                            </div>
                        </div><!-- post meta end -->
                    </div><!-- post heading end -->
                    <div class="entry-content">
                        <p>@Html.Raw(Model.Content)</p>
                    </div>
                    <div class="row">
                        @foreach (var image in Model.PostImages)
                        {
                            <div class="col-md-4">
                                <div class="modalText" onclick="openImage('@image.Id', this)">
                                    <i class="far fa-images"></i> @image.Name
                                </div>
                                @*<img class="myImg" onclick="openImage('@image.Id')" src="@image.Url" style="width:100%; height: 100%">*@
                                <div id="@image.Id-Modal" class="modalPostImage">
                                    <div class="imageModalContent">
                                        <i onclick="closeImage('@image.Id')" class="fas fa-window-close closeImage"></i>
                                    </div>
                                    <img class="imageModalContent" id="@image.Id" src="@image.Url">
                                    <div class="myCaption" id="@image.Id-Caption"></div>
                                </div>
                            </div>
                        }
                    </div>
                    <hr />
                    <div class="widget widget-tags">
                        <ul class="unstyled clearfix">
                            @foreach (var tag in Model.Tags)
                            {
                                <li><a asp-area="" asp-controller="Tag" asp-action="Index" asp-route-id="@tag.Id">@tag.Name</a></li>
                            }
                        </ul>
                    </div>
                    <!-- Author info start -->
                    <div class="about-author">
                        <div class="author-img pull-left">
                            <img src=@Model.ApplicationUser.ImageUrl alt="avatar" />
                            <div class='status-circle-blog-post' id="@(Model.ApplicationUser.UserName)usersBlogPostStatus">
                                <input type="hidden" value="@Model.ApplicationUser.UserName" />
                                @*Here go the dot status*@
                            </div>
                        </div>
                        <div class="author-info">
                            @*<h3>@Model.ApplicationUser.FirstName @Model.ApplicationUser.LastName<span>@Model.ApplicationUser.CountryCode.ToString().Split("_")[0], @Model.ApplicationUser.City</span></h3>*@
                            <p>@Model.ApplicationUser.AboutMe</p>
                            <p class="author-url">Profile: <span><a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@Model.ApplicationUser.UserName">@@@Model.ApplicationUser.UserName</a></span></p>
                        </div>
                    </div>

                    @if (User.IsInRole(Roles.Administrator.ToString()) || User.IsInRole(Roles.Editor.ToString()))
                    {
                        @if (Model.PostStatus == PostStatus.Pending)
                        {
                            <a asp-area="Editor" asp-controller="Post" asp-action="ApprovePost" asp-route-id="@Model.Id" class="btn btn-info" style="float: left">
                                <i class="fas fa-check"></i> Approve Post
                            </a>
                        }
                        else
                        {
                            @if (Model.PostStatus == PostStatus.Banned)
                            {
                                <a asp-area="Editor" asp-controller="Post" asp-action="UnbanPost" asp-route-id="@Model.Id" class="btn btn-danger" style="float: left">
                                    <i class="fas fa-unlock-alt"></i> Unban Post
                                </a>
                            }
                            else
                            {
                                <a asp-area="Editor" asp-controller="Post" asp-action="BanPost" asp-route-id="@Model.Id" class="btn btn-info" style="float: left">
                                    <i class="fas fa-lock"></i> Ban Post
                                </a>
                            }
                        }
                    }

                    @if (!Model.IsFavourite)
                    {
                        <form asp-area="" asp-controller="Post" asp-action="AddToFavorite" asp-route-postId="@Model.Id" method="post">
                            <button class="btn btn-success" style="float: right" type="submit">
                                <i class="far fa-heart"></i> Add to favorite
                            </button>
                        </form>
                    }
                    else
                    {
                        <form asp-area="" asp-controller="Post" asp-action="RemoveFromFavorite" asp-route-postId="@Model.Id" method="post">
                            <button type="submit" class="btn btn-info" style="float: right">
                                <i class="fas fa-eraser"></i> Remove from favorite
                            </button>
                        </form>
                    }
                    <!-- Author info end -->

                    <div class="gap-30"></div>

                    @if (this.User.Identity.IsAuthenticated && Model.PostStatus == PostStatus.Approved)
                    {
                        <button style="float: right" type="button" class="btn btn-info" onclick="showAddCommentForm(0)"><i class="far fa-comment"></i> Add Comment</button>
                    }

                    <!-- Post comment start -->
                    <div id="post-comments">
                        <div class="comments-counter"><a>@Model.Comments.Count Comments found</a></div>
                        <ul class="comments-list">
                            @{ await DisplayComments(null, 1); }
                        </ul>
                    </div>

                    <div class="comments-form">
                        <form asp-controller="Comment" asp-action="Create" method="post" id="AddCommentForm" style="display: none">
                            <input type="hidden" name="PostId" value="@this.Model.Id" />
                            <input type="hidden" name="ParentId" value="0" />
                            <div class="row">
                                <h3>Leave a comment</h3>
                            </div>
                            <div class="form-group">
                                <label for="Content"></label>
                                <textarea name="Content" id="Content" class="form-control edit-with-tinymce"></textarea>
                            </div>
                            <div>
                                <br>
                                <input type="submit" class="btn btn-primary" value="Add comment" />
                            </div>
                        </form>
                    </div><!-- Comments form end -->
                </div><!-- Blog post end -->
            </div><!--/ Content col end -->
            <!-- sidebar start -->
            @await Component.InvokeAsync("Blog")
        </div><!--/ row end -->
    </div><!--/ container end -->
</section><!-- Blog details page end -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Do you want to delete the post?</h5>
            </div>
            <div class="modal-body">Select "Delete" below if you are ready to delete the post.</div>
            <div class="modal-footer">
                <button style="display: inline-block" class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                <form asp-area="" asp-controller="Blog" asp-action="DeletePost" asp-route-postId="@Model.Id"
                      method="post" style="display: inline-block">
                    <button class="btn btn-danger">
                        Delete Post
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script src="~/lib/tinymce/tinymce.min.js" type="text/javascript"></script>
    <script src="~/lib/tinymce/visualizer.js" type="text/javascript"></script>
    <script src="~/js/blog/blogPostScript.js"></script>
}