{% extends "base.html" %}
{# 文档中心：只承载安装完成后的实操指南和参考内容。 #}

{% block styles %}
  <link rel="stylesheet" href="/static/css/documentation.css?v=20260720-docs3">
  <link rel="stylesheet" href="/static/css/documentation-guides.css?v=20260720-guides1">
{% endblock %}

{% block scripts %}
  <script src="/static/js/documentation-search.js?v=20260720-docs" defer></script>
{% endblock %}

{% block main %}
<main id="main-content" class="documentation-main">
  <div class="container docs-workspace">
    <aside class="docs-sidebar" aria-label="{{ documentation.index_label }}">
      <div class="docs-index" data-doc-index>
        <div class="docs-index-head">
          <strong>{{ documentation.index_label }}</strong>
          <output data-doc-result aria-live="polite"></output>
        </div>
        <label class="docs-search-label">
          <span>{{ documentation.search_label }}</span>
          <input type="search" placeholder="{{ documentation.search_placeholder }}" autocomplete="off" data-doc-search>
        </label>
        <p class="docs-search-help">{{ documentation.search_help }}</p>
        <nav class="docs-tree" aria-label="{{ documentation.index_label }}">
          {% for group in documentation.groups %}
          <section class="docs-tree-group" data-doc-group>
            <h2>{{ group.title }}</h2>
            {% for link in group.links %}
            <a href="#{{ link.anchor }}" data-doc-link data-doc-title="{{ link.title }}"><span>{{ link.code }}</span>{{ link.title }}</a>
            {% endfor %}
          </section>
          {% endfor %}
        </nav>
        <p class="docs-search-empty" data-doc-empty hidden>{{ documentation.search_empty }}</p>
      </div>
    </aside>

    <article class="docs-article">
      <details class="docs-mobile-index">
        <summary>{{ documentation.mobile_index_label }}</summary>
        <div class="docs-index" data-doc-index>
          <div class="docs-index-head">
            <strong>{{ documentation.index_label }}</strong>
            <output data-doc-result aria-live="polite"></output>
          </div>
          <label class="docs-search-label">
            <span>{{ documentation.search_label }}</span>
            <input type="search" placeholder="{{ documentation.search_placeholder }}" autocomplete="off" data-doc-search>
          </label>
          <p class="docs-search-help">{{ documentation.search_help }}</p>
          <nav class="docs-tree" aria-label="{{ documentation.index_label }}">
            {% for group in documentation.groups %}
            <section class="docs-tree-group" data-doc-group>
              <h2>{{ group.title }}</h2>
              {% for link in group.links %}
              <a href="#{{ link.anchor }}" data-doc-link data-doc-title="{{ link.title }}"><span>{{ link.code }}</span>{{ link.title }}</a>
              {% endfor %}
            </section>
            {% endfor %}
          </nav>
          <p class="docs-search-empty" data-doc-empty hidden>{{ documentation.search_empty }}</p>
        </div>
      </details>

      <header class="docs-page-header" aria-labelledby="docs-title">
        <p class="eyebrow">{{ view.page.eyebrow }}</p>
        <h1 id="docs-title">{{ view.page.heading }}</h1>
        <p class="docs-page-lead">{{ view.page.lead }}</p>
        <div class="action-row">
          {% for action in view.page.actions %}
          <a class="{{ action.class_name }}" href="{{ action.href }}">{{ action.label }}</a>
          {% endfor %}
        </div>
      </header>

      <section class="docs-safety docs-safety-inline" aria-labelledby="docs-safety-title">
        <div class="docs-safety-grid">
          <p>{{ documentation.status.label }}</p>
          <div>
            <h2 id="docs-safety-title">{{ documentation.status.title }}</h2>
            <p>{{ documentation.status.body }}</p>
          </div>
        </div>
      </section>

      {% for section in documentation.sections %}
      <section class="docs-section" id="{{ section.anchor }}" aria-labelledby="docs-section-{{ section.anchor }}">
        <header class="docs-section-heading">
          <p>{{ section.code }}</p>
          <h2 id="docs-section-{{ section.anchor }}">{{ section.title }}</h2>
          <p>{{ section.lead }}</p>
        </header>
        <div class="docs-step-list">
          {% for item in section.items %}
          <article class="docs-step{% if item.caution %} docs-step-caution{% endif %}">
            <span>{{ item.badge }}</span>
            <div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.body }}</p>
              {% if item.has_command %}<pre><code>{{ item.command }}</code></pre>{% endif %}
            </div>
          </article>
          {% endfor %}
        </div>
      </section>

      {% if loop.index == 1 %}
      <header class="docs-guides-header">
        <p>02–07 / TASK GUIDES</p>
        <h2>{{ documentation.tutorials.index_label }}</h2>
      </header>
      {% for tutorial in documentation.tutorials.items %}
      <section class="docs-section docs-guide" id="{{ tutorial.anchor }}" aria-labelledby="guide-{{ tutorial.anchor }}">
        <header class="docs-guide-heading">
          <span>{{ tutorial.sequence }}</span>
          <div>
            <h2 id="guide-{{ tutorial.anchor }}">{{ tutorial.title }}</h2>
            <p>{{ tutorial.summary }}</p>
          </div>
        </header>
        <div class="docs-guide-body">
          <aside class="docs-guide-prerequisites">
            <h3>{{ documentation.tutorials.prerequisites_label }}</h3>
            <ul>
              {% for prerequisite in tutorial.prerequisites %}
              <li>{{ prerequisite }}</li>
              {% endfor %}
            </ul>
          </aside>
          <section class="docs-guide-procedure" aria-labelledby="steps-{{ tutorial.anchor }}">
            <h3 id="steps-{{ tutorial.anchor }}">{{ documentation.tutorials.steps_label }}</h3>
            <ol>
              {% for step in tutorial.steps %}
              <li class="docs-guide-step"><span>{{ step.label }}</span><div><h4>{{ step.title }}</h4><p>{{ step.instruction }}</p></div></li>
              {% endfor %}
            </ol>
          </section>
        </div>
        <footer class="docs-guide-outcome">
          <section><h3>{{ documentation.tutorials.verification_label }}</h3><p>{{ tutorial.verification }}</p></section>
          <section><h3>{{ documentation.tutorials.agent_boundary_label }}</h3><p>{{ tutorial.agent_boundary }}</p></section>
        </footer>
      </section>
      {% if loop.index == 3 %}
      <section class="docs-section docs-product-view" aria-labelledby="docs-product-title">
        <header class="docs-section-heading">
          <p>{{ documentation.screenshot.code }}</p>
          <h2 id="docs-product-title">{{ documentation.screenshot.title }}</h2>
          <p>{{ documentation.screenshot.lead }}</p>
        </header>
        <figure>
          <img src="{{ documentation.screenshot.src }}" alt="{{ documentation.screenshot.alt }}" width="{{ documentation.screenshot.width }}" height="{{ documentation.screenshot.height }}" loading="lazy" decoding="async">
          <figcaption>{{ documentation.screenshot.caption }}</figcaption>
        </figure>
      </section>
      {% endif %}
      {% endfor %}
      {% endif %}
      {% endfor %}

      <section class="docs-final" aria-labelledby="docs-final-title">
        <p>{{ documentation.final_code }}</p>
        <h2 id="docs-final-title">{{ documentation.final_title }}</h2>
        <p>{{ documentation.final_body }}</p>
        <div class="action-row">
          {% for action in view.page.actions %}
          <a class="{{ action.class_name }}" href="{{ action.href }}">{{ action.label }}</a>
          {% endfor %}
        </div>
      </section>
    </article>
  </div>
</main>
{% endblock %}