---
layout: base
---

<div class="sl-l-medium-holy-grail">
  <div class="sl-l-medium-holy-grail__body">
    {% render 'navigation', contents: navigation %}

    <div class="sl-l-medium-holy-grail__main">
      <div class="sl-l-large-holy-grail">
        <div class="sl-l-large-holy-grail__body">
          {% if complementary_content or table_of_contents %}
            <div class="sl-l-large-holy-grail__complementary{% if table_of_contents %} sl-l-large-holy-grail__complementary--contents{% endif %}">
              {% if complementary_content %}
                {{ complementary_content | markdown }}
              {% elsif table_of_contents %}
                {% assign top_level_toc = documentation.toc | size %}
                {% assign toc = content | getToc: top_level_toc %}
                {% if toc | size %}
                  <nav aria-labelledby="page-sections" class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible">
                    <h3 id="page-sections">Page Sections</h3>
                    {% render 'documentation_toc', url: '', toc: toc %}
                  </nav>
                {% endif %}
              {% endif %}
            </div>
          {% endif %}

          <div class="sl-l-large-holy-grail__main docSearch-content">
            {% assign is_typedoc = page | isTypedoc %}
            <div {% unless no_container or is_typedoc %}class="sl-l-container sl-l-container--small"{% endunless %}>
              {% render 'intro', before_introduction: before_introduction, introduction: introduction, center_introduction: center_introduction %}

              {{ content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>