{{define "title"}}Orte{{end}}

{{define "location_nodes"}}
<ul class='location-tree'>
	{{range .}}
	<li>
		<a class='location-row' href='{{webPath "location.view" .Location.GardenID .Location.ID}}'>
			<div><h3>{{.Location.Name}}</h3>{{with .Location.Kind}}<span class='status'>{{.}}</span>{{end}}</div>
			{{with .Location.Description}}<p>{{.}}</p>{{end}}
		</a>
		{{with .Children}}{{template "location_nodes" .}}{{end}}
	</li>
	{{end}}
</ul>
{{end}}

{{define "main"}}
<header class='page-heading'>
	<div><h2>Orte</h2></div>
	<div class='actions'>{{if canGarden .Garden "locations:create"}}<a class='button' href='{{webPath "location.new" .Garden.ID}}'>Ort anlegen</a>{{end}}{{template "view_toggle" "locations"}}</div>
</header>
<form class='panel filter-bar' method='GET'><div class='filter-fields'><div><label for='q'>Suche</label><input id='q' name='q' type='search' value='{{index .Filters "q"}}' placeholder='Name oder Beschreibung'></div><div><label for='kind'>Art des Orts</label><input id='kind' name='kind' value='{{index .Filters "kind"}}' placeholder='z. B. Beet'></div><div><label for='sort'>Sortierung</label><select id='sort' name='sort'><option value='name_asc'>Name A–Z</option><option value='name_desc' {{if eqString (index .Filters "sort") "name_desc"}}selected{{end}}>Name Z–A</option><option value='newest' {{if eqString (index .Filters "sort") "newest"}}selected{{end}}>Neueste zuerst</option><option value='oldest' {{if eqString (index .Filters "sort") "oldest"}}selected{{end}}>Älteste zuerst</option></select></div><button class='filter-submit'>Filtern</button></div></form>
{{if .LocationTree}}
	<section class='locations-views' data-view-variants data-view-key='locations'>
		<div class='panel location-panel' data-view-variant='list' hidden>{{template "location_nodes" .LocationTree}}</div>
		<div class='card-grid' data-view-variant='grid'>
			{{range .Locations}}
			<article class='card card--clickable card--interactive {{if .ImageData}}card--image{{end}}' {{if .ImageData}}data-background-image='{{.ImageData}}'{{end}} role='link' tabindex='0' data-card-href='{{webPath "location.view" .GardenID .ID}}'><div class='card-content'>
				<h3><a class='card-link' href='{{webPath "location.view" .GardenID .ID}}'>{{.Name}}</a></h3>
				{{with .Kind}}<span class='status'>{{.}}</span>{{end}}{{with .Description}}<p>{{.}}</p>{{end}}
			</div></article>
			{{end}}
		</div>
	</section>
{{else}}
	<p>In diesem Garten wurden noch keine Orte angelegt.</p>
{{end}}
{{template "pagination" .}}
{{end}}