{{define "title"}}
Orders
{{end}}
{{define "main"}}
<main>
    <form class="search-container" hx-get="/orders/search" hx-target="#results-table"
        hx-trigger="keyup delay:500ms, change">
        <label>
            <input type="search" name="q" placeholder="Search orders...">
        </label>

        <label for="from">form</label>
        <input type="date" value="{{.Today}}" id="from" name="from">
        <label for="from">to</label>
        <label for="to"></label><input type="date" value="{{.Today}}" id="to" name="to">

        <div class="htmx-indicator">
            Searching...
        </div>

        <div id="results-table">
            {{template "orders-table" .Orders}}
        </div>
    </form>
</main>
{{end}}

{{define "orders-table"}}
<table id="orders_table">
    <tr>
        <th></th>
        <th>Name</th>
        <th>Surname</th>
        <th>Phone</th>
        <th>Location</th>
        <th>Date</th>
        <th>Status</th>
        <th>Total</th>
    </tr>
    {{range .}}
    <tr>
        <th><a href="/order/{{.ID}}">edit</a></th>
        <th>{{.Name}}</th>
        <th>{{.Surname}}</th>
        <th>{{.Phone}}</th>
        <th>{{.Location}}</th>
        <th>{{.Date.Format "2006-01-02"}}</th>
        <th>{{.Status}}</th>
        <th>{{.Total}}</th>
    </tr>
    {{end}}</table>
{{end}}