{{define "body"}}
    <h2 class="form-categories-heading">Categories</h2>
    {{template "flashes" .}}
    {{range $category := .categories}}
                {{template "row-category" dict "category" $category "categories" $.categories}}
    {{end}}
    
    <div class="row">
        <form method="POST" action="/categories/add">
        <div class="col-xs-3">
        <input name="name" class="form-control" placeholder="Name" />
        </div>
        <div class="col-xs-3">
            {{template "select-category" dict "categories" .categories "id" -1}}
        </div>
        <div class="col-xs-2">
            <input type="submit" class="add-submit btn btn-primary btn-block" value="Add Category" />
         </div>
         </form>
    </div>
{{end}}

<!-- 
Print a category admin option row including it's name, delete option and
new category select
    category: a category object - the current top level category to handle
    categories: flat map of all categories, sorted by parents
 -->
{{define "row-category"}}
    <div class="row">
        <div class="col-xs-2">
            {{stringTimes .category.Depth "- "}}
            {{.category.Name}}
        </div>
        <div class="col-xs-1">
            <a href="/categories/delete?id={{.category.Id}}" class="cat-delete">delete</a>
        </div>
        <div class="col-xs-3">
        <form action="/categories/change-parent?cid={{.category.Id}}" method="POST">
            {{if $.category.Parent.Valid }}
                {{template "select-category" dict "categories" .categories "id" $.category.Parent.Value}}
            {{else}}
                {{template "select-category" dict "categories" .categories "id" -1}}
            {{end}}
        </form>
        </div>
    </div>

    {{range $child := .category.Children}}
        {{template "row-category" dict "category" $child "categories" $.categories}}
     {{end}}    

{{end}}

<!--
Print a full <select> of categories with one selected
    categories: a flat map of categories ordered by parent
    id: the category id that should be selected (or -1 for none)
-->
{{define "select-category"}}
    <select class="form-control category-change-parent" name="parent" >
        <option value="none" {{if not .category.Parent.Valid}} selected="true"{{end}}>-- None --</option>
        {{range $category := .categories}}
            {{template "option-category" dict "category" $category "id" $.id}}
        {{end}}
    </select>
{{end}}
<!--
print all the <option> inside a select for a category and its children
    category: the category to print as an option (and it's nested children)
    id: the category id that should be selected
-->
{{define "option-category"}}
    <option value="{{.category.Id}}" {{if eq .id .category.Id}}selected="true"{{end}}>{{.category.ToString}}</option>
    {{range $child := .category.Children}}
        {{template "option-category" dict "category" $child "id" $.id}}
    {{end}}            
{{end}}