---
layout: compress
# Default layout
---

<!doctype html>

{% include origin-type.html %}

{% include lang.html %}

{% capture prefer_mode %}
  {% if site.theme_mode %}
    data-mode="{{ site.theme_mode }}"
  {% endif %}
{% endcapture %}

<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
  {% include head.html %}

  <body>
    {% include sidebar.html lang=lang %}

    <div id="main-wrapper" class="d-flex justify-content-center">
      <div id="main" class="container px-xxl-5">
        {% include topbar.html lang=lang %}
        {{ content }}
        {% include_cached search-results.html lang=lang %}
      </div>
    </div>

    {% include_cached footer.html lang=lang %}

    <div id="mask"></div>

    <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
      <i class="fas fa-angle-up"></i>
    </button>

    {% if site.pwa.enabled %}
      <div
        id="notification"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-bs-animation="true"
        data-bs-autohide="false"
      >
        <div class="toast-header">
          <button
            type="button"
            class="btn-close ms-auto"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body text-center pt-0">
          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
          <button type="button" class="btn btn-primary" aria-label="Update">
            {{ site.data.locales[lang].notification.update }}
          </button>
        </div>
      </div>
    {% endif %}

    {% include js-selector.html %}

    {% if page.mermaid %}
      {% include mermaid.html %}
    {% endif %}

    {% include_cached search-loader.html %}
  </body>
</html>
