<!DOCTYPE html>
<html lang="en" dir="ltr" id="page-top">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {# Meta data #}
        {% block metaTitle %}
            <meta property="og:title" content="{{ title if title else sitemeta.siteName | safe }}">
        {% endblock %}
        {% include "global/metagen.njk" %}

        {# CSS #}
        <link rel="stylesheet" href="{{'/assets/css/main.css' | url | safe}}">
        {% block customCSS %}{% endblock %}

        {# Fonts #}
        <link rel="stylesheet" href="{{'/assets/fonts/noto-sans/noto-sans.css' | url | safe}}">

        {# Font Awesome #}
        <link href="{{'/assets/fonts/fontawesome/css/fontawesome.css' | url | safe}}" rel="stylesheet" />
        <link href="{{'/assets/fonts/fontawesome/css/brands.css' | url | safe}}" rel="stylesheet" />
        <link href="{{'/assets/fonts/fontawesome/css/solid.css' | url | safe}}" rel="stylesheet" />

        {# Favicon #}
        {% block favicon %}
            <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
            <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
            <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
            <link rel="manifest" href="/assets/favicon/site.webmanifest">
        {% endblock %}

        <title>
            {% block pageTitle %}{{ title + " | " if title }}{{ sitemeta.siteName | safe }}{% endblock %}
        </title>
    </head>
    <body>
        {% block hero %}{% include "global/hero.njk" %}{% endblock %}
        {% block navbar %}{% include "global/navbar.njk" %}{% endblock %}
        <main>
            {{ content | safe }}
        </main>
        {% block footer %}{% include "global/footer.njk" %}{% endblock %}
        {% include "global/top-btn.njk" %}
    </body>
</html>