@using Htmx.TagHelpers
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model DetailsModel
<form
    hx-post
    hx-page="Details"
    hx-route-slug="@Model.Article.Slug"
    hx-swap="outerHTML"
    class="col-12 mb-3"
    method="post">
    <div class="mb-2 flex w-full gap-3">
        <div class="flex-1 min-w-0">
            <label class="block mb-2 text-sm font-medium text-gray-900" asp-for="Comment.DisplayName"></label>
            <input class="block bg-gray-50 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 text-sm p-2 w-full" asp-for="Comment.DisplayName"/>
            <span asp-validation-for="Comment.DisplayName" class="text-danger"></span>
        </div>
        <div class="flex-1 min-w-0">
            <label class="block mb-2 text-sm font-medium text-gray-900" asp-for="Comment.EMail"></label>
            <input class="block bg-gray-50 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 text-sm p-2 w-full" asp-for="Comment.EMail"/>
            <span asp-validation-for="Comment.EMail" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="Comment.Content" class="block mb-2 text-sm font-medium text-gray-900"></label>
        <textarea id="contentInput" asp-for="Comment.Content"></textarea>
        <span asp-validation-for="Comment.Content" class="text-danger"></span>
    </div>
    <input type="submit" class="text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-3.5 py-2 focus:outline-none" value="Submit"/>
</form>
<script>
    simplemde = new SimpleMDE({ element: document.getElementById("contentInput"), forceSync: true });
</script>