<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>tesoft - {{ title }}</title>
    <link rel="stylesheet" href="/src/styles/main.css">
    <link rel="icon" type="image/png" href="/assets/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
    <link rel="shortcut icon" href="/assets/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="tesoft" />
    <link rel="manifest" href="/assets/site.webmanifest" />
    {% block styles %}
    {% endblock %}
</head>
<body>
<div class="hidden">
    <tesoft-nav>
        {% for item in [{title: "Home", href: "/"}, {title: "Blog", href: "/blog"}, {title: "About me", href: "/about"}] %}
            <tesoft-button transparent href="{{ item.href }}" {% if item.title == title %}selected{% endif %}>
                {{ item.title }}
            </tesoft-button>
        {% endfor %}
    </tesoft-nav>
    <main>
        {% block content %}
        {% endblock %}
    </main>
</div>

{% includeOnce 'components/button.njk' %}
{% includeOnce 'components/nav.njk' %}
{% block components %}
{% endblock %}
{% block sources %}
{% endblock %}
<script src="/src/scripts/main.ts" type="module"></script>
</body>
</html>
