@model EditFlashcards.EditFlashcardItem

<div hx-swap="outerHTML" hx-target="this">
    @Html.AntiForgeryToken()
    @{
        string? updateFlashcardUrl = Url.Page("EditFlashcards", "UpdateFlashcard");
    }
    <div class="text-gray-400 dark:text-slate-700 text-right pt-2">question @Model.OrdinalNumber</div>
    <div class="dark:text-gray-800 border rounded-xl shadow-xl mt-5 p-5 bg-white dark:bg-slate-800">
        <form id="edit-flashcard"
              hx-post="@updateFlashcardUrl"
              hx-headers="javascript:{'RequestVerificationToken': document.querySelector('input[name=__RequestVerificationToken]').value}"
              hx-trigger="save"
              class="w-full">

            <input type="hidden" name="flashcardId" value="@Model.Id"/>
            <div class="flex-grow">
                <label class="text-sm" asp-for="Question">
                    Question:
                </label>
                <textarea rows="@(Math.Max(5, Model.QuestionLineCount + 1))" asp-for="Question" class="h-auto"></textarea>
                <label class="text-sm mt-2" asp-for="Answer">
                    Answer:
                </label>
                <textarea rows="@(Math.Max(5, Model.AnswerLineCount + 1))" asp-for="Answer"></textarea>
            </div>
            <div class="flex items-start space-x-2 mt-2">
                <button type="button"
                        aria-label="submit"
                        hx-include="#edit-flashcard"
                        _="on click trigger save"
                        class="border rounded p-1 border-slate-500 text-slate-500 dark:text-slate-500">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                    </svg>

                </button>
                @{
                    string? editFlashcardUrl = Url.Page("EditFlashcards", "SingleFlashcard", new { flashcardId = Model.Id });
                }
                <button type="button"
                        hx-get="@editFlashcardUrl"
                        hx-trigger="cancel"
                        _="on click trigger cancel"
                        class="border rounded p-1 border-slate-500 text-slate-500 dark:text-slate-500">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>

                </button>
            </div>
        </form>
    </div>
</div>
