@model BTCPayServer.Models.AppViewModels.ViewPointOfSaleViewModel
@{
    Layout = "_LayoutPos";
    var anyInventoryItems = Model.Items.Any(item => item.Inventory.HasValue);
}

<div class="container d-flex h-100">
    <div class="justify-content-center align-self-center text-center mx-auto px-2 py-3 w-100 m-auto">
        <partial name="_StatusMessage" />

        <h1 class="mb-4">@Model.Title</h1>
        @if (!string.IsNullOrEmpty(Model.Description))
        {
            <div class="row">
                <div class="overflow-hidden col-12">@Safe.Raw(Model.Description)</div>
            </div>
        }
        <div class="row  card-deck my-3 mx-auto">
            @for (int x = 0; x < Model.Items.Length; x++)
            {
                var item = Model.Items[x];
                var buttonText = (string.IsNullOrEmpty(item.BuyButtonText) ? 
                    item.Custom?
                    Model.CustomButtonText :
                    Model.ButtonText
                        : item.BuyButtonText)
                    .Replace("{0}",item.Price.Formatted)
                    .Replace("{Price}",item.Price.Formatted);
                <div class="card my-2" data-id="@x">
                    @if (!String.IsNullOrWhiteSpace(item.Image))
                    {
                        <img class="card-img-top" src="@item.Image" alt="Card image cap" asp-append-version="true">
                    }
                    <div class="card-body pb-0">
                        <h5 class="card-title">@item.Title</h5>
                        @if (!String.IsNullOrWhiteSpace(item.Description))
                        {
                            <p class="card-text">@Safe.Raw(item.Description)</p>
                        }
                    </div>
                    <div class="card-footer bg-transparent border-0">
                        @if (!item.Inventory.HasValue || item.Inventory.Value > 0)
                        {
                            <div class="w-100">
                                @if (item.Custom)
                                {
                                    <form method="post" asp-controller="AppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy>
                                        <input type="hidden" name="choicekey" value="@item.Id"/>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">@Model.CurrencySymbol</span>
                                            </div>
                                            <input class="form-control" type="number" min="@item.Price.Value" step="@Model.Step" name="amount"
                                                   value="@item.Price.Value" placeholder="Amount" style="flex: 2 0 80px;">
                                            <div class="input-group-append flex-fill">
                                                <button class="btn btn-primary text-nowrap flex-fill" type="submit">
                                                    @(item.BuyButtonText ?? Model.CustomButtonText)
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                }
                                else
                                {
                                    <form method="post" asp-controller="AppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false">
                                        <button type="submit" name="choiceKey" class="js-add-cart btn btn-primary" value="@item.Id">
                                            @buttonText
                                        </button>
                                    </form>
                                }
                            </div>
                        }
                        @if (item.Inventory.HasValue)
                        {

                            <div class="w-100 pt-2 text-center text-muted">
                                @if (item.Inventory > 0)
                                {
                                    <span>@item.Inventory left</span>
                                }
                                else
                                {
                                    <span>Sold out</span>
                                }
                            </div>
                        }else if (anyInventoryItems)
                        {
                            <div class="w-100 pt-2">&nbsp;</div>
                        }
                    </div>
                </div>
            }
            @if (Model.ShowCustomAmount)
            {
                <div class="card my-2">
                    <div class="card-body my-auto pb-0">
                        <h5 class="card-title">Custom Amount</h5>
                        <p class="card-text">Create invoice to pay custom amount</p>

                    </div>
                    <div class="card-footer bg-transparent border-0">
                        <form method="post" asp-controller="AppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">@Model.CurrencySymbol</span>
                                </div>
                                <input class="form-control" type="number" min="0" step="@Model.Step" name="amount" placeholder="Amount">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="submit">@Model.CustomButtonText</button>
                                </div>
                            </div>
                        </form>
                        @if (anyInventoryItems)
                        {
                            <div class="w-100 pt-2">&nbsp;</div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
</div>