@{
    ViewData["Title"] = "Edit Post";
}

@model EditPostInputModel

<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>Edit Blog Post</h2>
            <ul class="breadcrumb">
                <li>Home</li>
                <li><a asp-area="" asp-controller="Blog" asp-action="Index"> Blog</a></li>
                <li>Edit</li>
                <li>
                    <a asp-area="" asp-controller="Post" asp-action="Index" asp-route-postId="@Model.Id">
                        @Model.Title
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <h1>Edit your post now</h1>
    <hr />
</div>
<div class="container">
    <form id="profile-form" method="post" enctype="multipart/form-data">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="row">
            <h2 class="headerSwitch container">Post Initials</h2>
            <div class="form-group col-md-4">
                <label asp-for="@Model.Title"></label>
                <input asp-for="@Model.Title" class="form-control" />
                <span asp-validation-for="@Model.Title" class="text-danger"></span>
            </div>
            <div class="form-group col-md-4">
                <label asp-for="@Model.CategoryName"></label>
                <select class="form-control" asp-for="@Model.CategoryName">
                    <option value="">Select Category...</option>
                    @foreach (var category in Model.Categories)
                    {
                        <option value=@category>@category</option>
                    }
                </select>
                <span asp-validation-for="@Model.CategoryName" class="text-danger"></span>
            </div>
            <div class="form-group col-md-4">
                <label asp-for="@Model.TagsNames"></label>
                <select multiple="multiple" role="multiselect" class="form-control multiselect" asp-for="@Model.TagsNames">
                    @foreach (var tag in Model.Tags)
                    {
                        <option value=@tag>@tag</option>
                    }
                </select>
                <span asp-validation-for="@Model.TagsNames" class="text-danger"></span>
            </div>
        </div>
        <hr />
        <div class="row">
            <h2 class="headerSwitch container">Post Cover Image</h2>
            <div class="form-group col-md-4">
                <label asp-for="@Model.CoverImage"></label>
                <div class="file-upload" id="chooseCoverImage">
                    <div class="file-select">
                        <div class="file-select-button" id="fileName">Choose File</div>
                        <div class="file-select-name" id="noCoverFile">No file chosen...</div>
                        <input type="file" accept="image/*" asp-for="@Model.CoverImage" id="chooseCoverFile" class="form-control">
                        <span asp-validation-for="@Model.CoverImage" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>
        <hr />

        <div class="row">
            <h2 class="headerSwitch container">Post description</h2>
            <div class="form-group col-md-12">
                <label asp-for="@Model.Content"></label>
                <textarea asp-for="@Model.Content" class="form-control edit-with-tinymce" style="resize: vertical" rows="30"></textarea>
                <span asp-validation-for="@Model.Content" class="text-danger"></span>
            </div>
        </div>
        <hr />

        <div class="row">
            <div class="form-group col-md-5">
                <button id="update-profile-button" type="submit" class="btn btn-primary">Post</button>
            </div>
        </div>
    </form>
</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 type="text/javascript" src="~/js/blog/multiSelect.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render=@GoogleReCaptch.Value.SiteKey"></script>
    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('@GoogleReCaptch.Value.SiteKey', { action: 'homepage' }).then(function (token) {

            });
        });
    </script>
}