{{define "title"}}
    {{if .Order.ID}}
    Edytuj zamówienie #{{.Order.ID}}
    {{else}}
    Nowe zamówienie
    {{end}}
{{end}}
{{define "main"}}
    <main>
        <form method="post" class="order">
            {{with .Order}}
            <div class="order-contents">
                <div>
                    <h2>Dane zamówienia</h2>
                    <label>
                        <input hidden="hidden" name="id" value="{{.ID}}">
                    </label>
                    <label>Imię
                        <input type="text" name="name" value="{{.Name}}">
                    </label>
                    <label>Nazwisko
                        <input type="text" name="surname" value="{{.Surname}}">
                    </label>
                    <label>Numer telefonu
                        <input type="tel" name="phone" value="{{.Phone}}">
                    </label>
                    <label>Lokalizacja
                        <select name="location">
                            <option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option>
                            <option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option>
                        </select>
                    </label>
                    <label>Data dostawy
                        <input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
                    </label>
                    <label>Status
                        <select name="status">
                            <option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
                            <option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
                        </select>
                    </label>
                    <label>Zaliczka
                        <input type="number" name="paid" min="0" value="{{.Paid}}">
                    </label>
                </div>
                <div>
                    <h2>Dodane Ciasta</h2>
                    <ul id="basket"  class="scrollable">
                    </ul>
                </div>
                <button type="submit">Zapisz</button>
            </div>
            {{end}}
            {{with .Catalogue}}
                <div >
                    <h2>Katalog</h2>
                    <ul class="scrollable">
                        {{range .}}
                            <li>
                                {{.Name}} {{.Price}}
                                <button type=button onClick="addCake({{.ID}},'{{.Name}} ({{.Price}}PLN)', 1)">dodaj</button>
                            </li>
                        {{end}}
                    </ul>
                </div>
            {{end}}
        </form>
    </main>
    <script>
        function addCake(id, name, amount) {
            const cake = document.getElementById("cake[" + id + "]");
            if (cake != null) {
                const value = Number(cake.getAttribute("value"));
                cake.setAttribute("value", value + 1)
                return;
            }
            const label = document.createElement("label");
            label.innerText = name
            const input = document.createElement("input");
            input.setAttribute("id", "cake[" + id + "]")
            input.setAttribute("type", "number")
            input.setAttribute("min", "0")
            input.setAttribute("name", "cake[" + id + "]")
            input.setAttribute("value", amount)
            const button = document.createElement("button");
            button.setAttribute("type", "button")
            button.setAttribute("onClick", "removeCake(" + id + ")")
            button.innerText = "usuń"
            const li = document.createElement("li");
            li.appendChild(label)
            li.appendChild(input)
            li.appendChild(button)
            li.setAttribute("id", "li[" + id + "]")
            const ul = document.getElementById("basket");
            ul.appendChild(li)
        }

        function removeCake(id) {
            document.getElementById("li[" + id + "]").remove()
        }

        {{range .Order.Cakes}}
        addCake({{.ID}},'{{.Name}} ({{.Price}}PLN)', {{.Amount}})
        {{end}}
    </script>
{{end}}