@page "{handler?}"
@model IndexModel
@{
    ViewData["Title"] = "Basket";
}
<section class="esh-catalog-hero">
    <div class="container">
        <img class="esh-catalog-title" src="~/images/main_banner_text.png" />
    </div>
</section>

<div class="container">

    @if (Model.BasketModel.Items.Any())
    {
        <form method="post">
            <article class="esh-basket-titles row">
                <br />
                <section class="esh-basket-title col-xs-3">Product</section>
                <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
                <section class="esh-basket-title col-xs-2">Price</section>
                <section class="esh-basket-title col-xs-2">Quantity</section>
                <section class="esh-basket-title col-xs-2">Cost</section>
            </article>
            <div class="esh-catalog-items row">
                <div asp-validation-summary="All" class="text-danger"></div>
                @for (int i = 0; i < Model.BasketModel.Items.Count; i++)
                {
                    var item = Model.BasketModel.Items[i];
            <article class="esh-basket-items row">
                <div>
                    <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
                        <img class="esh-basket-image" src="@item.PictureUrl" />
                    </section>
                    <section class="esh-basket-item esh-basket-item--middle col-xs-3">@item.ProductName</section>
                    <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ @item.UnitPrice.ToString("N2")</section>
                    <section class="esh-basket-item esh-basket-item--middle col-xs-2">
                        <input type="hidden" name="@("Items[" + i + "].Id")" value="@item.Id" />
                        <input type="number" class="esh-basket-input" min="0" name="@("Items[" + i + "].Quantity")" value="@item.Quantity" />
                    </section>
                    <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2).ToString("N2")</section>
                </div>
                <div class="row">

                </div>
            </article> @*<div class="esh-catalog-item col-md-4">
                            @item.ProductId
                        </div>*@                }

                <div class="container">
                    <article class="esh-basket-titles esh-basket-titles--clean row">
                        <section class="esh-basket-title col-xs-10"></section>
                        <section class="esh-basket-title col-xs-2">Total</section>
                    </article>

                    <article class="esh-basket-items row">
                        <section class="esh-basket-item col-xs-10"></section>
                        <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ @Model.BasketModel.Total().ToString("N2")</section>
                    </article>

                    <article class="esh-basket-items row">
                        <section class="esh-basket-item col-xs-7"></section>
                        <section class="esh-basket-item col-xs-2">
                            @*<button class="btn esh-basket-checkout" name="name" value="" type="submit">[ Update ]</button>*@
                        </section>
                    </article>
                </div>
                <div class="row">
                    <section class="esh-basket-item col-xs-1">
                        <a asp-page="/Index" class="btn esh-basket-checkout text-white">[ Continue Shopping..]</a>
                    </section>
                    <section class="esh-basket-item col-xs-push-7 col-xs-4">

                        <button class="btn esh-basket-checkout" name="updatebutton" value="" type="submit"
                                asp-page-handler="Update">
                            [ Update ]
                        </button>
                        @{ var data = new Dictionary<string, string>
                                                                                            {
                                { Constants.BASKET_ID, Model.BasketModel.Id.ToString() },
                            }; }

                            <input type="submit" asp-page="Checkout"
                                   class="btn esh-basket-checkout"
                                   value="[ Checkout ]" name="action" />

                    </section>
                </div>
            </div>
        </form>
    }
    else
    {
        <h3 class="esh-catalog-items row">
            Basket is empty.
        </h3>
        
        <section class="esh-basket-item">
            <a asp-page="/Index" class="btn esh-basket-checkout text-white">[ Continue Shopping..]</a>
        </section>
    }
</div>