{{ $context := . }}

<table class="table table-sm table-striped table-bordered">
    <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Description</th>
        <th>Category</th>
        <th class="text-end">Price</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    {{ range $context.Products }}

    {{ if ne $context.EditId .ID }}
    <tr>
        <td>{{ .ID }}</td>
        <td>{{ .Name }}</td>
        <td>
            <span class="d-inline-block text-truncate" style="max-width: 200px;">{{ .Description }}</span>
        </td>
        <td>{{ .CategoryName }}</td>
        <td class="text-end">{{ printf "$%.2f" .Price }}</td>
        <td class="text-center">
            <form method="post" action="{{ $context.EditUrl }}">
                <input type="hidden" name="id" value="{{ .ID }}"/>
                <button type="submit" class="btn btn-sm btn-warning">Edit</button>
            </form>
        </td>
    </tr>
    {{ else }}
    <tr>
        <form method="post" action="{{ $context.SaveUrl }}">
            <td><input type="hidden" name="id" value="{{ .ID }}"/><input
                    type="text" value="{{ .ID }}" class="form-control" size="3" disabled/></td>
            <td><input type="text" name="name" value="{{ .Name }}" class="form-control" size="12"/></td>
            <td><input type="text" name="description" value="{{ .Description }}" class="form-control" size="15"/></td>
            <td>{{ handler "Categories" "GetSelect" .Category.ID }}</td>
            <td><input type="text" name="price" value="{{ .Price }}" class="form-control text-end" size="7"/></td>
            <td>
                <button type="submit" class="btn btn-sm btn-danger">Save</button>
            </td>
        </form>
    </tr>
    {{ end }}


    {{ end }}
    </tbody>
    {{ if eq $context.EditId 0 }}
    <tfoot>
    <tr>
        <td colspan="6" class="text-center">Add New Product</td>
    </tr>
    <tr>
        <form method="post" action="{{ $context.SaveUrl }}">
            <td>-</td>
            <td><input type="text" name="name" class="form-control" size="12"/></td>
            <td><input type="text" name="description" class="form-control" size="15"/></td>
            <td>{{ handler "Categories" "GetSelect" 0 }}</td>
            <td><input type="text" name="price" class="form-control text-end" size="7"/></td>
            <td>
                <button type="submit" class="btn btn-sm btn-danger">Save</button>
            </td>
        </form>
    </tr>
    </tfoot>
    {{ end }}
</table>