{{define "body"}}
<main>
    <div class="c-section" style="margin-top: 25px;">
        <div class="c-section__content">
            <h1>Store</h1>
            {{if ne .error ""}}
                <p class="c-error">{{.error}}</p>
            {{end}}
            <form action="/order/checkout" method="POST">
                <p>At the moment we only ship within the Netherlands. If you live outside the Netherlands and would like to receive the album please send an email to <a class="c-link" href="mailto:info@alexandervanpopta.com">info@alexandervanpopta.nl</a>.</p>
                <ul class="c-product-container">
                    {{range .products}}
                        <li class="c-product">
                            <span class="c-product__title">{{.Name}}</span>
                            <img class="c-product__img" src="{{.Image}}" alt="">
                            <div class="c-product__order-info">
                                <span class="c-product__price">{{formatMoney .Price}}</span> <span class="c-product__x">&times;</span> 
                                <input class="c-input c-product__input" name="product[{{.ID}}]" type="number" value="{{if eq .ID 1}}{{$.order.MTMLP}}{{else if eq .ID 2}}{{$.order.MTMCD}}{{else}}{{$.order.AllTheMemCD}}{{end}}">
                            </div>
                        </li>
                    {{end}}
                </ul>
                <h2 class="t-h2">Order info</h2>
                <div class="c-order-info">
                    <div class="c-form-row">
                        <label for="name" class="c-label">Name</label>
                        <input name="name" id="name" class="c-input" type="text" value="{{.order.Name}}"/>
                    </div>
                    <div class="c-form-row">
                        <label for="email_address" class="c-label">Email address</label>
                        <input name="email_address" id="email_address" class="c-input" type="text" value="{{.order.EmailAddress}}"/>
                    </div>
                    <div class="c-form-row">
                        <label for="streetname" class="c-label">Streetname + number</label>
                        <input name="streetname" id="streetname" class="c-input" type="text" value="{{.order.Streetname}}"/>
                    </div>
                    <div class="c-form-row">
                        <label for="postcode" class="c-label">Postcode</label>
                        <input name="postcode" id="postcode" class="c-input" type="text" value="{{.order.Postcode}}"/>
                    </div>
                    <div class="c-form-row">
                        <label for="city" class="c-label">City</label>
                        <input name="city" id="city" class="c-input" value="{{.order.City}}"/>
                    </div>
                </div>

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