{{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>
                <h2>Dane zamówienia</h2>
                <input hidden="hidden" name="id" value="{{.ID}}">
                <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>
                <div class="scrollable" style="flex:1">
                    <table id="basket_table">
                    </table>
                </div>
                <ul id="basket" class="scrollable">
                </ul>
            </div>
            <div>
                <h2>Podsumowanie</h2>
                <label>
                    <small>Do zapłaty:</small>
                    <span id="total-price">100 PLN</span>
                </label>
                <button type="submit">Zapisz</button>
            </div>
            {{end}}
            {{with .Catalogue}}
            <div class="catalog-section">
                <h2>Katalog</h2>
                <div class="scrollable">
                    <table>
                        {{range .}}
                        <tr>
                            <th>{{.Name}}<br><small>{{.Category}} (#{{.ID}})</small></th>
                            <th>{{.Price}} PLN</th>
                            <th>
                                <button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
                                    <i class="fa-solid fa-plus"></i>
                                </button>
                            </th>
                        </tr>
                        {{end}}
                    </table>
                </div>
            </div>
            {{end}}
        </form>
    </main>
    <template id="basket_element_template">
        <tr>
            <th class="cake-name">Name</th>
            <th class="cake-price">Price</th>
            <th>
                <label>
                    <input type="number" min="0">
                </label>
            </th>
            <th class="cake-total">Total</th>
            <th>
                <button type=button>
                    <i class="fa-solid fa-minus"></i>
                </button>
            </th>
        </tr>
    </template>
    <script>
        {{range .Order.Cakes}}
        addCake({{.ID}},{{.Name}}, {{.Price}}, {{.Amount}})
        {{end}}
    </script>
{{end}}