@page
@model BrowseDecks

@{
    Layout = "Shared/_Layout";
}
<div class="mb-6">
    <h1 class="text-3xl font-bold mb-2">Browse Decks</h1>
    <p class="text-gray-600 mb-4">
        Pick a Deck and start your challenge. Each deck contains a curated collection of flashcards to enhance your learning.
    </p>

    <div class="flex items-end space-x-4">
        <a href="@Url.Page("AddDeck")" class="btn-outline">
            Add Deck
        </a>
        <a href="@Url.Page("ImportDeck")" class="btn-outline">
            Import Deck
        </a>
    </div>
</div>
<ul aria-label="deck list" role="list" class="divide-y divide-gray-100 dark:divide-slate-600">
    @foreach (BrowseDecks.DeckItem deck in Model.Decks)
    {
        <li class="flex justify-between gap-x-4 py-5">
            <div class="min-w-0 flex-auto">
                <form method="post" action="@Url.Page("StartChallenge")">
                    <input type="hidden" name="deckId" value="@deck.Id"/>
                    @Html.AntiForgeryToken()
                    <button class="flex justify-between items-center space-x-2" aria-label="start challenge">

                        <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 text-slate-600 hover:text-gray-900 dark:hover:text-slate-400">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
                        </svg>

                        <h2>@deck.Name</h2>

                    </button>
                </form>
                <p class="mt-1 truncate text-xs" id="description_@deck.Id">@deck.Description</p>
            </div>
            <div class="flex flex-col items-end justify-center px-2">
                <a href="@Url.Page("EditFlashcards", new { deckId = deck.Id })"
                   aria-label="edit flashcards"
                   class="btn-icon">
                    @deck.ItemCount
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"/>
                    </svg>
                </a>
                <a href="@Url.Page("EditDeck", new { deckId = deck.Id })"
                   aria-label="edit deck"
                   class="mt-2 btn-icon">
                    <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 012.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
                    </svg>
                </a>
            </div>
        </li>
    }
</ul>
