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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}FTC Robotics{% endblock %}</title>
    <!--Shared Files-->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="{{ url_for('static', filename='js/scripts.js') }}" defer></script>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.png') }}">
</head>

<body>
    <nav class="navbar">
        <div class="navbar-inner">
            <a href="/" class="navbar-logo">
                <img src="{{ url_for('static', filename='images/logo2.png') }}" alt="Logo">
            </a>
            <div class="navbar-links">
                <a href="/">Home</a>
                <a href="/contributors">Contributors</a>
                <a href="/competitions">Competitions</a>
                <a href="/sponsors">Sponsors</a>
                <a href="/contact">Contact</a>
                <a href="https://hcb.hackclub.com/donations/start/technicalturbulence" target="_blank">Donate</a>
            </div>
        </div>
    </nav>
    <button class="menu-button">☰</button>
    <div class="nav-side">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/contributors">Contributors</a></li>
            <li><a href="/competitions">Competitions</a></li>
            <li><a href="/sponsors">Sponsors</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="https://hcb.hackclub.com/donations/start/technicalturbulence" target="_blank">Donate</a></li>
        </ul>
    </div>
    <script>
        const menuButton = document.querySelector('.menu-button');
        const navSide = document.querySelector('.nav-side');
        const navLinks = document.querySelectorAll('.nav-side a');

        menuButton.addEventListener('click', () => {
            if (navSide.style.display === 'none' || navSide.style.display === '') {
                navSide.style.display = 'flex';
            } else {
                navSide.style.display = 'none';
            }
        });

        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                navSide.style.display = 'none';
            });
        });

        // Highlight active page
        const currentPath = window.location.pathname;
        const navbarLinks = document.querySelectorAll('.navbar-links a');
        navbarLinks.forEach(link => {
            if (link.getAttribute('href') === currentPath) {
                link.classList.add('active');
            }
        });
    </script>
    <!-- This is where child templates will insert their content -->
    {% block content %}
    {% endblock %}

</body>

</html>