{% extends "layout/basic.html" %}
{% import "components/ui/v1.html" as ui_v1 %}
{% block content %}
<main class="bp-guide-page ui-page ui-page--padded ui-page--compact-type ui-stack ui-stack--lg">
  {% call ui_v1.page_header('使用指南') %}
    <a class="button rounded" href="{{ url('wiki_help') }}">评测与规则帮助</a>
  {% endcall %}
  <section class="ui-panel ui-print-hidden" aria-label="搜索使用指南">
    <div class="ui-panel__body">
      <form class="ui-toolbar bp-guide-page__search" action="{{ resetUrl }}" method="get" role="search">
        <label class="ui-field">
          <span class="ui-field__label">搜索指南</span>
          <input class="textbox ui-field__control bp-guide-page__control" type="search" name="q" maxlength="100" value="{{ filters.q }}" placeholder="例如：VP、保存草稿、导出成绩" aria-describedby="bp-guide-search-help">
        </label>
        <label class="ui-field">
          <span class="ui-field__label">功能分类</span>
          <select class="select ui-field__control bp-guide-page__control" name="category">
            <option value="">全部功能</option>
            {% for item in categories %}<option value="{{ item.id }}"{% if filters.category == item.id %} selected{% endif %}>{{ item.title }}</option>{% endfor %}
          </select>
        </label>
        <label class="ui-field">
          <span class="ui-field__label">使用场景</span>
          <select class="select ui-field__control bp-guide-page__control" name="audience">
            <option value="">所有使用场景</option>
            {% for item in audiences %}<option value="{{ item.id }}"{% if filters.audience == item.id %} selected{% endif %}>{{ item.title }}</option>{% endfor %}
          </select>
        </label>
        <button type="submit" class="button primary rounded bp-guide-page__control">查找</button>
      </form>
      <p id="bp-guide-search-help" class="ui-muted bp-guide-page__meta">搜索覆盖标题与正文；多个关键词用空格分开。场景筛选只帮助查阅，功能权限以当前域为准。</p>
    </div>
  </section>
  {% include "bp_guide_mobile_directory.html" %}
  <div class="ui-split bp-guide-page__layout">
    <div class="ui-stack ui-stack--lg bp-guide-page__body">
      {% if filters.q or filters.category or filters.audience %}
      <div class="ui-cluster ui-cluster--between">
        <a class="button rounded ui-print-hidden" href="{{ resetUrl }}">清除筛选</a>
      </div>
      {% endif %}
      {% if not resultCount %}
        {% call ui_v1.empty_state('没有找到匹配的指南', '试试更短的关键词，如“比赛”“草稿”“成绩”，或清除分类和场景限制。') %}
          <a class="button rounded" href="{{ resetUrl }}">查看全部指南</a>
        {% endcall %}
      {% endif %}
      {% for group in groups %}{% if group.articles.length %}
      <section class="ui-panel ui-panel--continuous" aria-labelledby="bp-guide-category-{{ group.id }}">
        <header class="ui-panel__header">
          <h2 id="bp-guide-category-{{ group.id }}" class="ui-panel__title">{{ group.title }}</h2>
        </header>
        <div class="ui-panel__body">
          <ul class="ui-item-list ui-list-reset">
            {% for item in group.articles %}
            <li class="ui-item-list__item">
              <div class="ui-item-list__content">
                <h3 class="ui-item-list__title"><a href="{{ item.href }}">{{ item.title }}</a></h3>
                <p class="ui-meta">{{ item.audienceLabels | join(' · ') }}</p>
              </div>
            </li>
            {% endfor %}
          </ul>
        </div>
      </section>
      {% endif %}{% endfor %}
    </div>
    <aside class="ui-sidebar ui-print-hidden bp-guide-page__sidebar">
      {% include "bp_guide_sidebar.html" %}
    </aside>
  </div>
</main>
{% endblock %}