<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        {% block title_tag %}
        {{ config.SITE_NAME }}
        {% endblock title_tag %}
    </title>

    <link rel="preload" href="{{ '/static/css/style.css' | autoversion }}" as="style">
    <link rel="stylesheet" type="text/css" href="{{ '/static/css/style.css' | autoversion }}">

    {% block meta %}
    {% endblock meta %}

    <meta property="og:site_name" content="{{ config.SITE_NAME }}">
    <meta property="og:type" content="website">

    <link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | autoversion }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ '/favicon-32x32.png' | autoversion }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ '/favicon-16x16.png' | autoversion }}">
    <link rel="manifest" href="{{ '/manifest.json' | autoversion }}">
    <link rel="mask-icon" color="#5bbad5" href="{{ '/safari-pinned-tab.svg' | autoversion }}">
    <meta name="theme-color" content="#ffffff">

    {% if config.GTAG_ID %}
    {% include 'components/analytics.html' %}
    {% endif %}

</head>

<body class="top">
    <div class="page-wrap">
        <div class="header-wrap">
            <header class="primary-header">
                {% if title %}
                <h2><a href="/">{{ config.SITE_NAME }} <img src="/static/images/logo.svg"></a></h2>
                {% else %}
                <h1><a href="/">{{ config.SITE_NAME }} <img src="/static/images/logo.svg"></a></h1>
                {% endif %}

                <nav class="primary-nav">
                    <ul role="list" class="nav-list">
                        {% for category in categories %}
                        <li><a href="/categories/{{ category.slug }}/">{{ category.name }}</a></li>
                        {% endfor %}
                    </ul>
                </nav>
            </header>
        </div>

        <main class="main-content">
            <div class="content container">
                {% block content %}
                {% endblock content %}
            </div>
        </main>

        <div class="footer-wrap">
            <footer class="primary-footer">
                <div class="footer-text">
                    Hosted on <a rel="nofollow" href="https://aws.amazon.com/">AWS</a>.
                    Built with <a href="https://github.com/vlatan/picogen">Picogen</a>.
                    &copy; {{ today().year }}. Some rights <a rel="nofollow"
                        href="https://creativecommons.org/licenses/by/3.0/">reserved</a>.
                </div>

                <nav class="secondary-nav">
                    <ul role="list" class="footer-list">
                        {% for page in pages %}
                        {% if page.title == "About" %}
                        <li><a href="/pages/{{ page.slug }}/">{{ page.title }}</a></li>
                        {% elif page.title == "Privacy" %}
                        <li><a href="/pages/{{ page.slug }}/">{{ page.title }}</a></li>
                        {% endif %}
                        {% endfor %}

                        {% if config.CONTACT_EMAIL %}
                        <li><a href="mailto:{{ config.CONTACT_EMAIL }}">Contact</a></li>
                        {% endif %}
                    </ul>
                </nav>
            </footer>
        </div>
    </div>

    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
    <script>function scrollFunction() { document.body.scrollTop > 200 || document.documentElement.scrollTop > 200 ? document.getElementById("myBtn").style.display = "block" : document.getElementById("myBtn").style.display = "none" } function topFunction() { document.body.scrollTop = 0, document.documentElement.scrollTop = 0 } window.onscroll = function () { scrollFunction() };</script>

</body>

</html>