<!doctype html>
<html>
    <head>
        {%- block site_meta %}
            {%- block htmltitle %}
                <title>{% if page and page.title and not page.is_homepage %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
            {%- endblock %}

            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            {% if page and page.is_homepage %}<meta name="description" content="{{ config['site_description'] }}">{% endif %}
            {% if page and page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
            {% if config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}

            {% if config.theme.favicon %}
                <link  rel="icon" type="image/x-icon" href="{{ config.theme.favicon|url }}">
            {% else %}
                <link  rel="icon" type="image/x-icon" href="{{ 'assets/img/favicon.ico'|url }}">
            {% endif %}

            {%- block libs %}
                {%- if config.theme.highlightjs %}
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
        
                    {%- for lang in config.theme.hljs_languages %}
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/languages/{{lang}}.min.js"></script>
                    {%- endfor %}
                        <script>hljs.initHighlightingOnLoad();</script>
                {%- endif %}
            {%- endblock %}

        {%- endblock %}

        {%- block styles %}
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="{{ 'assets/css/bootstrap.min.css'|url }}">
            <link rel="stylesheet" href="{{ 'assets/css/main.min.css'|url }}">

            {%- for path in extra_css %}
                <link href="{{ path }}" rel="stylesheet">
            {%- endfor %}

            {%- for path in extra_javascript %}
                <script src="{{ path }}"></script>
            {%- endfor %}

            {% if config.theme.theme_style %}
                {% if config.theme.theme_style == 'dark' %}
                    <style>
                        :root {
                            --text: white;
                            --title: white;
                            --primary: white;
                            --background: black;
                        }
                    </style>
                {% endif %}
            {% else %}
                {% if config.theme.colors %}
                    {% if config.theme.colors.text %} <style>:root {--text: var(--color-{{ config.theme.colors.text }});}</style> {% endif %}
                    {% if config.theme.colors.title %} <style>:root {--title: var(--color-{{ config.theme.colors.title }});}</style> {% endif %}
                    {% if config.theme.colors.primary %} <style>:root {--primary: var(--color-{{ config.theme.colors.primary }});}</style> {% endif %}
                    {% if config.theme.colors.background %} <style>:root {--background: var(--color-{{ config.theme.colors.background }});}</style> {% endif %}
                {% endif %}
            {% endif %}

        {%- endblock %}
    </head>

    <body>
        <div class="container py-3">
            <header>
                {%- block header %}
                    {% include "/modules/header.html" %}
                {%- endblock %}
            </header>

            <main>
                {%- block search_button %}
                    {%- if 'search' in config['plugins'] %}{%- include "searchbox.html" %}{%- endif %}
                {%- endblock %}

                {%- block content %}
                    {% include "/modules/content.html" %}
                {%- endblock %}
            </main>

            {% if config.theme.components and config.theme.components.preview == False %}
            {% else %}
                {%- block preview %}
                    {% include "/modules/preview.html" %}
                {%- endblock %}
            {% endif %}

            {% if config.theme.components and config.theme.components.footer == False %}
            {% else %}
                {%- block footer %}
                    {% include "/modules/footer.html" %}
                {%- endblock %}
            {% endif %}
        </div>
    
        {%- block scripts %}

            <script>var base_url = '{{ base_url }}';</script>
            <script src="{{ 'assets/js/jquery-3.3.1.slim.min.js"'|url }}"></script>
            <script src="{{ 'assets/js/bootstrap.bundle.min.js"'|url }}"></script>
            <script src="{{ 'assets/js/main.min.js"'|url }}"></script>

            {%- for path in extra_javascript %}
                <script src="{{ path }}" defer></script>
            {%- endfor %}

        {%- endblock %}

    </body>

</html>
