<!DOCTYPE html>
<html data-dark-mode="{{ darkMode }}" data-code-theme="{{ codeTheme }}">
<head>
    <script src="{{ asset.themeManagerJs }}"></script>
    {%- if asset.headTop %}
    {%- for headContent in asset.headTop %}
    {{ headContent }}
    {%- endfor %}
    {%- endif %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="{{ markBindVersion }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {%- if title -%} <title>{{ title }}</title> {%- endif -%}
    {% if asset.bootstrap %} <link rel="stylesheet" href="{{ asset.bootstrap }}"> {%- endif -%}
    {% if asset.fontAwesome %} <link rel="stylesheet" href="{{ asset.fontAwesome }}"> {%- endif -%}
    {% if asset.glyphicons %} <link rel="stylesheet" href="{{ asset.glyphicons }}"> {%- endif -%}
    {% if asset.octicons %} <link rel="stylesheet" href="{{ asset.octicons }}"> {%- endif -%}
    {% if asset.materialIcons %} <link rel="stylesheet" href="{{ asset.materialIcons }}"> {%- endif -%}
    {% if asset.bootstrapIcons %} <link rel="stylesheet" href="{{ asset.bootstrapIcons }}"> {%- endif -%}
    {# Loads both light and dark stylesheets upfront to avoid visual lag #}
    {# when the user first toggles themes. Dynamically loading only the #}
    {# correct sheet causes code theme to lag behind other UI elements. #}
    <link rel="stylesheet" id="markbind-highlight-light" href="{{ asset.highlightLight }}">
    <link rel="stylesheet" id="markbind-highlight-dark" href="{{ asset.highlightDark }}">
    <script src="{{ asset.codeThemeJs }}"></script>
    {%- if not dev -%}<link rel="stylesheet" href="{{ asset.markBindCss }}">{%- endif -%}
    {%- if asset.pluginLinks -%}
    {%- for link in asset.pluginLinks -%}
        {{ link }}
    {%- endfor -%}
    {%- endif -%}
    {%- if asset.headBottom %}
    {%- for headContent in asset.headBottom %}
    {{ headContent }}
    {%- endfor %}
    {%- endif %}
    {%- if faviconUrl -%} <link rel="icon" href="{{ faviconUrl }}"> {%- endif -%}
</head>
<script>
  const baseUrl = '{{ baseUrl }}'
</script>
<body 
  {% if hasPageNavHeadings %} data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100" {% endif %} 
  data-code-theme="{{ codeTheme }}">
{{ content }}
</body>
{{- pageUserScriptsAndStyles -}}
{{- layoutUserScriptsAndStyles -}}
<script src="{{ asset.bootstrapUtilityJs }}"></script>
<script src="{{ asset.polyfillJs }}"></script>
<script src="{{ asset.vue }}"></script>
<script src="{{ asset.markBindJs }}"></script>
<script src="{{ asset.pageVueRenderJs }}"></script>
<script>
  {% if enableSearch %}MarkBind.setupWithSearch(){% else %}MarkBind.setup(){% endif %}
</script>
{%- if asset.externalScripts %}
{%- for script in asset.externalScripts %}
    <script src="{{ script }}"></script>
{%- endfor %}
{%- endif %}
{%- if asset.pluginScripts %}
{%- for script in asset.pluginScripts %}
    {{ script }}
{%- endfor %}
{%- endif %}
{%- if asset.pagefindLazyLoaderJs %}
    <script src="{{ asset.pagefindLazyLoaderJs }}"></script>
{%- endif %}
{%- if asset.scriptBottom %}
{%- for scripts in asset.scriptBottom %}
    {{ scripts }}
{%- endfor %}
{%- endif %}
</html>
