{{define "title"}}Gärten{{end}}

{{define "main"}}
<header class='page-heading'>
    <div>
        <p class='eyebrow'>Übersicht</p>
        <h2>Deine Gärten</h2>
    </div>
    <div class='actions'>{{if canUser .CurrentUser "gardens:create"}}<a class='button' href='{{webPath "garden.new"}}'>Garten anlegen</a>{{end}}{{template "view_toggle" "gardens"}}</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='role'>Rolle</label><select id='role' name='role'><option value=''>Alle</option><option value='owner' {{if eqString (index .Filters "role") "owner"}}selected{{end}}>Eigentümer</option><option value='admin' {{if eqString (index .Filters "role") "admin"}}selected{{end}}>Administration</option><option value='member' {{if eqString (index .Filters "role") "member"}}selected{{end}}>Mitglied</option><option value='viewer' {{if eqString (index .Filters "role") "viewer"}}selected{{end}}>Nur Lesen</option></select></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>

<section class='card-grid collection' data-view-key='gardens'>
    {{range .Gardens}}
        <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 "garden.dashboard" .ID}}'><div class='card-content'><h3><a class='card-link' href='{{webPath "garden.dashboard" .ID}}'>{{.Name}}</a></h3>{{with .Description}}<p>{{.}}</p>{{end}}</div></article>
    {{else}}
        <p>Noch kein Garten vorhanden.</p>
    {{end}}
</section>
{{template "pagination" .}}
{{end}}