{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
{% set github_config = theme_var('github') %}
{% set grid_size = theme_var('grid-size') %}
{% set compress = theme_var('production-mode') ? '.min.css' : '.css' %}
<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: grav.config.site.default_lang }}">
<head>
{% block head deferred %}
    <meta charset="utf-8" />
    <title>{% if page.title %}{{ page.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include 'partials/metadata.html.twig' %}

    <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
    <link rel="canonical" href="{{ page.url(true, true) }}" />
{% endblock head %}

{% block stylesheets %}
    {% do assets.addCss('theme://css/fork-awesome.min.css') %}
    {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
    {% do assets.addCss('theme://css-compiled/theme'~compress) %}
    {% do assets.addCss('theme://css/custom.css') %}
{% endblock %}

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://js/simplebar.min.js', { group:'bottom' }) %}
    {% do assets.addJs('theme://js/learn4.js', { group:'bottom' }) %}
    {% do assets.addJs('theme://js/darkMode.js', { group:'bottom' }) %}
{% endblock %}

{% block assets deferred %}
    {{ assets.css()|raw }}
    {{ assets.js()|raw }}
{% endblock %}
</head>
<body id="top" class="{{ sidebar_color }} {% block body_classes %}{{ body_classes|trim }}{% endblock %}" data-url="{{ page.route }}">
    <div id="page-wrapper" class="off-canvas off-canvas-sidebar-show">
        <!-- off-screen toggle button -->
        <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
            <i class="fa fa-bars"></i>
        </a>

        <div id="sidebar-id" class="learn-sidebar off-canvas-sidebar">
            <!-- off-screen sidebar -->
            {% include 'partials/sidebar.html.twig' %}
        </div>

        <a class="off-canvas-overlay" href="#close"></a>

        <div class="learn-content off-canvas-content">
            {% block topbar %}
                {% include 'partials/topbar.html.twig' %}
            {% endblock %}

            <section id="start">
                {% block body %}
                    <section id="body-wrapper" class="section">
                        <section class="container {{ grid_size }}">
                            {% block messages %}
                                {% include 'partials/messages.html.twig' ignore missing %}
                            {% endblock %}
                            {% block content %}{% endblock %}
                        </section>
                    </section>
                {% endblock %}
            </section>

            {% block footer %}
                {% include 'partials/footer.html.twig' %}
            {% endblock %}
        </div>
    </div>

    {% block bottom %}
        {{ assets.js('bottom')|raw }}
    {% endblock %}
</body>
</html>
