<!doctype html>
<html lang="en">
    <head>
        {%- block site_meta %}
            <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 config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}
            {% if page and page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
            {% if config.site_favicon %}<link rel="shortcut icon" href="{{ config.site_favicon|url }}">
            {% else %}<link rel="shortcut icon" href="{{ 'img/favicon.ico'|url }}">{% endif %}
        {%- endblock %}

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

        {%- block styles %}
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
            <link rel="stylesheet" href="{{ 'css/normalize.css'|url }}">

            <link href="{{ 'css/bootstrap.min.css'|url }}" rel="stylesheet" crossorigin="anonymous">
            <link href="{{ 'css/font-awesome.min.css'|url }}" rel="stylesheet">
            <link href="{{ 'css/theme.css'|url }}" rel="stylesheet">

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

        {%- endblock %}
    </head>

    <body>
        <div class="container py-3">
        <header>
            <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
                <span class="fs-4">{{ config.site_name }}</span>
            </a>

                <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
                    {%- block site_nav %}
                        {%- if nav|length>1 %}
                            {%- for nav_item in nav %}
                                <a href="{{ nav_item.url|url }}" class="me-3 py-2 text-dark text-decoration-none">[{{ nav_item.title }}]</a>
                            {%- endfor %}
                        {%- endif %}
                    {%- endblock %}
                </nav>
            </div>

        </header>

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

        {%- block footer %}
            {% include "/modules/footer.html" %}
        {%- endblock %}

        </div>
    
        <script src="{{ 'js/jquery-3.3.1.slim.min.js"'|url }}"></script>
        <script src="{{ 'js/bootstrap.bundle.min.js"'|url }}"></script>
        <script src="{{ 'js/theme.js"'|url }}"></script>
    </body>

</html>
