<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    {% set title = "404" %}
    {% include "head.html" %}
</head>
<body>
<header>
{% if config.extra.header_nav %}
<nav id="nav-bar">
    {% for nav_item in config.extra.header_nav %}
    <a href="{{ nav_item.url }}" class="">
        {% set language_key = 'name_' ~ lang %}
        {{ nav_item[language_key] }}
    </a>
        {%- if not loop.last %}
        {{ config.extra.header_nav_delimiter | default (value="") }}
        {%- endif %}
    {% endfor %}
    <div>
    <input type="checkbox" id="theme-toggle" style="display: none;">
    <label for="theme-toggle" id="theme-toggle-label"><svg id="theme-icon" class="icons"><use href="{{ get_url(path='/icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></label>
    <audio id="theme-sound">
        <source src="{{ get_url(path='click.ogg', trailing_slash=false) | safe }}" type="audio/ogg">
    </audio>
    </div>
</nav>
{% endif %}
</header>
<main>
{% block content %}
    <h1>{{ trans(key="404-title", lang=lang) }}</h1>
    <p>{{ trans(key="404-text", lang=lang) }}</p>
{% endblock content %}
</main>
<footer>
    {% include "footer.html" %}
</footer>
</body>
</html>