@model CartWise.Web.ViewModels.ShoppingList.ShoppingListItemViewModel
@{
    var isPurchased = Model.Status == CartWise.Domain.Enums.ShoppingListItemStatus.Purchased;
    var isSkipped = Model.Status == CartWise.Domain.Enums.ShoppingListItemStatus.Skipped;
}

<li class="shopping-list-item list-group-item d-flex justify-content-between align-items-center" id="list-item-@Model.Id">
    <span>
        @Model.DisplayName
        @if (!string.IsNullOrEmpty(Model.QuantityDisplay))
        {
            <span class="text-muted">(@Model.QuantityDisplay)</span>
        }
    </span>
    <span class="shopping-list-item-actions d-flex align-items-center gap-2">
        <span class="badge bg-secondary">@Model.Status</span>
        <form asp-controller="ShoppingList" asp-action="TogglePurchased" asp-route-id="@Model.Id" method="post" class="d-inline js-item-action-form">
            <input type="hidden" name="rowVersion" value="@Model.ConcurrencyToken" />
            <button type="submit" class="btn btn-outline-success">@(isPurchased ? "Undo" : "Purchased")</button>
        </form>
        <form asp-controller="ShoppingList" asp-action="ToggleSkipped" asp-route-id="@Model.Id" method="post" class="d-inline js-item-action-form">
            <input type="hidden" name="rowVersion" value="@Model.ConcurrencyToken" />
            <button type="submit" class="btn btn-outline-secondary">@(isSkipped ? "Unskip" : "Skip")</button>
        </form>
        <form asp-controller="ShoppingList" asp-action="DeleteItem" asp-route-id="@Model.Id" method="post" class="d-inline js-item-delete-form">
            <input type="hidden" name="rowVersion" value="@Model.ConcurrencyToken" />
            <button type="submit" class="btn btn-outline-danger">Delete</button>
        </form>
    </span>
</li>
