@model Microsoft.eShopOnContainers.WebMVC.ViewModels.Basket

@{
    ViewData["Title"] = "My Cart";
}

<div class="container">
    @if (ViewBag.BasketInoperativeMsg != null)
    {
        <br />
        <div class="alert alert-warning" role="alert">
            &nbsp;@ViewBag.BasketInoperativeMsg
        </div>
    }
    else
    {
        <article class="esh-basket-titles row">
            <br />
            @if (ViewBag.BasketInoperativeMsg != null)
            {
                <div class="alert alert-warning" role="alert">
                    &nbsp;@ViewBag.BasketInoperativeMsg
                </div>
            }

            <section class="esh-basket-title col-3">Product</section>
            <section class="esh-basket-title col-3 hidden-lg-down"></section>
            <section class="esh-basket-title col-2">Price</section>
            <section class="esh-basket-title col-2">Quantity</section>
            <section class="esh-basket-title col-2">Cost</section>
        </article>

        @for (int i = 0; i < Model.Items.Count; i++)
        {
            var item = Model.Items[i];

        <article class="esh-basket-items  row">
            <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-3">@item.ProductName</section>
            <section class="esh-basket-item esh-basket-item--middle col-2">$ @item.UnitPrice.ToString("N2")</section>
            <section class="esh-basket-item esh-basket-item--middle col-2">
                <input type="hidden" name="@("quantities[" + i +"].Key")" value="@item.Id" />
                <input type="number" class="esh-basket-input" min="1" name="@("quantities[" + i +"].Value")" value="@item.Quantity" />
            </section>
            <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2).ToString("N2")</section>
        </article>

            <div class="esh-basket-items--border row">
                @if (item.OldUnitPrice != 0)
                {
                    <div class="alert alert-warning esh-basket-margin12" role="alert">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ @item.OldUnitPrice </div>
                }
            </div>
            <br />
        }

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

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

            <article class="esh-basket-items row">
                <section class="esh-basket-item col-7"></section>
                <section class="esh-basket-item col-2">
                    <button class="btn esh-basket-checkout" name="name" value="" type="submit">[ Update ]</button>
                </section>
                <section class="esh-basket-item col-3">
                    <input type="submit"
                           class="btn esh-basket-checkout"
                           value="[ Checkout ]" name="action" />
                </section>
            </article>
        </div>
    }
    
</div>

    
