{% 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">
  <nav class="ui-cluster" aria-label="使用指南路径">
    <a class="button rounded" href="{{ indexUrl }}">返回指南列表</a>
    <span class="ui-muted">{{ category.title }}</span>
  </nav>
  {% include "bp_guide_mobile_directory.html" %}
  <div class="ui-split bp-guide-page__layout">
    <article class="ui-stack ui-stack--lg bp-guide-page__body">
      {{ ui_v1.page_header(article.title) }}
      <p class="ui-meta">适用场景：{{ audienceLabels | join(' · ') }}</p>
      <section class="ui-panel ui-print-hidden">
        <div class="ui-panel__body ui-stack ui-stack--sm">
          {% if entryUrl %}<div><a class="button primary rounded" href="{{ entryUrl }}">{{ article.entry.label }}</a></div>
          {% else %}{{ ui_v1.alert('当前站点未启用相关入口', '仍可阅读这篇指南；使用功能前请联系管理员确认模块是否已启用。') }}{% endif %}
          <p class="ui-muted">指南说明通用操作。当前域的权限、报名状态、时间限制及教师设置决定你能使用的选项。</p>
          <nav aria-label="本页目录">
            <ul class="ui-cluster ui-list-reset">
              {% for item in sections %}<li><a class="ui-nav-list__link" href="#{{ item.id }}">{{ item.title }}</a></li>{% endfor %}
            </ul>
          </nav>
        </div>
      </section>
      <div class="ui-panel ui-panel--continuous">
        <div class="ui-panel__body ui-stack ui-stack--lg bp-guide-page__article">
          {% for item in sections %}
          <section class="bp-guide-page__section" id="{{ item.id }}" aria-labelledby="{{ item.id }}-title">
            <h2 class="bp-guide-page__section-title" id="{{ item.id }}-title">{{ item.title }}</h2>
            <div class="typo richmedia ui-prose">{{ item.content | markdown | safe }}</div>
          </section>
          {% endfor %}
        </div>
      </div>
      {% if related.length %}
      {% call ui_v1.panel('接下来可以阅读') %}
        <nav aria-label="相关指南"><ul class="ui-nav-list">
          {% for item in related %}<li class="ui-nav-list__item"><a class="ui-nav-list__link" href="{{ item.href }}">{{ item.title }}</a></li>{% endfor %}
        </ul></nav>
      {% endcall %}
      {% endif %}
    </article>
    <aside class="ui-sidebar ui-print-hidden bp-guide-page__sidebar">{% include "bp_guide_sidebar.html" %}</aside>
  </div>
</main>
{% endblock %}