{{ define "content" }}
<div class="docs-shell">
  <button class="docs-sidebar-toggle" id="docs-sidebar-toggle" aria-label="{{ i18n "toggle_docs_nav" }}" aria-expanded="false">
    <span class="docs-sidebar-toggle-icon">
      <span></span><span></span><span></span>
    </span>
    <span>{{ i18n "mobile_nav" }}</span>
  </button>

  {{ partial "docs-sidebar.html" . }}

  <div class="docs-main-area">
    <div class="container docs-container" style="padding-inline:0">
      <article>
        <header class="docs-header">
          <nav class="docs-breadcrumb" aria-label="面包屑导航">
            <a href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
            <span>/</span>
            <a href="{{ "/docs/" | relURL }}">{{ .CurrentSection.Title }}</a>
            <span>/</span>
            <span class="docs-breadcrumb-current">{{ .Title }}</span>
          </nav>
        </header>

        <div class="docs-layout-body">
          <div class="docs-content">
            <div class="docs-page-head">
              <div class="eyebrow" style="font-size:12px;font-weight:600;color:var(--blue);display:inline-flex;padding:3px 10px;background:var(--blue-soft);border-radius:20px">{{ .CurrentSection.Title }}</div>
              <h1>{{ .Title }}</h1>
              {{ with .Description }}<p class="docs-lead">{{ . }}</p>{{ end }}
            </div>

            <div class="docs-prose">
              {{ .Content }}
            </div>
          </div>

          {{ partial "toc.html" . }}
        </div>

        {{ with .File }}
        <div class="docs-edit-link">
          <a href="{{ $.Site.Params.github }}/blob/main/website/content/{{ .Path }}" target="_blank" rel="noopener noreferrer">
            {{ i18n "edit_on_github" }}
          </a>
        </div>
        {{ end }}

        <nav class="docs-page-nav" aria-label="页面导航">
          {{ with .PrevInSection }}
          <a class="docs-page-nav-link" href="{{ .RelPermalink }}">
            <span class="docs-page-nav-label">{{ i18n "previous_page" }}</span>
            <span class="docs-page-nav-title">{{ .Title }}</span>
          </a>
          {{ end }}
          {{ with .NextInSection }}
          <a class="docs-page-nav-link" href="{{ .RelPermalink }}">
            <span class="docs-page-nav-label">{{ i18n "next_page" }}</span>
            <span class="docs-page-nav-title">{{ .Title }}</span>
          </a>
          {{ end }}
        </nav>
      </article>
    </div>
  </div>
</div>

<script>
(function() {
  var toggle = document.getElementById('docs-sidebar-toggle');
  var sidebar = document.getElementById('docs-sidebar');
  if (toggle && sidebar) {
    toggle.addEventListener('click', function() {
      var expanded = this.getAttribute('aria-expanded') === 'true';
      this.setAttribute('aria-expanded', !expanded);
      sidebar.classList.toggle('open');
    });
  }
})();
</script>
{{ end }}