{{define "body"}}
<main>
    <div class="c-section" style="margin-top: 25px;">
        <div class="c-section__content">
            <form action="/order/checkout" method="POST">
                {{range $k, $v := .order}}
                    <input name="products[{{$k}}]" type="hidden" value="{{$v}}">
                {{end}}
                <h2 class="t-h2">Order summary</h2>

                <div class="c-order-info">
                    <div class="c-form-row">
                        <table class="c-price-table">
                            {{range $k, $v := .order}}
                                {{if gt $v 0}}
                                    {{$prod := getProd $k $.products}}
                                    <tr>
                                        <td style="font-weight: 400;">{{$prod.Name}} &times; {{$v}}</td>
                                        <td class="c-price-table__right">{{formatMoney (mult $prod.Price $v)}}</td>
                                    </tr>
                                {{end}}
                            {{end}}
                        </table>
                    </div>
                </div>
                {{if ne .error ""}}
                    <div class="c-error">
                        {{.error}}
                    </div>
                {{end}}
                <div style="margin-top: 50px">
                    <h2 class="t-h2">Shipping info</h2>
                    <div class="c-grid c-form-row">
                        <div>
                            <label for="name" class="c-label">Name</label>
                            <input name="name" id="name" class="c-input" type="text" value="{{.shipping.Name}}"/>
                        </div>
                        <div>
                            <label for="email" class="c-label">Email address</label>
                            <input name="email" id="email" class="c-input" type="text" value="{{.shipping.Email}}"/>
                        </div>
                    </div>
                    <div class="c-grid c-form-row">
                        <div>
                            <label for="address" class="c-label">Streetname + number</label>
                            <input name="address" id="address" class="c-input" type="text" value="{{.shipping.Address}}"/>
                        </div>
                        <div>
                            <label for="postcode" class="c-label">Postcode</label>
                            <input name="postcode" id="postcode" class="c-input" type="text" value="{{.shipping.Postcode}}"/>
                        </div>
                    </div>
                    <div class="c-grid c-form-row">
                        <div class="o-input-select-margin">
                            <label for="city" class="c-label">City</label>
                            <input name="city" id="city" class="c-input" value="{{.shipping.City}}"/>
                        </div>
                        <div>
                            <label for="country" class="c-label">Country</label>
                            <div class="c-select">
                                <select class="c-select__select" name="country" value="{{.shipping.Country}}" id="country">
                                    {{range $key, $description := countries}}
                                        <option value="{{$key}}"{{if eq $.shipping.Country $key}}selected{{end}}>{{$description}}</option>
                                    {{end}}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="c-button c-button">Next</button>
            </form>
        </div>
    </div>
</main>
{{end}}