{{ define "cart" }}
    {{ template "header" . }}

    <main role="main">
        <div class="py-5">
            <div class="container bg-light py-3 px-lg-5 py-lg-5">
                <h1>Shopping Cart</h1>

                {{ if eq (len $.items) 0 }}
                <p>Your shopping cart is empty.</p>
                <a class="btn btn-primary" href="/" role="button">Browse Products</a>
                {{ end }}

                {{ range $.items }}
                <div class="row pt-2 mb-2">
                    <div class="col text-right">
                            <a href="/product/{{.Item.Id}}"><img class="img-fluid" style="width: auto; max-height: 60px;"
                                src="{{.Item.Picture}}" /></a>
                    </div>
                    <div class="col align-middle">
                        <strong>{{.Item.Name}}</strong><br/>
                        <small class="text-muted">SKU: #{{.Item.Id}}</small>
                    </div>
                    <div class="col text-left">
                        Qty: {{.Quantity}}<br/>
                        <strong>
                            {{.Price.CurrencyCode}}
                            {{.Price.Amount.Decimal}}.
                            {{- .Price.Amount.Fractional}}{{- if lt .Price.Amount.Fractional 10}}0{{end}}
                        </strong>
                    </div>
                </div>
                {{ end }}

                {{ if $.items }}
                <div class="row mt-5">
                    <div class="col-8 offset-2">
                        <div class="d-flex justify-content-between align-items-center">
                                <form method="POST" action="/cart/empty">
                                    <button class="btn btn-secondary" type="submit">Empty Cart</button>
                                </form>     
                                <a class="btn btn-primary" href="/checkout" role="button">Proceed to Checkout</a>
                        </div>
                    </div>
                </div>
                {{ end }}

                {{ if $.recommendations}}
                    <hr/>
                    {{ template "recommendations" $.recommendations }}
                {{ end }}

            </div>
        </div>
    </main>

    {{ template "footer" . }}
{{ end }}