@model LibraryManagement.Shared.Models.BookCreateRequest
@{
    ViewData["Title"] = "Add New Book";
}

<div class="mb-8">
    <a asp-action="Index" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-900 mb-6 group">
        <svg class="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        Back to Catalog
    </a>

    <div class="max-w-3xl mx-auto">
        <div class="mb-8">
            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Add New Book</h1>
            <p class="mt-2 text-slate-500">Fill in the details below to add a new book to the library catalog.</p>
        </div>

        <div class="card p-6 sm:p-8">
            <form asp-action="Create" method="post" class="space-y-6">
                <!-- Validation Summary -->
                <div asp-validation-summary="ModelOnly" class="text-sm text-red-600 bg-red-50 p-3 rounded-md"></div>

                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <!-- Title -->
                    <div class="sm:col-span-2">
                        <label asp-for="Title" class="block text-sm font-medium text-slate-700">Book Title <span class="text-rose-500">*</span></label>
                        <div class="mt-1">
                            <input asp-for="Title" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. The Great Gatsby" required />
                            <span asp-validation-for="Title" class="mt-1 text-xs text-rose-500"></span>
                        </div>
                    </div>

                    <!-- Author -->
                    <div>
                        <label asp-for="Author" class="block text-sm font-medium text-slate-700">Author <span class="text-rose-500">*</span></label>
                        <div class="mt-1">
                            <input asp-for="Author" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. F. Scott Fitzgerald" required />
                            <span asp-validation-for="Author" class="mt-1 text-xs text-rose-500"></span>
                        </div>
                    </div>

                    <!-- ISBN -->
                    <div>
                        <label asp-for="Isbn" class="block text-sm font-medium text-slate-700">ISBN <span class="text-rose-500">*</span></label>
                        <div class="mt-1">
                            <input asp-for="Isbn" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="e.g. 978-0743273565" required />
                            <span asp-validation-for="Isbn" class="mt-1 text-xs text-rose-500"></span>
                        </div>
                    </div>

                    <!-- Total Copies -->
                    <div>
                        <label asp-for="TotalCopies" class="block text-sm font-medium text-slate-700">Total Copies <span class="text-rose-500">*</span></label>
                        <div class="mt-1">
                            <input asp-for="TotalCopies" type="number" min="1" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="1" required />
                            <span asp-validation-for="TotalCopies" class="mt-1 text-xs text-rose-500"></span>
                        </div>
                    </div>
                    
                    <div class="hidden sm:block"></div> <!-- Empty spacer -->

                    <!-- Description -->
                    <div class="sm:col-span-2">
                        <label asp-for="Description" class="block text-sm font-medium text-slate-700">Description</label>
                        <div class="mt-1">
                            <textarea asp-for="Description" rows="4" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-900 focus:ring-slate-900 sm:text-sm px-3 py-2 border bg-white" placeholder="Brief summary of the book..."></textarea>
                            <span asp-validation-for="Description" class="mt-1 text-xs text-rose-500"></span>
                        </div>
                    </div>

                    <!-- Categories -->
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Categories</label>
                        @{
                            var allCategories = ViewBag.Categories as IEnumerable<LibraryManagement.Shared.Models.CategoryDto>;
                        }
                        @if (allCategories != null && allCategories.Any())
                        {
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                                @foreach (var cat in allCategories)
                                {
                                    <label class="flex items-center gap-2 px-3 py-2 rounded-md border border-slate-200 bg-slate-50 hover:bg-slate-100 cursor-pointer text-sm text-slate-700 transition-colors">
                                        <input type="checkbox" name="CategoryIds" value="@cat.Id"
                                               class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900" />
                                        @cat.Name
                                    </label>
                                }
                            </div>
                        }
                        else
                        {
                            <p class="text-sm text-slate-400 italic">No categories available. Add some first.</p>
                        }
                    </div>
                </div>

                <div class="pt-5 border-t border-slate-100 flex justify-end gap-3">
                    <a asp-action="Index" class="btn-secondary">Cancel</a>
                    <button type="submit" class="btn-primary">Add Book</button>
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}