@page "{Id}"

@using System.Globalization
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.TuiEditor
@using Volo.CmsKit.Blogs
@using Volo.CmsKit.Admin.Web.Pages
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageToolbar
@using Volo.CmsKit.Admin.Web.Menus
@using Volo.CmsKit.Admin.Web.Pages.CmsKit.BlogPosts
@using Volo.CmsKit.Admin.Web.Pages.CmsKit.Tags.Components.TagEditor
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Uppy
@using Volo.CmsKit.Admin.Web.Bundles

@inherits CmsKitAdminPageBase

@model UpdateModel

@{
    PageLayout.Content.Title = L["BlogPosts"].Value;
    PageLayout.Content.BreadCrumb.Add(L["Menu:CMS"].Value);
    PageLayout.Content.MenuItemName = CmsKitAdminMenus.BlogPosts.BlogPostsMenu;
}

@section scripts {
    <abp-script-bundle>
        <abp-script type="typeof(TuiEditorScriptContributor)"/>
        <abp-script type="typeof(UppyScriptContributor)"/>
        <abp-script type="typeof(SlugifyScriptContributor)"/>
        <abp-script src="/Pages/CmsKit/BlogPosts/update.js"/>
    </abp-script-bundle>
}

@section styles {
    <abp-style-bundle>
        <abp-style type="typeof(TuiEditorStyleContributor)"/>
    </abp-style-bundle>
}

@section content_toolbar {
    @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(UpdateModel).FullName })
}

<abp-card>
    <abp-card-header title="@L["Update"].Value"></abp-card-header>
    <abp-card-body>

        <div class="form-group">
            <img height="120" src="/api/cms-kit/media/@Model.ViewModel.CoverImageMediaId" />
            <label>@L["CoverImage"]</label>
            <input type="file" id="BlogPostCoverImage" class="form-control" />
        </div>

        <abp-dynamic-form abp-model="ViewModel" asp-page="/CmsKit/BlogPosts/Update" id="form-blog-post-update">
            <abp-input asp-for="Id" />

            <abp-input asp-for="ViewModel.Title" />

            <abp-input asp-for="ViewModel.Slug" />

            <abp-form-content />
        
            <div class="content-editor" 
                 id="ContentEditor" 
                 data-input-id="@Html.IdFor(x => x.ViewModel.Content)"
                 data-language="@(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)">
            </div>
            
        </abp-dynamic-form>

        @if (Model.TagsFeature?.IsEnabled == true)
        {
            <hr />

            @await Component.InvokeAsync(typeof(TagEditorViewComponent), new
            {
                entityType = BlogPostConsts.EntityType,
                entityId = Model.Id.ToString(),
                displaySubmitButton = false
            })
        }
    </abp-card-body>
    <abp-card-footer>
        <abp-button button-type="Primary" type="submit" text="@L["Submit"].Value" id="button-blog-post-update" />
    </abp-card-footer>
</abp-card>