{% extends 'base.html' %}
{% block title %}{{ wiki['copy'].hero_title }} | Filament Manager{% endblock %}
{% block body_class %}page-wiki{% endblock %}
{% block head_extra %}
<link rel="preload" as="style" href="{{ url_for('static', filename='css/wiki.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/wiki.min.css') }}">
<link rel="modulepreload" href="{{ url_for('static', filename='js/wiki.js') }}">
{% endblock %}
{% block page_title %}{{ wiki['copy'].hero_title }}{% endblock %}
{% block page_subtitle %}{{ wiki['copy'].hero_lead }}{% endblock %}
{% block page_toolbar %}
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:book-open-page-variant-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_wiki }}
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">{{ wiki['copy'].toolbar_sections }}</div>
    <div class="row-action-menu-note muted tiny">{{ wiki['copy'].toolbar_sections_note }}</div>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang=wiki.current_language, scope='all') }}"><iconify-icon icon="mdi:view-dashboard-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].scope_all_nav }}</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang=wiki.current_language, scope='app') }}"><iconify-icon icon="mdi:view-dashboard-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].scope_app_nav }}</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang=wiki.current_language, scope='api') }}#api-bereich"><iconify-icon icon="mdi:file-code-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].scope_api_nav }}</a>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:alpha-p-box-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_language }}
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">{{ wiki['copy'].toolbar_language }}</div>
    <div class="row-action-menu-note muted tiny">{{ wiki['copy'].toolbar_language_note }}</div>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang='de', scope=wiki.current_scope) }}"><iconify-icon icon="mdi:alpha-p-box-outline" aria-hidden="true"></iconify-icon> Deutsch</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang='en', scope=wiki.current_scope) }}"><iconify-icon icon="mdi:alpha-p-box-outline" aria-hidden="true"></iconify-icon> English</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.wiki', lang='fr', scope=wiki.current_scope) }}"><iconify-icon icon="mdi:alpha-p-box-outline" aria-hidden="true"></iconify-icon> Francais</a>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:vector-link" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_links }}
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">{{ wiki['copy'].toolbar_links }}</div>
    <div class="row-action-menu-note muted tiny">{{ wiki['copy'].toolbar_links_note }}</div>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.roadmap') }}"><iconify-icon icon="mdi:history" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_roadmap }}</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.settings') }}"><iconify-icon icon="mdi:cog-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_settings }}</a>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-global-bug-tracker><iconify-icon icon="mdi:bug-outline" aria-hidden="true"></iconify-icon> {{ wiki['copy'].toolbar_feedback }}</button>
  </div>
</details>
{% endblock %}
{% block content %}
<section
  class="wiki-page"
  data-wiki-root
  data-current-language="{{ wiki.current_language }}"
  data-current-scope="{{ wiki.current_scope }}"
