@model BlogPost
@{
    ViewBag.Title=Model.Title;
}
@section scripts {
   
    <script src="~/js/comment.js" asp-append-version="true"></script>
    <script>
        $.psc.blogcomment.prototype.options.lang = '@System.Globalization.CultureInfo.CurrentUICulture.Name';
        $.psc.blogcomment.prototype.options.apictrlr = '/api/v1/blogcomments';
        $.psc.blogcomment.prototype.options.authorId = '@User.GetUserId()';
        $.psc.blogcomment.prototype.options.authorName = '@User.GetUserName()';
        $(document).ready(function() {
            $('#cmtBtn').click(function() {
                $.ajax({
                    async: true,
                    cache: false,
                    type: 'POST',
                    method: 'POST',
                    contentType:  "application/json",
                    data: JSON.stringify({ 
                        Article: $('#Comment').val(), 
                        ReceiverId: @Model.Id
                        }),
                    error: function(xhr,data) {
                        if (xhr.status === 400)
                        {
                            if (xhr.responseJSON)
                            {
                            $('#commentValidation').html(
                                xhr.responseJSON.Article);
                            } else {
$('#commentValidation').html(
                            "Une erreur est survenue : "+xhr.status+"<br/>"+
                            "<code><pre>"+xhr.responseText+"</pre></code>"
                            )
                            }
                        }
                        
                    },
                    success: function (data) {
                        var comment = $('#Comment').val();
                        $('#Comment').val('');
                        $('#commentValidation').empty();
                        var nnode = '<div data-type="blogcomment" data-id="'+data.id+'" data-allow-edit="True" data-allow-moderate="@ViewBag.moderatoFlag" data-date="'+data.dateCreated+'" data-username="@User.GetUserName()">'+comment+'</div>';
                        $('#comments').append($(nnode).blogcomment())
                    },
                    url:'/api/v1/blogcomments'
                    });
            });
        })
    </script>
    <style>
        .avatar, .commentmeta, .blogcomment p ,  .subcomments {
            display: inline-block;
        }
        .blogcomment {
            display: inline-block;
            margin:.3em;
        }
    </style>
}

    <div class="post">
        <div class="float-left">
            <img class="photo" src="@Model.Photo" >
        </div>
       
        <h1 ismarkdown>@Model.Title</h1>
        
        @Html.DisplayFor(m=>m.Author)
        <asciidoc>@Html.DisplayFor(m=>m.Article)</asciidoc>
        
    </div>

    <div id="comments">
        @if (Model.Comments!=null) {
            foreach (var comment in Model.Comments.Where(c=>c.ParentId==null)) {
                @await Component.InvokeAsync("Comment", new { id = comment.Id })
            }
        }
    </div>
@if (User.GetUserId()!=null) {
    <div class="form-horizontal">
        <div class="input-group" >
            <input name="Comment" id="Comment" class="form-control" placeholder="..."/>
            <span class="input-group-btn">
                <span id="commentValidation"></span>
                <input type="button" value="Comment" class="btn btn-secondary"
                data-receiverId="@Model.Id" id="cmtBtn"
                 />
            </span> 
        </div>
        <span asp-validation-for="Article" class="text-danger" ></span>
    </div>
    }
    else {
        <p><i>Vous devez être identifié pour commenter.</i> </p>
    }
    
    @if ((await AuthorizationService.AuthorizeAsync(User, Model, new EditPermission())).Succeeded) {
    <a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-link">Edit</a>
    }
    <a asp-action="Index" class="btn btn-link">Back to List</a>