@model BlogPostModel
@using Grand.Web.Models.Blogs;
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title);
    pagebuilder.AddMetaDescriptionParts(Model.MetaDescription);
    pagebuilder.AddMetaKeywordParts(Model.MetaKeywords);
}
@section left {
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_blog_before" })
    @await Component.InvokeAsync("BlogCategories")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_before_blog_archive" })
    @await Component.InvokeAsync("BlogMonths")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_after_blog_archive" })
    @await Component.InvokeAsync("BlogTags")
    @await Component.InvokeAsync("Widget", new { widgetZone = "left_side_column_blog_after" })
}
<div class="page blogpost-page">
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_top", additionalData = Model.Id })
    <div class="card mt-3">
        <div class="card-header">
            @if (!string.IsNullOrEmpty(Model.PictureModel.ImageUrl))
            {
                <b-img-lazy class="img-fluid mb-3" src="@Model.PictureModel.ImageUrl" alt="@Model.PictureModel.AlternateText"></b-img-lazy>
            }
            <h1 class="h5 mb-0">
                @Model.Title
            </h1>
            <span class="small text-muted">
                @Model.CreatedOn.ToString("D")
            </span>
        </div>
        @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_body", additionalData = Model.Id })
        <div class="card-body">
            @Html.Raw(Model.Body)
        </div>
    </div>

    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_products", additionalData = Model.Id })

    @await Component.InvokeAsync("BlogPostProducts", new { blogPostId = Model.Id })

    @if (Model.Tags.Any())
    {
        <div class="tags generalMarginSupporter">
            <div class="col-form-label w-100">@Loc["Blog.Tags"]:</div>
            @for (int i = 0; i < Model.Tags.Count; i++)
            {
                var tag = Model.Tags[i];
                <a class="btn btn-sm btn-light mr-2 mb-2" href="@Url.RouteUrl("BlogByTag", new {tag = tag})">@tag</a>
            }
        </div>
    }

    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_before_comments", additionalData = Model.Id })
    @if (Model.AllowComments)
    {
        <div class="fieldset new-comment generalMarginSupporter" id="comments">
            <h4 class="generalTitle generalMarginSupporter">@Loc["Blog.Comments.LeaveYourComment"]</h4>
            <div class="notifications">
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                @{
                    var result = TempData["Grand.blog.addcomment.result"] as string;
                }
                @if (!String.IsNullOrEmpty(result))
                {
                    <div class="result alert alert-info">@result</div>
                }
            </div>
            <validation-observer v-slot="{ handleSubmit }">
                <form asp-controller="Blog" asp-action="BlogCommentAdd" asp-route-id="@Model.Id" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
                    <input type="hidden" name="blogPostId" value="@Model.Id" />
                    <div class="form-fields">
                        <div class="form-group">
                            <validation-provider tag="div" rules="required" name="AddNewComment.CommentText" v-slot="{ errors, classes }">
                                <label asp-for="AddNewComment.CommentText" class="col-form-label">@Loc["Blog.Comments.CommentText"]:</label>
                                <span class="required">*</span>
                                <textarea asp-for="AddNewComment.CommentText" v-model="blog.CommentText" v-bind:class="[classes , 'form-control']" autofocus="autofocus" rows="4"></textarea>
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="AddNewComment.CommentText"></span>
                            </validation-provider>
                        </div>
                        @if (Model.AddNewComment.DisplayCaptcha)
                        {
                            <div class="captcha-box">
                                <captcha />
                            </div>
                        }
                    </div>
                    <div class="buttons text-xs-center text-md-left generalMarginSupporter">
                        <input type="submit" asp-action="BlogCommentAdd" name="add-comment" class="btn btn-info blog-post-add-comment-button" value="@Loc["Blog.Comments.SubmitButton"]" />
                    </div>
                </form>
            </validation-observer>
            <script asp-location="Footer" asp-order="300">
                var blog = new Vue({
                    data: () => ({
                        @{
                            <text>
                                CommentText: '',
                            </text>
                        }
                    })
                });
            </script>
        </div>
        if (Model.Comments.Any())
        {
            <div class="comment-list">
                <h4 class="generalTitle generalMarginSupporter"><strong>@Loc["Blog.Comments"]</strong></h4>
                <div class="comments">
                    @foreach (var comment in Model.Comments)
                    {
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="d-inline-flex w-100">
                                    <h6 class="mb-0">@comment.CustomerName</h6>
                                    <b-icon icon="calendar2-check" variant="info" class="mx-2"></b-icon>
                                    <small class="date text-muted">
                                        <span>@Loc["Blog.Comments.CreatedOn"]:</span>
                                        <span>@comment.CreatedOn.ToString("g")</span>
                                    </small>
                                </div>
                            </div>
                            <div class="card-body">
                                @comment.CommentText
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_after_comments", additionalData = Model.Id })
    @await Component.InvokeAsync("Widget", new { widgetZone = "blogpost_page_bottom", additionalData = Model.Id })
</div>