{{template "header" .}}

{{$slug := .Project.Slug}}

<div class="page-header">
    <div class="page-header-title">
        <h1>Schlagworte {{template "helplink" "weboberflaeche#finden"}}</h1>
        <span class="help">Alle Schlagworte dieses Projekts. Ein Klick filtert die Eintragsliste.</span>
    </div>
</div>

{{if .Data.Tags}}
{{/* Das Filterfeld filtert ohne Neuladen (static/tagfilter.js). Ohne
     JavaScript bleibt es wirkungslos, die vollständige Liste steht dann
     trotzdem darunter. */}}
<div class="toolbar">
    <input type="search" placeholder="Schlagworte filtern…" autocomplete="off"
           aria-label="Schlagworte filtern" data-tag-filter>
</div>

<p class="help">
    {{len .Data.Tags}} Schlagworte · Sortiert nach
    {{if eq .Data.Sort "name"}}
    <a href="/p/{{$slug}}/tags">Häufigkeit</a> · <strong>Name</strong>
    {{else}}
    <strong>Häufigkeit</strong> · <a href="/p/{{$slug}}/tags?sort=name">Name</a>
    {{end}}
</p>

<div data-tag-list>
{{if eq .Data.Sort "name"}}
    {{range .Data.Groups}}
    <section class="tag-group" data-tag-group>
        <h2>{{.Letter}}</h2>
        <ul class="tag-list">
            {{range .Tags}}
            <li data-tag="{{.Tag}}"><a href="/p/{{$slug}}/?tag={{.Tag}}">
                <span class="nav-text">{{.Tag}}</span><span class="nav-count">{{.Count}}</span>
            </a></li>
            {{end}}
        </ul>
    </section>
    {{end}}
{{else}}
    <ul class="tag-list">
        {{range .Data.Tags}}
        <li data-tag="{{.Tag}}"><a href="/p/{{$slug}}/?tag={{.Tag}}">
            <span class="nav-text">{{.Tag}}</span><span class="nav-count">{{.Count}}</span>
        </a></li>
        {{end}}
    </ul>
{{end}}
</div>

<div class="empty" data-tag-empty hidden><p>Kein Schlagwort passt zum Filter.</p></div>
{{else}}
<div class="empty"><p>Noch keine Schlagworte in diesem Projekt.</p></div>
{{end}}

{{template "footer" .}}