{% extends "base.html" %}
{% block title %}{{ topic.title if topic else 'Hilfe' }}{% endblock %}
{% macro help_content() %}
<div class="hugin-help">
  <nav class="hugin-help-nav stack stack-sm" aria-label="Themen der Hilfe">
    <form action="{{ url_for('help') }}" method="get">
      <input type="search" name="q" value="{{ q }}" placeholder="Hilfe durchsuchen" aria-label="Hilfe durchsuchen">
    </form>
    {% for group, topics in groups %}
    <div class="stack stack-sm">
      <p class="text-xs text-muted hugin-help-gruppe">{{ group }}</p>
      {% for t in topics %}
      <a href="{{ url_for('help_topic', topic=t.slug) }}" {% if topic and topic.slug == t.slug %}class="active" aria-current="page"{% endif %}>{{ t.title }}</a>
      {% endfor %}
    </div>
    {% endfor %}
  </nav>
  <article class="hugin-help-text min-w-0">
    {% if q %}
      <h1>Suche: {{ q }}</h1>
      {% if matches %}
      <div class="action-list">
        {% for t in matches %}
        <a class="action-item" href="{{ url_for('help_topic', topic=t.topic.slug) }}">
          <div class="action-item-content">
            <p class="action-item-title">{{ t.topic.title }}</p>
            <p class="action-item-desc">{{ t.excerpt }}</p>
          </div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty"><p class="empty-title">Nichts gefunden</p><p class="empty-description">Anderes Wort versuchen, z. B. „sync“, „Key“ oder „Freigabe“.</p></div>
      {% endif %}
    {% else %}
      {{ content | safe }}
    {% endif %}
  </article>
</div>
{% endmacro %}
{% block content %}{{ help_content() }}{% endblock %}
{% block einzeln %}
<p><a href="{{ url_for('login') }}">Anmelden</a> · Hugin-Hilfe</p>
{{ help_content() }}
{% endblock %}