{% load static %}
<!DOCTYPE html>
<html lang="en" data-color-mode="dark">
    <head>
        <meta charset="UTF-8">
        <meta name="color-scheme" content="dark">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
              rel="stylesheet">
        <title>
            {% block title %}{% endblock %}
        </title>
        <link rel="stylesheet"
              type="text/css"
              href="{% static 'main/css/reset.css' %}"/>
        <link rel="stylesheet"
              type="text/css"
              href="{% static 'main/css/colors.css' %}"/>
        <link rel="stylesheet"
              type="text/css"
              href="{% static 'main/css/navigation_button.css' %}"/>
        <link rel="stylesheet"
              type="text/css"
              href="{% static 'main/css/button.css' %}"/>
        <link rel="stylesheet"
              type="text/css"
              href="{% static 'main/css/layout.css' %}"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="{% static 'main/js/navigation.js' %}" defer></script>
        <script src="{% static 'main/js/lightmode.js' %}" defer></script>
        {% block meta %}{% endblock %}
    </head>
    <body>
        <header class="primary-header flex">
            <div>
                <a href="{% url 'home' %}">
                    <img src="{% static 'main/img/icons/logo.svg' %}" alt="logo" class="logo">
                </a>
            </div>
            <div class="mobile-nav-toggle">
                <div class="mobile-nav-toggle__line"></div>
            </div>
            <nav>
                <div id="primary-navigation"
                     class="primary-navigation flex"
                     data-visible="false">
                    <a href="{% url 'home' %}" class="bold">Home</a>
                    <a href="{% url 'projects' %}" class="bold">Projects</a>
                    <button id="color-mode-toggle"
                            class="color-mode-toggle"
                            aria-label="toggle dark mode">
                        <audio id="flashbang"
                               src="{% static 'main/audio/csgo-throwing-flashbang-sound-effect.m4a' %}">
                        </audio>
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
                            <path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)"/>
                        </svg>
                    </button>
                </div>
            </nav>
        </header>
        <main>
            {% block content %}{% endblock %}
        </main>
    </body>
</html>
