@page
@using Memodex.WebApp.Pages.Shared
@model EditDeck

@{
    Layout = "Shared/_Layout";

    BackButton backButton = new(Url.Page("BrowseDecks"));
    <partial name="Shared/_BackButtonPartial" model="@backButton"/>
}

<form method="post" enctype="multipart/form-data" class="mt-4">
    <input type="hidden" asp-for="Input.Id" value="@Model.Input.Id"/>
    <div class="space-y-12">
        <div class="border-b border-gray-900/10 pb-12">
            <div class="flex items-center justify-between space-x-4">
                <div>
                    <h2>Edit Deck</h2>
                    <p>Make changes to the deck details below.</p>
                </div>
                <div class="flex space-x-2">
                    <a href="@Url.Page("EditFlashcards", new { deckId = Model.Input.Id })"
                       class="btn-outline">
                        Edit Flashcards
                    </a>
                    <a href="@Url.Page("ExportDeck", new { deckId = Model.Input.Id })"
                       class="btn-outline">
                        Export Deck
                    </a>
                </div>
            </div>


            <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                <div class="sm:col-span-4">
                    <label asp-for="Input.Name">Deck Name</label>
                    <div class="mt-2">
                        <input asp-for="Input.Name"/>
                    </div>
                </div>

                <div class="col-span-full">
                    <label asp-for="Input.Description">Description</label>
                    <div class="mt-2">
                        <textarea asp-for="Input.Description" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-6 flex items-center justify-end gap-x-6">
        <a href="@Url.Page("BrowseDecks")">Cancel</a>
        <button type="submit"
                class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            Update Deck
        </button>
        @{
            string? deleteDeckUrl = Url.Page("EditDeck", "DeleteDeck", new { deckId = Model.Input.Id });
        }
        <button type="submit" formaction="@deleteDeckUrl"
                onclick="return confirm('Are you sure you want to delete this deck? This will also delete any challenges associated with it.');"
                class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
            Delete Deck
        </button>
    </div>
</form>
