{% extends "base.html" %}
{% block title %}{{ page.page.title ~ ' · ' if page else '' }}Hilfe{% endblock %}
{% block content %}
<div class="aiw-help">
  <aside class="aiw-help-nav stack stack-sm" aria-label="Hilfe">
    <form method="get" action="/hilfe" role="search" class="aiw-help-search">
      <input type="search" name="q" value="{{ q }}" placeholder="Hilfe durchsuchen …" aria-label="Hilfe durchsuchen" maxlength="200">
    </form>
    <nav>
      <ul class="aiw-help-pages">
        {% for pg in pages %}
        <li><a href="/hilfe/{{ pg.slug }}" {% if page and page.page.slug == pg.slug %}aria-current="page" class="active"{% endif %}>{{ pg.title }}</a>
          {% if page and page.page.slug == pg.slug and page.toc %}
          <ul class="aiw-help-toc">
            {% for h in page.toc if h.level == 2 %}<li><a href="#{{ h.anchor }}">{{ h.text }}</a></li>{% endfor %}
          </ul>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </nav>
  </aside>

  <div class="aiw-help-main stack stack-lg">
    {% if page %}
    <article class="aiw-markdown aiw-help-text">{{ page.html }}</article>
    {% set i = pages|map(attribute='slug')|list %}{% set n = i.index(page.page.slug) %}
    <nav class="cluster aiw-help-pager" aria-label="Weiter">
      {% if n > 0 %}<a class="btn btn-ghost btn-sm" href="/hilfe/{{ pages[n - 1].slug }}">← {{ pages[n - 1].title }}</a>{% endif %}
      {% if n < pages|length - 1 %}<a class="btn btn-ghost btn-sm aiw-help-next" href="/hilfe/{{ pages[n + 1].slug }}">{{ pages[n + 1].title }} →</a>{% endif %}
    </nav>
    {% elif hits is not none %}
    <h1>Suche: {{ q }}</h1>
    {% if hits %}
    <ul class="aiw-help-hits stack">
      {% for h in hits %}
      <li><a href="/hilfe/{{ h.page.slug }}{{ '#' ~ h.heading.anchor if h.heading.anchor }}"><strong>{{ h.heading.text }}</strong></a>
        <span class="text-xs text-muted">· {{ h.page.title }}</span>
        <p class="text-sm text-muted">{{ h.snippet }}</p></li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-muted">Keine Treffer. Andere Begriffe versuchen oder unter <a href="/hilfe/begriffe">Begriffe</a> nachsehen.</p>
    {% endif %}
    {% else %}
    <div class="stack stack-sm">
      <h1>Hilfe</h1>
      <p class="text-muted">Anleitungen für jede Rolle, Begriffe und häufige Fragen. Der Knopf <em>Hilfe</em> oben führt jeweils zur passenden Stelle für die Seite, auf der du gerade bist.</p>
    </div>
    <div class="aiw-help-cards">
      {% for pg in pages %}
      <a class="card aiw-help-card {{ 'aiw-help-mine' if pg.slug in mine }}" href="/hilfe/{{ pg.slug }}">
        <div class="card-body stack stack-sm">
          <div class="cluster"><strong>{{ pg.title }}</strong>{% if pg.slug in mine %}<span class="badge badge-info">für dich</span>{% endif %}</div>
          <p class="text-sm text-muted">{{ pg.summary }}</p>
          <p class="text-xs text-muted">{{ pg.audience }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}