{{template "kopf" .}}

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

<div class="seitenkopf">
    <div class="seitenkopf-titel">
        <h1>Schlagworte {{template "hilfelink" "weboberflaeche#finden"}}</h1>
        <span class="hilfe">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="werkzeugleiste">
    <input type="search" placeholder="Schlagworte filtern…" autocomplete="off"
           aria-label="Schlagworte filtern" data-tag-filter>
</div>

<p class="hilfe">
    {{len .Data.Tags}} Schlagworte · Sortiert nach
    {{if eq .Data.Sortierung "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-liste>
{{if eq .Data.Sortierung "name"}}
    {{range .Data.Gruppen}}
    <section class="schlagwort-gruppe" data-tag-gruppe>
        <h2>{{.Buchstabe}}</h2>
        <ul class="schlagwort-liste">
            {{range .Tags}}
            <li data-tag="{{.Tag}}"><a href="/p/{{$slug}}/?tag={{.Tag}}">
                <span class="nav-text">{{.Tag}}</span><span class="nav-zahl">{{.Count}}</span>
            </a></li>
            {{end}}
        </ul>
    </section>
    {{end}}
{{else}}
    <ul class="schlagwort-liste">
        {{range .Data.Tags}}
        <li data-tag="{{.Tag}}"><a href="/p/{{$slug}}/?tag={{.Tag}}">
            <span class="nav-text">{{.Tag}}</span><span class="nav-zahl">{{.Count}}</span>
        </a></li>
        {{end}}
    </ul>
{{end}}
</div>

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

{{template "fuss" .}}