@model CartWise.Web.ViewModels.ShoppingList.ShoppingListViewModel
@{
    ViewData["Title"] = Model.Name;
}

<h1>@Model.Name</h1>

<form asp-controller="ShoppingList" asp-action="AddItem" method="post" class="row g-2 mb-4">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="col-12 col-sm-5">
        <label asp-for="NewItem.DisplayName" class="visually-hidden"></label>
        <input asp-for="NewItem.DisplayName" class="form-control" placeholder="Add an item (e.g. Milk)" autofocus />
        <span asp-validation-for="NewItem.DisplayName" class="text-danger"></span>
    </div>
    <div class="col-6 col-sm-3">
        <label asp-for="NewItem.Quantity" class="visually-hidden"></label>
        <input asp-for="NewItem.Quantity" class="form-control" placeholder="Qty" />
        <span asp-validation-for="NewItem.Quantity" class="text-danger"></span>
    </div>
    <div class="col-6 col-sm-2">
        <label asp-for="NewItem.Unit" class="visually-hidden"></label>
        <input asp-for="NewItem.Unit" class="form-control" placeholder="Unit" />
        <span asp-validation-for="NewItem.Unit" class="text-danger"></span>
    </div>
    <div class="col-12 col-sm-2">
        <button type="submit" class="btn btn-primary w-100">Add</button>
    </div>
</form>

@if (Model.Items.Count == 0)
{
    <p class="text-muted">No items yet. Add your first item above.</p>
}
else
{
    <ul class="list-group" id="shopping-list-items">
        @foreach (var item in Model.Items)
        {
            @await Html.PartialAsync("_ListItem", item)
        }
    </ul>
}

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