>
  <header class="sci-panel wiki-hero">
    <div class="wiki-hero-copy">
      <span class="wiki-eyebrow">{{ wiki['copy'].hero_title }}</span>
      <h2 class="wiki-hero-title">{{ wiki['copy'].hero_title }}</h2>
      <p class="wiki-hero-lead">{{ wiki['copy'].hero_lead }}</p>
      <div class="wiki-hero-note">{{ wiki['copy'].hero_note }}</div>
    </div>
    <div class="wiki-hero-side">
      <div class="wiki-hero-search">
        <label class="wiki-control-label" for="wiki-search-input">{{ wiki['copy'].search_placeholder }}</label>
        <input
          id="wiki-search-input"
          class="sci-input wiki-search-input"
          type="search"
          placeholder="{{ wiki['copy'].search_placeholder }}"
          data-wiki-search
          autocomplete="off"
        >
        <div class="wiki-search-status" data-wiki-search-status>{{ wiki['copy'].search_status }}</div>
      </div>
      <div class="wiki-switcher-row">
        <div class="wiki-switcher-group" role="tablist" aria-label="{{ wiki['copy'].aria_language }}">
          {% for item in wiki.languages %}
          <button
            type="button"
            class="wiki-chip-btn{% if item.code == wiki.current_language %} is-active{% endif %}"
            data-wiki-language="{{ item.code }}"
            aria-pressed="{{ 'true' if item.code == wiki.current_language else 'false' }}"
          >{{ item.label }}</button>
          {% endfor %}
        </div>
        <div class="wiki-switcher-group" role="tablist" aria-label="{{ wiki['copy'].aria_scope }}">
          <button type="button" class="wiki-chip-btn{% if wiki.current_scope == 'all' %} is-active{% endif %}" data-wiki-scope="all">{{ wiki['copy'].scope_all }}</button>
          <button type="button" class="wiki-chip-btn{% if wiki.current_scope == 'app' %} is-active{% endif %}" data-wiki-scope="app">{{ wiki['copy'].scope_app }}</button>
          <button type="button" class="wiki-chip-btn{% if wiki.current_scope == 'api' %} is-active{% endif %}" data-wiki-scope="api">{{ wiki['copy'].scope_api }}</button>
        </div>
      </div>
        <div class="wiki-stat-grid">
          <div class="wiki-stat-card">
            <span>{{ wiki['copy'].stats_guides }}</span>
            <strong>{{ wiki.stats.app_count }}</strong>
          </div>
          <div class="wiki-stat-card">
            <span>{{ wiki['copy'].stats_api }}</span>
            <strong>{{ wiki.stats.api_count }}</strong>
          </div>
          <div class="wiki-stat-card">
            <span>{{ wiki['copy'].stats_sources }}</span>
            <strong>{{ wiki.stats.source_count }}</strong>
          </div>
      </div>
    </div>
  </header>

  <div class="wiki-layout">
    <aside class="sci-panel wiki-sidebar">
      <div class="wiki-sidebar-block">
        <div class="wiki-sidebar-title">{{ wiki['copy'].chapter_nav }}</div>
        <nav class="wiki-sidebar-nav">
          {% for article in wiki.articles %}
          <a
            href="#{{ article.slug }}"
            class="wiki-sidebar-link"
            data-wiki-nav-link="{{ article.slug }}"
            data-wiki-nav-scope="app"
          >
            <span class="wiki-sidebar-index">{{ '%02d'|format(article.order) }}</span>
            <span class="wiki-sidebar-label">
              <strong>{{ article.title }}</strong>
              <small>{{ article.group }}</small>
            </span>
          </a>
          {% endfor %}
          <a href="#api-bereich" class="wiki-sidebar-link" data-wiki-nav-link="api-bereich" data-wiki-nav-scope="api">
            <span class="wiki-sidebar-index">API</span>
            <span class="wiki-sidebar-label">
              <strong>{{ wiki['copy'].api_title }}</strong>
              <small>{{ wiki['copy'].api_chapter_count|replace('{count}', wiki.stats.api_count|string) }}</small>
            </span>
          </a>
        </nav>
      </div>
      <div class="wiki-sidebar-block wiki-sidebar-richtext">
        {{ wiki.hero.app_intro_html|safe }}
      </div>
      <div class="wiki-sidebar-block wiki-sidebar-callout">
        <strong>{{ wiki['copy'].api_title }}</strong>
        <p>{{ wiki['copy'].api_lead }}</p>
        <a class="sci-btn subtle small" href="#api-bereich">{{ wiki['copy'].api_jump }}</a>
      </div>
    </aside>

    <div class="wiki-main">
      {% for article in wiki.articles %}
      <article
        id="{{ article.slug }}"
        class="sci-panel wiki-article"
        data-wiki-searchable
        data-wiki-scope="app"
        data-search="{{ article.search_blob }}"
      >
        {% if article.legacy_anchor %}
        <span id="{{ article.legacy_anchor }}" class="wiki-anchor-alias" aria-hidden="true"></span>
        {% endif %}
        <header class="wiki-article-head">
          <div class="wiki-marker">
            <span class="wiki-marker-number">{{ '%02d'|format(article.order) }}</span>
          </div>
          <div class="wiki-article-copy">
            <div class="wiki-article-meta">
              <span class="wiki-meta-pill">
                <iconify-icon icon="{{ article.icon }}" aria-hidden="true"></iconify-icon>
                {{ article.group }}
              </span>
              <span class="wiki-meta-pill">{{ wiki['copy'].route_label }} {{ article.route }}</span>
              <span class="wiki-meta-pill">{{ wiki['copy'].read_time }} {{ article.read_minutes }} min</span>
            </div>
            <h3 class="wiki-article-title">{{ article.title }}</h3>
            <p class="wiki-article-lead">{{ article.lead }}</p>
            {% if article.translation_notice %}
            <div class="wiki-translation-note">{{ article.translation_notice }}</div>
            {% endif %}
          </div>
        </header>

        <div class="wiki-article-layout">
          <div class="wiki-prose">{{ article.html|safe }}</div>

          <aside class="wiki-article-side">
            <section class="wiki-side-card">
              <div class="wiki-side-title">{{ wiki['copy'].chapter_toc }}</div>
              <nav class="wiki-side-nav">
                {% for heading in article.headings %}
                <a href="#{{ heading.id }}" class="wiki-side-link wiki-side-level-{{ heading.level }}">{{ heading.title }}</a>
                {% endfor %}
              </nav>
            </section>

            <section class="wiki-side-card">
              <div class="wiki-side-title">{{ wiki['copy'].gallery_title }}</div>
              <div class="wiki-gallery-grid">
                {% for image in article.images %}
                <button
                  type="button"
                  class="wiki-gallery-card"
                  data-wiki-image-trigger
                  data-image-src="{{ image.url }}"
                  data-image-caption="{{ image.caption }}"
                  data-image-alt="{{ image.alt }}"
                  title="{{ wiki['copy'].open_lightbox }}"
                >
                  <img src="{{ image.thumb_url }}" alt="{{ image.alt }}" loading="lazy">
                  <span class="wiki-gallery-caption">{{ image.caption }}</span>
                </button>
                {% endfor %}
              </div>
            </section>

            <section class="wiki-side-card">
              <div class="wiki-side-title">{{ wiki['copy'].source_label }}</div>
              <div class="wiki-source-chip">{{ wiki['copy'].article_source }}: {{ article.source_file }}</div>
            </section>
          </aside>
        </div>
      </article>
      {% endfor %}

      <section
        id="api-bereich"
        class="sci-panel wiki-api-shell"
        data-wiki-searchable
        data-wiki-scope="api"
        data-search="{% for section in wiki.api_sections %}{{ section.search_blob }} {% endfor %}"
      >
        <header class="wiki-api-head">
          <div>
            <span class="wiki-eyebrow">{{ wiki['copy'].api_title }}</span>
            <h3 class="wiki-api-title">{{ wiki['copy'].api_title }}</h3>
            <p class="wiki-api-lead">{{ wiki['copy'].api_lead }}</p>
          </div>
          <div class="wiki-api-intro wiki-sidebar-richtext">{{ wiki.hero.api_intro_html|safe }}</div>
        </header>
        <div class="wiki-api-grid">
          {% for section in wiki.api_sections %}
          <article class="wiki-api-card" data-wiki-searchable data-wiki-scope="api" data-search="{{ section.search_blob }}">
            <header class="wiki-api-card-head">
              <span class="wiki-meta-pill">
                <iconify-icon icon="{{ section.icon }}" aria-hidden="true"></iconify-icon>
                API
              </span>
              <h4>{{ section.title }}</h4>
              <p>{{ section.lead }}</p>
            </header>
            {% if section.translation_notice %}
            <div class="wiki-translation-note">{{ section.translation_notice }}</div>
            {% endif %}
            <div class="wiki-api-card-body">{{ section.html|safe }}</div>
            <footer class="wiki-api-card-foot">{{ wiki['copy'].article_source }}: {{ section.source_file }}</footer>
          </article>
          {% endfor %}
        </div>
      </section>

      <section class="wiki-empty-state sci-panel is-hidden" data-wiki-empty-state>
        <h3>{{ wiki['copy'].search_empty }}</h3>
        <p>{{ wiki['copy'].empty_help }}</p>
      </section>
    </div>
  </div>

  <div class="wiki-lightbox is-hidden" data-wiki-lightbox>
    <button type="button" class="wiki-lightbox-backdrop" data-wiki-lightbox-close aria-label="{{ wiki['copy'].lightbox_close }}"></button>
    <div class="wiki-lightbox-dialog" role="dialog" aria-modal="true" aria-label="{{ wiki['copy'].open_lightbox }}">
      <button type="button" class="wiki-lightbox-close" data-wiki-lightbox-close aria-label="{{ wiki['copy'].lightbox_close }}">×</button>
      <img src="" alt="" data-wiki-lightbox-image>
      <div class="wiki-lightbox-caption" data-wiki-lightbox-caption></div>
    </div>
  </div>
</section>
{% endblock %}
{% block data_blocks %}
<script id="wiki-bootstrap-json" type="application/json">{{ {'copy': wiki['copy'], 'current_language': wiki.current_language, 'current_scope': wiki.current_scope}|tojson }}</script>
{% endblock %}