{{ define "main" }}
  <div class="collection" style="--section-color: var(--palette-ichigo)">
    <h1 class="collection-title">{{ .Title }}</h1>
    <div class="collection-inner">
      {{ .Content }}

      {{ $pages := where site.RegularPages "Section" "library" }}

      {{ if $pages }}
        {{/* Gruppen sammeln + sortieren */}}
        {{ $groups := dict }}
        {{ range $pages }}
          {{ $g := .Params.group | default "Allgemein" }}
          {{ $existing := index $groups $g | default slice }}
          {{ $groups = merge $groups (dict $g ($existing | append .)) }}
        {{ end }}
        {{ $groupNames := slice }}
        {{ range $g, $_ := $groups }}{{ $groupNames = $groupNames | append $g }}{{ end }}
        {{ $groupNames = sort $groupNames }}

        <div class="lib-filter">
          <input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
          <div class="lib-pills">
            <button class="lib-pill active" data-group="">Alle</button>
            {{ range $groupNames }}<button class="lib-pill" data-group="{{ . }}">{{ . }}</button>{{ end }}
          </div>
        </div>

        <section class="atlas atlas--grid2">
          {{ range $groupNames }}
            {{ $ps := index $groups . }}
            <article class="atlas-section" data-group="{{ . }}">
              <h2>{{ . }}</h2>
              <ul class="atlas-list">
                {{ range sort $ps "Title" }}
                  {{ $norm := lower .Title }}
                  {{ $norm = replace $norm "ä" "a" }}
                  {{ $norm = replace $norm "ö" "o" }}
                  {{ $norm = replace $norm "ü" "u" }}
                  {{ $norm = replace $norm "ß" "ss" }}
                  <li data-title="{{ $norm }}">
                    <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
                    {{ with .Params.summary }}<span class="list-meta text-muted"> — {{ . }}</span>{{ end }}
                  </li>
                {{ end }}
              </ul>
            </article>
          {{ end }}
        </section>

        <script>
        (function(){
          var input = document.getElementById('lib-search');
          var pills = document.querySelectorAll('.lib-pill');
          var activeGroup = '';

          function filter() {
            var q = input.value.trim().toLowerCase()
              .replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'ss');
            document.querySelectorAll('.atlas-section').forEach(function(sec) {
              var groupMatch = !activeGroup || sec.dataset.group === activeGroup;
              if (!groupMatch) { sec.style.display = 'none'; return; }
              var visible = 0;
              sec.querySelectorAll('li[data-title]').forEach(function(li) {
                var matchQ = !q || li.dataset.title.indexOf(q) !== -1;
                li.style.display = matchQ ? '' : 'none';
                if (matchQ) visible++;
              });
              sec.style.display = visible ? '' : 'none';
            });
          }

          input.addEventListener('input', filter);
          pills.forEach(function(btn) {
            btn.addEventListener('click', function() {
              pills.forEach(function(b){ b.classList.remove('active'); });
              this.classList.add('active');
              activeGroup = this.dataset.group || '';
              filter();
            });
          });
        })();
        </script>
      {{ else }}
        <p class="text-muted"><em>Noch keine Einträge — der erste entsteht im Redaktions-Editor.</em></p>
      {{ end }}
    </div>
  </div>
{{ end }}