@model BlogPostModel
@using Microsoft.AspNetCore.Mvc.Razor;
@inject IBlogService blogService

<script>
        @{
        var blogTags = await blogService.GetAllBlogPostTags("", true);
        var blogTagsSb = new StringBuilder();
        blogTagsSb.Append("var initialBlogTags = [");
        for (int i = 0; i < blogTags.Count; i++)
        {
            var tag = blogTags[i];
            blogTagsSb.Append("'");
            blogTagsSb.Append(System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(string.IsNullOrEmpty(tag.Name) ? "" : tag.Name));
            blogTagsSb.Append("'");
            if (i != blogTags.Count - 1)
            {
                blogTagsSb.Append(",");
            }
        }
        blogTagsSb.Append("]");
    }

    //tags
    $(document).ready(function () {
        @Html.Raw(blogTagsSb.ToString())
        $("#@Html.IdFor(model => model.Tags)").tagEditor({
            autocomplete: {
                delay: 0,
                position: { collision: 'flip' },
                source: initialBlogTags
            },
            delimiter: ',',
            placeholder: '@Loc["Admin.Content.Blog.BlogPosts.Fields.Tags.Placeholder"]'
        });
    });
</script>

@{ Func<int, HelperResult>
         template = @<div class="form-body">
        <div class="form-group">
            <admin-label asp-for="@Model.Locales[item].Title" />
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="@Model.Locales[item].Title" />
                <span asp-validation-for="@Model.Locales[item].Title"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="@Model.Locales[item].BodyOverview" />
            <div class="col-md-9 col-sm-9">
                <admin-textarea asp-for="@Model.Locales[item].BodyOverview"></admin-textarea>
                <span asp-validation-for="@Model.Locales[item].BodyOverview"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="Locales[item].Body" />
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="@Model.Locales[item].Body" asp-template="Editor" />
                <span asp-validation-for="Locales[item].Body"></span>
            </div>
        </div>
        <input type="hidden" asp-for="@Model.Locales[item].LanguageId" />
    </div>;
}

<div class="form-horizontal">
    <vc:admin-widget widget-zone="blog_details_info_top" additional-data="Model" />
    <localized-editor localized-template=@template name="blogpost-info-localized" language-ids=@Model.Locales.Select(c=>c.LanguageId).ToList()>
        <div class="form-body">
            <div class="form-group">
                <admin-label asp-for="Title" />
                <div class="col-md-9 col-sm-9">
                    <admin-input asp-for="Title" />
                    <span asp-validation-for="Title"></span>
                </div>
            </div>
            <div class="form-group">
                <admin-label asp-for="BodyOverview" />
                <div class="col-md-9 col-sm-9">
                    <admin-textarea asp-for="BodyOverview"></admin-textarea>
                    <span asp-validation-for="BodyOverview"></span>
                </div>
            </div>
            <div class="form-group">
                <admin-label asp-for="Body" />
                <div class="col-md-9 col-sm-9">
                    <admin-input asp-for="Body" asp-template="Editor" />
                    <span asp-validation-for="Body"></span>
                </div>
            </div>
        </div>
    </localized-editor>
    <div class="form-group">
        @{
            ViewData["Reference"] = "Blog";
            ViewData["ObjectId"] = Model.Id;
        }
        <admin-label asp-for="PictureId" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="PictureId" />
            <span asp-validation-for="PictureId"></span>
            @if (!string.IsNullOrEmpty(Model.PictureId))
            {
                <label class="control-label">
                    <a class='k-link picturelink' href='@Url.Action("PicturePopup", "Blog", new { area = Constants.AreaAdmin })/?blogpostId=@(Model.Id)'>@Loc["Admin.Common.Picture.Attributes"]</a>
                </label>
                <script>
                    $(document).ready(function () {
                        $('.picturelink').magnificPopup({
                            type: 'ajax',
                            settings: { cache: false, async: false },
                            midClick: true,
                            callbacks:
                            {
                                parseAjax: function (mfpResponse) {
                                    mfpResponse.data = $('<div></div>').html(mfpResponse.data);
                                },
                                ajaxContentAdded: function () {
                                    $('.mfp-wrap').removeAttr('tabindex');
                                }
                            }
                        });
                    });
                </script>
            }
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="AllowComments" />
        <div class="col-md-9 col-sm-9">
            <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                <admin-input asp-for="AllowComments" />
                <div class="control__indicator"></div>
            </label>
            <span asp-validation-for="AllowComments"></span>
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="Tags" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="Tags" />
            <span asp-validation-for="Tags"></span>
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="CreateDate" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="CreateDate" />
            <span asp-validation-for="CreateDate"></span>
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="StartDate" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="StartDate" />
            <span asp-validation-for="StartDate"></span>
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="EndDate" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="EndDate" />
            <span asp-validation-for="EndDate"></span>
        </div>
    </div>
    <div class="form-group">
        <admin-label asp-for="Stores" />
        <div class="col-md-9 col-sm-9">
            <admin-input asp-for="Stores" />
            <span asp-validation-for="Stores"></span>
        </div>
    </div>
    <vc:admin-widget widget-zone="blog_details_info_bottom" additional-data="Model" />
</div>