@using CoreWiki.Models
@model DetailsModel

<div role="button" @@click="formOpen = !formOpen" class="flex items-center mb-2">
    <span class="text-2xl">Add comment</span>
    <svg x-show="!formOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ms-auto">
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
    </svg>
    <svg x-show="formOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ms-auto">
        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
    </svg>
</div>
<hr class="mb-2"/>
<div x-cloak x-show="formOpen">
    <script src="~/lib/simplemde/simplemde.min.js"></script>
    <script>
        let simplemde;
    </script>
    <partial name="_commentsForm" model="Model"/>
</div>
<div role="button" @@click="commentsOpen = !commentsOpen" class="flex items-center mb-2">
    <span class="text-2xl">Comments</span>
    <svg x-show="!commentsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ml-auto">
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
    </svg>
    <svg x-show="commentsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;" class="ml-auto">
        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
    </svg>
</div>
<hr/>
<div x-cloak x-show="commentsOpen">
    <div hx-get hx-trigger="commentsChanged from:body" hx-page="Details" hx-route-slug="@Model.Article.Slug" class="d-flex flex-column gap-3 mt-2">
        <partial name="_commentsList" model="@(new ArticleCommentListViewModel {Comments = Model.Article.Comments, Slug = Model.Article.Slug, PageNumber = 1})"/>
    </div>
</div>